/* J-1004-TYPING-MONSTER-FX (proposal): monster eye glow + spell-caster crackle.
   J-1004-TYPING-LANDING-CRACKLE adds one small arc box on the landing hooded caster.
   J-1004-TYPING-LANDING-FLASHES tints the graphics rim / glow / bounce layers.
   Only transform/opacity animate; capped canvases for arcs. Never clickable,
   never focusable. Rollback: restore the J-1004-TYPING-LANDING-FLASHES backup. */

/* layer inside #monster-rect: same box as the sprite <img>, painted above it */
.mfx-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mfx-layer.mfx-dead { opacity: 0; transition: opacity .25s ease; }
.mfx-eyes { position: absolute; inset: 0; pointer-events: none; transition: opacity .12s ease; }
.mfx-eyes.mfx-off { opacity: 0; }
/* queue slot: above its own img, inside the slot's own stacking order */
.monster-queue-slot > .mfx-eyes { z-index: 1; }

/* one eye: soft almond glow, hot core, colour per monster (--mfx-rgb) */
.mfx-eye {
  position: absolute; width: var(--mfx-d, 3%); aspect-ratio: 1.55; translate: -50% -50%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(255,250,235,.95) 0 13%, rgba(var(--mfx-rgb),.92) 30%, rgba(var(--mfx-rgb),.38) 58%, rgba(var(--mfx-rgb),0) 100%);
  opacity: .85;
  animation: mfx-pulse var(--mfx-pulse, 3s) ease-in-out var(--mfx-dp, 0s) infinite alternate,
             mfx-blink var(--mfx-blink, 8s) linear var(--mfx-db, 0s) infinite;
  will-change: opacity, scale;
}
/* beholder: violet halo ringing the painted central eye (the eye itself stays visible) */
.mfx-eye.mfx-ring {
  width: 13.5%; aspect-ratio: 1.08;
  background: radial-gradient(closest-side, rgba(var(--mfx-rgb),0) 0 50%, rgba(var(--mfx-rgb),.42) 62%, rgba(var(--mfx-rgb),.2) 78%, rgba(var(--mfx-rgb),.06) 92%, rgba(var(--mfx-rgb),0) 100%);
  animation: mfx-pulse calc(var(--mfx-pulse, 3s) * 1.3) ease-in-out var(--mfx-dp, 0s) infinite alternate;
}
@keyframes mfx-pulse { from { opacity: .45; } to { opacity: .9; } }
/* blink = 140-ish ms squeeze once per cycle (cycle 6-11 s, offset per monster) */
@keyframes mfx-blink { 0%, 96.4%, 100% { scale: 1 1; } 97.3% { scale: 1 .06; } 98.2% { scale: 1 1; } }

/* crackle canvas: covers only the staff / eyestalk region */
.mfx-arc { position: absolute; pointer-events: none; }
.mfx-still { display: none; }

/* landing corridor: a thin clipped band over the body background art */
.mfx-corridor { position: absolute; left: 0; width: 100%; overflow: hidden; pointer-events: none; z-index: -1; contain: layout paint; }
.mfx-corridor-img { position: absolute; pointer-events: none; }
.mfx-corridor .mfx-eyes { inset: 0; }
.mfx-cor .mfx-eye { aspect-ratio: 1.45; }
/* hooded caster: crackle host is a % box of the corridor art (hands / staff) */
.mfx-cor-arc { position: absolute; pointer-events: none; }
body:not(:has(#screen-title.land.active)) .mfx-corridor,
body:not(:has(#screen-title.land.active)) .mfx-light { display: none; }

/* full-art light stage: same rect as the corridor image. Colour comes from JS. */
.mfx-light { position: absolute; top: 0; pointer-events: none; z-index: -1; }
.mfx-depth { position: absolute; pointer-events: none; mix-blend-mode: screen; }
.mfx-glow, .mfx-bounce, .mfx-rim, .mfx-still-glow {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask-image: var(--src); mask-image: var(--src);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-position: center top; mask-position: center top;
}
.mfx-glow, .mfx-bounce, .mfx-rim { opacity: 0; }
.mfx-still-glow { display: none; background: rgb(168, 107, 255); opacity: .4; }

/* paused: tab hidden / off screen */
.mfx-paused .mfx-eye, .mfx-offscreen .mfx-eye { animation-play-state: paused; }

/* reduced motion: static soft glow, no blink, no pulse, no crackle */
@media (prefers-reduced-motion: reduce) {
  .mfx-eye, .mfx-eye.mfx-ring { animation: none; opacity: .8; }
  .mfx-arc, .mfx-depth, .mfx-glow, .mfx-bounce, .mfx-rim { display: none; }
  .mfx-still-glow { display: block; }
  .mfx-still {
    display: block; position: absolute; width: var(--mfx-d, 8%); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--mfx-rgb),.55), rgba(var(--mfx-rgb),.18) 55%, rgba(var(--mfx-rgb),0));
    pointer-events: none;
  }
}