/* scene.css - .stage layers, entities, fixtures, hit rects, held/leaving states (ARCH 5.1-5.2, art-style 9). Owner: L2.
 * Stage geometry (size, safe areas) lives in layout.css; z bands and the lift shadow are tokens. */

.defs-host { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

.stage { background: var(--c-paper-2); touch-action: none; }

.layer-backdrop, .backdrop-bleed, .layer-zones, .layer-entities, .layer-fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.layer-backdrop, .backdrop-bleed { z-index: var(--z-backdrop); pointer-events: none; }
.backdrop-bleed { z-index: calc(var(--z-backdrop) - 1); } /* G1 B2: a stretched copy of the art fills what the fitted art does not cover */
.layer-zones { z-index: var(--z-zones); pointer-events: none; }
.layer-entities { z-index: var(--z-entities); pointer-events: none; }
.layer-fx { z-index: var(--z-fx); pointer-events: none; }

/* An entity is a 0 x 0 box at the pivot (bottom-centre of the art); the svg hangs above-centre of it (ARCH 5.2). */
.entity, .fixture {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: 50% 100%;
  pointer-events: none;
  touch-action: none;
  contain: layout style; /* H4: restyles and relayouts inside one art never reach its siblings (paint is not contained: the art overflows the 0 x 0 box) */
}
.entity > svg {
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% -100%;
  transform-origin: 50% 100%;
  pointer-events: none;
  overflow: visible;
}
.fixture > svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.entity > .hit, .fixture > .hit {
  position: absolute;
  display: block;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}
.fixture > .hit { cursor: pointer; }

/* Press lift (the scale 1.1 itself is in the transform) */
.entity[data-state="held"] > svg { filter: var(--shadow-lift); }
.entity[data-state="held"] > .hit { cursor: grabbing; }

/* Leaving: shrink + fade 400 ms; removal on transitionend (scene.js) */
.entity[data-state="leaving"] { opacity: 0; transition: opacity var(--dur-leave) ease-in; }
.entity[data-state="leaving"] > svg { scale: 0.6; transition: scale var(--dur-leave) ease-in; }
.entity[data-state="leaving"] > .hit { pointer-events: none; }

/* Night: entities and fixtures dim gently by phase (static filter, art-style 9); the sun/moon is exempt */
.stage[data-phase="evening"] :is(.entity, .fixture:not([data-fixture="sun-moon"])) > svg,
.stage[data-phase="night"] :is(.entity, .fixture:not([data-fixture="sun-moon"])) > svg,
.stage[data-phase="morning"] :is(.entity, .fixture:not([data-fixture="sun-moon"])) > svg {
  filter: brightness(calc(0.55 + 0.45 * var(--daylight, 1)));
}
.stage[data-phase="evening"] .entity[data-state="held"] > svg,
.stage[data-phase="night"] .entity[data-state="held"] > svg,
.stage[data-phase="morning"] .entity[data-state="held"] > svg {
  filter: brightness(calc(0.55 + 0.45 * var(--daylight, 1))) var(--shadow-lift);
}

html[data-reduced-motion="true"] .entity[data-state="leaving"] > svg { scale: 1; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .entity[data-state="leaving"] > svg { scale: 1; transition: none; }
}

/* Zones (SPEC 3.8): a soft steady glow while a matching object is held, a gentle swell on a snap. No pulsing, no flashing. */
.zone {
  position: absolute;
  box-sizing: border-box;
  border-radius: 22px;
  opacity: 0;
  pointer-events: none;
  background: color-mix(in srgb, var(--c-glow) 26%, transparent);
  /* H1: a 2 px --c-ring edge outside the yellow band, as on --shadow-glow: yellow alone is ~1.1:1 on hay, sand and paths */
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-glow) 90%, transparent), 0 0 0 6px var(--c-ring), 0 0 24px 10px color-mix(in srgb, var(--c-glow) 55%, transparent);
  transition: opacity 250ms ease-out;
}
.zone[data-round] { border-radius: 50%; }
.zone[data-glow="on"] { opacity: 1; }
.zone[data-celebrate="on"] {
  opacity: 1;
  background: color-mix(in srgb, var(--c-glow) 40%, transparent);
  transition: opacity 120ms ease-out, background 300ms ease-out;
}
html[data-reduced-motion="true"] .zone { transition: none; }
@media (prefers-reduced-motion: reduce) { .zone { transition: none; } }

/* ---- S4 actions: Zzz above a sleeper, sleeping eyes, breathing (the letters are decorative, aria-hidden) ---- */
.entity > .zzz { position: absolute; left: 0; bottom: var(--art-h, 0px); display: none; width: 0; height: 0; pointer-events: none; font: 800 calc(var(--art-h, 60px) * 0.22) / 1 var(--font-display, system-ui), system-ui, sans-serif; color: var(--c-purple, #9b6fd6); }
.entity:is([data-anim="sleep"], [data-anim="sleep-sit"]) > .zzz { display: block; }
.entity > .zzz i { position: absolute; left: 0; bottom: 0; font-style: normal; opacity: 0; animation: gfk-zzz 3.6s ease-out infinite; }
.entity > .zzz i:nth-child(2) { animation-delay: 1.2s; margin-left: 0.5em; }
.entity > .zzz i:nth-child(3) { animation-delay: 2.4s; margin-left: 1em; }
@keyframes gfk-zzz { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 15% { opacity: 1; } 85% { opacity: 0.9; } 100% { opacity: 0; transform: translate(0.4em, calc(var(--art-h, 60px) * -0.5)) scale(1.1); } }
.entity:is([data-anim="sleep"], [data-anim="sleep-sit"]) > svg { animation: gfk-breathe 3s ease-in-out infinite; }
@keyframes gfk-breathe { 0%, 100% { scale: 1 1; } 50% { scale: 1.015 1.03; } }
.entity:is([data-anim="sleep"], [data-anim="sleep-sit"]) :is(.eye-open, .eye-happy) { display: none; }
.entity:is([data-anim="sleep"], [data-anim="sleep-sit"]) .eye-closed { display: inline; }
html[data-reduced-motion] .entity > .zzz i { animation: gfk-zzz-fade 3.6s ease-in-out infinite; }
html[data-reduced-motion] .entity:is([data-anim="sleep"], [data-anim="sleep-sit"]) > svg { animation: none; }
@keyframes gfk-zzz-fade { 0%, 100% { opacity: 0; } 30%, 70% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .entity > .zzz i { animation: gfk-zzz-fade 3.6s ease-in-out infinite; }
  .entity:is([data-anim="sleep"], [data-anim="sleep-sit"]) > svg { animation: none; }
}

/* ABC (E3): the picture pop beside a tapped tile (1.5 s) and the shelf picture a word leaves at the top. */
.abc-pic, .abc-shelf {
  position: absolute;
  pointer-events: none;
  translate: -50% -50%;
  z-index: 6;
}
.abc-pic {
  width: 22%;
  max-width: 190px;
  aspect-ratio: 1;
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.25));
  animation: abc-pop 1.5s ease-out both;
}
.abc-shelf {
  padding: 6px;
  box-sizing: border-box;
  border-radius: 18px;
  background: #fff8e8;
  box-shadow: 0 6px 0 #b9884f, 0 8px 14px rgb(0 0 0 / 0.25);
  animation: abc-pop 0.5s ease-out both;
}
.abc-pic > svg, .abc-shelf > svg { width: 100%; height: 100%; display: block; }
@keyframes abc-pop {
  0% { scale: 0.3; opacity: 0; }
  20% { scale: 1.1; opacity: 1; }
  100% { scale: 1; opacity: 1; }
}
html[data-reduced-motion="true"] .abc-pic, html[data-reduced-motion="true"] .abc-shelf { animation: none; }
@media (prefers-reduced-motion: reduce) { .abc-pic, .abc-shelf { animation: none; } }