/* ---- glow-anim-ambient: the living title plate -------------------------------
   Animation judge, round 2 (animation-06): "The title and menu backdrops are
   completely still." The same painting, brought to life in code with no new
   art: a slow breathing camera, light running down the falls, lamps that
   flicker, a hazed moon, mist at the falls' feet, glints on the pool, a few
   rising motes, and a small lean toward the mouse (door-ambient.js).

   Rules for this file:
   - Only transform and opacity ever animate, so the compositor runs all of it
     and the main thread does nothing per frame. No blend modes and no masks:
     both make the layer a surface recomposited every frame, which took the
     NUC's software GPU from 60 to 10 frames a second. Plain light colours
     over the painting read the same.
   - It plays on the stages whose plate is sharp (the title and the menus).
     Everywhere else, and in a hidden tab, it pauses where it stands, so a
     stage change never jumps the picture; a match hides #hold, which stops it.
   - Reduced motion is a still frame: the light is there, nothing moves.
   - Subtle. It is a menu, not a show.
   --------------------------------------------------------------------------- */

#hold {
  --amb-water: 205, 248, 255;   /* the falls' Blink-lit spray */
  --amb-lamp: 240, 176, 84;     /* --ui-lamp */
  --amb-lamp-core: 255, 243, 222; /* --ui-lamp-core */
  --amb-moon: 214, 228, 255;
}

/* The scene holds the plate and the light over it. It is the size container
   the light is laid out against. */
#hold .hold-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
}
/* The mouse lean (door-ambient.js sets `translate`). */
#hold .hold-look {
  position: absolute;
  inset: 0;
  transition: translate 1.6s cubic-bezier(.2, .8, .2, 1);
}
/* The breathing camera: 3.5 % of zoom leaves room for the drift and the lean
   at every edge. It zooms about the plate's own anchor, so a phone's crop
   (both bodies in frame, aes-13) is the crop it always was. */
#hold .hold-cam {
  position: absolute;
  inset: 0;
  transform-origin: calc(var(--plate-x, .5) * 100%) 50%;
  transform: scale(1.035);
  animation: amb-cam 34s ease-in-out infinite alternate;
}
@keyframes amb-cam {
  0%   { transform: scale(1.035) translate(0, 0); }
  35%  { transform: scale(1.045) translate(-.55%, -.3%); }
  70%  { transform: scale(1.04) translate(.35%, -.45%); }
  100% { transform: scale(1.05) translate(-.2%, .2%); }
}

/* The light layer covers exactly what object-fit: cover shows of the painting
   (1672 x 941), anchored where the plate is anchored, so every percentage in
   door-ambient.js is a place on the painting. */
#hold .hold-amb {
  --amb-w: max(100cqw, 177.68cqh);
  --amb-h: max(100cqh, 56.28cqw);
  position: absolute;
  width: var(--amb-w);
  height: var(--amb-h);
  left: calc((100cqw - var(--amb-w)) * var(--plate-x, .5));
  top: calc((100cqh - var(--amb-h)) / 2);
  transition: opacity .6s ease;
}
#hold .hold-amb i { position: absolute; display: block; }
#hold .hold-amb .amb-near { transition: translate 1.6s cubic-bezier(.2, .8, .2, 1); }

/* ---- the falls: a streak texture drawn in code (door-ambient.js dashTile)
   slides down inside each fall's own box. A plain clip, never a mask. ---- */
#hold .amb-fall { overflow: hidden; opacity: .55; }
#hold .amb-flow {
  left: 0;
  top: -128px;
  width: 100%;
  height: calc(100% + 128px);
  background: var(--amb-dash, none) 0 0 / 48px 128px repeat;
  animation: amb-flow var(--d, 2s) linear var(--o, 0s) infinite;
}
@keyframes amb-flow { to { transform: translateY(128px); } }

/* ---- mist rolling at the falls' feet: two banks ---------------------------- */
#hold .amb-mists { animation: amb-mist var(--d, 12s) ease-in-out var(--o, 0s) infinite alternate; }
#hold .amb-mist { background: radial-gradient(50% 50% at 50% 50%, rgba(var(--amb-water), .2), rgba(var(--amb-water), 0) 100%); }
@keyframes amb-mist {
  from { transform: translateX(-14px); opacity: .45; }
  to   { transform: translateX(14px); opacity: 1; }
}

/* ---- the moon's halo, and two thin clouds crossing it --------------------- */
#hold .amb-moon {
  background: radial-gradient(closest-side, rgba(var(--amb-moon), .3), rgba(var(--amb-moon), .1) 45%, rgba(var(--amb-moon), 0));
  animation: amb-moon 11s ease-in-out infinite alternate;
}
@keyframes amb-moon {
  from { transform: scale(.94); opacity: .55; }
  to   { transform: scale(1.06); opacity: 1; }
}
#hold .amb-haze {
  background: radial-gradient(closest-side, rgba(var(--amb-moon), .16), rgba(var(--amb-moon), 0));
  animation: amb-haze 46s ease-in-out infinite alternate;
}
#hold .amb-haze.is-b { animation-duration: 61s; animation-direction: alternate-reverse; }
@keyframes amb-haze {
  from { transform: translateX(-18%); opacity: .4; }
  50%  { opacity: 1; }
  to   { transform: translateX(26%); opacity: .5; }
}

/* ---- lamps: a warm glow that flickers like a flame, never strobes. Three
   groups, neighbours in different ones, each on its own irregular beat. ---- */
#hold .amb-lamps { animation: amb-flicker var(--d, 3s) linear var(--o, 0s) infinite; }
#hold .amb-lamp {
  background: radial-gradient(closest-side, rgba(var(--amb-lamp-core), .5), rgba(var(--amb-lamp), .26) 34%, rgba(var(--amb-lamp), 0));
}
#hold .amb-lamp.is-big {
  background: radial-gradient(closest-side, rgba(var(--amb-lamp-core), .34), rgba(var(--amb-lamp), .16) 40%, rgba(var(--amb-lamp), 0));
}
@keyframes amb-flicker {
  0%   { opacity: .74; }
  9%   { opacity: .92; }
  17%  { opacity: .66; }
  31%  { opacity: .86; }
  44%  { opacity: .58; }
  52%  { opacity: .96; }
  68%  { opacity: .7; }
  83%  { opacity: .9; }
  100% { opacity: .74; }
}

/* ---- the pool: lamp reflections that swell and fade ---------------------- */
#hold .amb-glints { animation: amb-glint var(--d, 3s) ease-in-out var(--o, 0s) infinite alternate; }
#hold .amb-glint { background: radial-gradient(closest-side, rgba(var(--amb-lamp-core), .55), rgba(var(--amb-lamp), 0)); }
@keyframes amb-glint {
  from { opacity: .2; }
  to   { opacity: .85; }
}

/* ---- motes rising through the light ---------------------------------------- */
#hold .amb-mote {
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--amb-water), .95), rgba(var(--amb-water), 0));
  opacity: 0;
  animation: amb-mote var(--d, 14s) linear var(--o, 0s) infinite;
}
#hold .amb-mote.is-warm { background: radial-gradient(closest-side, rgba(var(--amb-lamp-core), .95), rgba(var(--amb-lamp), 0)); }
@keyframes amb-mote {
  0%   { transform: translate(0, 0); opacity: 0; }
  18%  { opacity: .75; }
  70%  { opacity: .5; }
  100% { transform: translate(var(--dx, 20px), -150px); opacity: 0; }
}

/* ---- where it plays ----------------------------------------------------------
   The light shows on the sharp-plate stages; elsewhere it fades out and every
   part of the scene, the camera included, holds still where it is. */
#hold:not(:is([data-stage="press"], [data-stage="signin"], [data-stage="roster"], [data-stage="newchar"],
              [data-stage="menu"], [data-stage="tutorial"], [data-stage="settings"], [data-stage="games"],
              [data-stage="create"], [data-stage="private"], [data-stage="board"])) .hold-amb { opacity: 0; }
#hold:not(:is([data-stage="press"], [data-stage="signin"], [data-stage="roster"], [data-stage="newchar"],
              [data-stage="menu"], [data-stage="tutorial"], [data-stage="settings"], [data-stage="games"],
              [data-stage="create"], [data-stage="private"], [data-stage="board"])) :is(.hold-cam, .hold-amb i),
#hold[data-amb="rest"] :is(.hold-cam, .hold-amb i) {
  animation-play-state: paused;
}

/* ---- reduced motion: the still frame ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #hold :is(.hold-cam, .hold-amb i) { animation: none; }
  #hold :is(.hold-look, .amb-near) { transition: none; translate: none !important; }
  #hold .amb-mote { display: none; }
}