/* scene.css — the richer magical landscape beyond the glass.
   Owned by the scene agent. Loaded after hearthmere.css so it may override.

   All layers below are children of #scene (z-index:1) and never exceed
   z-index:2, so they always sit BEHIND the rain (z-index:2) and the leaded
   glass (z-index:3). Motion is slow, opacity is low. Warm, secure, quiet. */

/* ---------------------------------------------------------------------- */
/* Local fallbacks so this file is self-sufficient even if a var is       */
/* renamed upstream. The hearthmere palette values are the source.        */
/* ---------------------------------------------------------------------- */
.scene {
  --hm-gold: var(--gold, #c9a24b);
  --hm-gold-bright: var(--gold-bright, #ecca77);
  --hm-candle: var(--candle-glow, #ffd98a);
  --hm-wisp: var(--wisp, #a7e6d4);
  --hm-mist: var(--mist, #7d96a0);
  --hm-night: var(--night, #0e161b);
  --hm-night-2: var(--night-2, #16242e);
}

/* Shared: every enrichment layer fills the scene, ignores pointer events,
   and stays low in the stack. */
.scene-aurora,
.scene-moon-halo,
.scene-stars,
.scene-shooting,
.scene-river,
.scene-village,
.scene-fireflies,
.scene-mist,
.scene-title-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* Sensible default depth ordering (all <= 2, all behind rain/glass). */
.scene-aurora        { z-index: 0; }
.scene-moon-halo     { z-index: 0; }
.scene-stars         { z-index: 0; }
.scene-shooting      { z-index: 0; }
.scene-river         { z-index: 1; }
.scene-village       { z-index: 1; }
.scene-mist          { z-index: 1; }
.scene-fireflies     { z-index: 2; }
.scene-title-scrim   { z-index: 2; }

/* ====================================================================== */
/* 1. AURORA / NEBULA                                                      */
/* Deep teal -> violet with a hint of warm gold, very low opacity, high    */
/* in the sky and gently drifting.                                         */
/* ====================================================================== */
.scene-aurora {
  overflow: hidden;
  /* --aurora-shift / --aurora-glow are nudged by the rAF loop; both have
     safe static defaults for the no-JS / reduced-motion case. */
  --aurora-shift: 0%;
  --aurora-glow: 0.5;
}
.scene-aurora__band {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 46%;
  top: -6%;
  border-radius: 50%;
  filter: blur(46px);
  opacity: calc(0.22 * var(--aurora-glow) + 0.06);
  mix-blend-mode: screen;
  transform: translateX(var(--aurora-shift));
  will-change: transform, opacity;
}
.scene-aurora__band--teal {
  background: radial-gradient(
    60% 100% at 32% 0%,
    rgba(60, 140, 150, 0.55),
    rgba(28, 80, 96, 0.18) 55%,
    transparent 78%
  );
  animation: hm-aurora-a 64s ease-in-out infinite;
}
.scene-aurora__band--violet {
  top: -2%;
  height: 50%;
  background: radial-gradient(
    60% 100% at 68% 0%,
    rgba(120, 96, 165, 0.5),
    rgba(72, 56, 120, 0.16) 55%,
    transparent 80%
  );
  animation: hm-aurora-b 81s ease-in-out infinite;
}
.scene-aurora__band--gold {
  top: 2%;
  height: 38%;
  opacity: calc(0.12 * var(--aurora-glow) + 0.03);
  background: radial-gradient(
    50% 100% at 50% 0%,
    rgba(236, 202, 119, 0.4),
    rgba(201, 162, 75, 0.1) 50%,
    transparent 74%
  );
  animation: hm-aurora-c 97s ease-in-out infinite;
}
@keyframes hm-aurora-a {
  0%,
  100% { transform: translateX(calc(-3% + var(--aurora-shift))) scaleY(1); }
  50%  { transform: translateX(calc(4% + var(--aurora-shift))) scaleY(1.08); }
}
@keyframes hm-aurora-b {
  0%,
  100% { transform: translateX(calc(3% + var(--aurora-shift))) scaleY(1.05); }
  50%  { transform: translateX(calc(-4% + var(--aurora-shift))) scaleY(1); }
}
@keyframes hm-aurora-c {
  0%,
  100% { transform: translateX(calc(-2% + var(--aurora-shift))); opacity: 0.05; }
  50%  { transform: translateX(calc(2% + var(--aurora-shift))); opacity: 0.12; }
}

/* ====================================================================== */
/* 2. MOON HALO                                                            */
/* A deeper, more luminous bloom in the upper sky, biased to match the     */
/* moon's usual upper-right placement. Sits softly behind the stars.       */
/* ====================================================================== */
.scene-moon-halo {
  --halo-pulse: 1;
  background:
    radial-gradient(
      18% 22% at 74% 20%,
      rgba(255, 246, 224, 0.18),
      rgba(231, 224, 200, 0.08) 45%,
      transparent 70%
    ),
    radial-gradient(
      34% 40% at 74% 20%,
      rgba(167, 230, 212, 0.08),
      transparent 72%
    );
  transform: scale(var(--halo-pulse));
  transform-origin: 74% 20%;
  animation: hm-halo 88s ease-in-out infinite;
  will-change: transform;
}
@keyframes hm-halo {
  0%,
  100% { opacity: 0.85; }
  50%  { opacity: 1; }
}

/* ====================================================================== */
/* 3. STARFIELD                                                            */
/* Faint, slowly twinkling stars (capped in JS). Confined to the upper     */
/* sky; the title pocket is carved out in JS.                              */
/* ====================================================================== */
.scene-star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #f3f6ff;
  box-shadow: 0 0 3px rgba(220, 232, 255, 0.7);
  opacity: var(--tw-min, 0.3);
  --tw-min: 0.12;
  --tw-max: 0.7;
  --tw-dur: 6s;
  --tw-delay: 0s;
  animation: hm-twinkle var(--tw-dur) ease-in-out var(--tw-delay) infinite;
  will-change: opacity;
}
.scene-star--faint {
  width: 1px;
  height: 1px;
  box-shadow: 0 0 2px rgba(200, 214, 240, 0.5);
}
.scene-star--bright {
  width: 2.6px;
  height: 2.6px;
  background: #fffdf6;
  box-shadow:
    0 0 4px rgba(255, 250, 232, 0.85),
    0 0 8px rgba(236, 202, 119, 0.35);
}
@keyframes hm-twinkle {
  0%,
  100% { opacity: var(--tw-min); }
  50%  { opacity: var(--tw-max); }
}

/* ====================================================================== */
/* 4. SHOOTING STARS                                                       */
/* Rare, gentle. A short bright head with a soft trailing tail that fades  */
/* in and drifts only during a brief slice of a very long cycle.           */
/* ====================================================================== */
.scene-shoot {
  position: absolute;
  width: 90px;
  height: 1.5px;
  transform-origin: left center;
  transform: rotate(var(--shoot-rot, 22deg)) translateX(0);
  background: linear-gradient(
    90deg,
    rgba(255, 250, 235, 0.9),
    rgba(236, 202, 119, 0.35) 40%,
    transparent 100%
  );
  border-radius: 2px;
  opacity: 0;
  /* total cycle is long; the visible flight is a small fraction of it */
  animation: hm-shoot var(--shoot-cycle, 32s) linear infinite;
  will-change: transform, opacity;
}
@keyframes hm-shoot {
  0%,
  86%   { opacity: 0; transform: rotate(var(--shoot-rot, 22deg)) translateX(0) scaleX(0.4); }
  88%   { opacity: 0; }
  90%   { opacity: 0.9; }
  98%   { opacity: 0; transform: rotate(var(--shoot-rot, 22deg)) translateX(240px) scaleX(1); }
  100%  { opacity: 0; transform: rotate(var(--shoot-rot, 22deg)) translateX(240px) scaleX(1); }
}

/* ====================================================================== */
/* 5. RIVER                                                                */
/* A luminous winding ribbon low in the landscape, catching the moonlight. */
/* The body is a soft fill; the sheen is a slowly travelling highlight.     */
/* ====================================================================== */
.scene-river {
  inset: auto 0 0 0;
  top: 56%;
  height: 44%;
  opacity: 0.9;
  mix-blend-mode: screen;
}
.scene-river__body {
  opacity: 0.85;
}
.scene-river__sheen {
  opacity: 0.7;
  stroke-dasharray: 16 26;
  animation: hm-river 26s linear infinite;
  will-change: stroke-dashoffset;
}
@keyframes hm-river {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -84; }
}

/* ====================================================================== */
/* 6. DISTANT VILLAGE                                                      */
/* Tiny warm lit windows clustered low on the far hills. Each flickers     */
/* very gently like a candle behind a far-off pane.                        */
/* ====================================================================== */
.scene-window {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 0; /* a windowpane, not a dot */
  background: var(--hm-candle, #ffd98a);
  box-shadow:
    0 0 3px rgba(255, 217, 138, 0.8),
    0 0 6px rgba(201, 162, 75, 0.45);
  transform: scale(var(--win-scale, 1));
  opacity: 0.7;
  animation: hm-window var(--win-dur, 8s) ease-in-out var(--win-delay, 0s) infinite;
  will-change: opacity;
}
@keyframes hm-window {
  0%,
  100% { opacity: 0.45; }
  45%  { opacity: 0.9; }
  60%  { opacity: 0.6; }
}

/* ====================================================================== */
/* 7. FIREFLIES / WILL-O'-THE-WISPS                                         */
/* Warm gold + cool cyan drifting motes among the hills. The drift and the */
/* pulse run on separate timelines via a nested element-less transform.     */
/* ====================================================================== */
.scene-firefly {
  position: absolute;
  width: var(--fly-size, 3px);
  height: var(--fly-size, 3px);
  border-radius: 50%;
  opacity: 0;
  animation:
    hm-fly-drift var(--fly-dur, 14s) ease-in-out var(--fly-delay, 0s) infinite alternate,
    hm-fly-pulse var(--fly-pulse, 4s) ease-in-out var(--fly-delay, 0s) infinite;
  will-change: transform, opacity;
}
.scene-firefly--warm {
  background: var(--hm-candle, #ffd98a);
  box-shadow:
    0 0 4px rgba(255, 217, 138, 0.85),
    0 0 9px rgba(236, 202, 119, 0.5);
}
.scene-firefly--cool {
  background: var(--hm-wisp, #a7e6d4);
  box-shadow:
    0 0 4px rgba(167, 230, 212, 0.8),
    0 0 9px rgba(125, 150, 160, 0.45);
}
@keyframes hm-fly-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--fly-dx, 16px), var(--fly-dy, -10px)); }
}
@keyframes hm-fly-pulse {
  0%,
  100% { opacity: 0.12; }
  50%  { opacity: 0.7; }
}

/* ====================================================================== */
/* 8. GROUND MIST                                                          */
/* Low, slow-breathing banks at the foot of the hills for depth.           */
/* --mist-shift is nudged by the rAF loop; safe static default below.      */
/* ====================================================================== */
.scene-mist {
  inset: auto 0 0 0;
  top: 62%;
  height: 38%;
  overflow: hidden;
  --mist-shift: 0%;
}
.scene-mist__band {
  position: absolute;
  left: -10%;
  width: 120%;
  border-radius: 50%;
  filter: blur(20px);
  mix-blend-mode: screen;
  transform: translateX(var(--mist-shift));
  will-change: transform, opacity;
}
.scene-mist__band--back {
  bottom: 18%;
  height: 60%;
  opacity: 0.1;
  background: radial-gradient(
    60% 100% at 40% 100%,
    rgba(125, 150, 160, 0.6),
    transparent 75%
  );
  animation: hm-mist-back 74s ease-in-out infinite;
}
.scene-mist__band--front {
  bottom: -6%;
  height: 56%;
  opacity: 0.16;
  background: radial-gradient(
    70% 100% at 60% 100%,
    rgba(167, 230, 212, 0.35),
    rgba(125, 150, 160, 0.5) 45%,
    transparent 80%
  );
  animation: hm-mist-front 58s ease-in-out infinite;
}
@keyframes hm-mist-back {
  0%,
  100% { transform: translateX(calc(-3% + var(--mist-shift))); opacity: 0.08; }
  50%  { transform: translateX(calc(3% + var(--mist-shift))); opacity: 0.14; }
}
@keyframes hm-mist-front {
  0%,
  100% { transform: translateX(calc(2% + var(--mist-shift))); opacity: 0.12; }
  50%  { transform: translateX(calc(-2% + var(--mist-shift))); opacity: 0.2; }
}

/* ====================================================================== */
/* 9. CENTRE SCRIM                                                          */
/* A soft radial darkening over the middle band so the white masthead       */
/* title keeps contrast against the aurora, stars and moon glow above.      */
/* ====================================================================== */
.scene-title-scrim {
  background: radial-gradient(
    52% 42% at 50% 40%,
    rgba(14, 22, 27, 0.5),
    rgba(14, 22, 27, 0.26) 55%,
    transparent 80%
  );
}

/* ====================================================================== */
/* DEPTH HARMONY — gentle touches on the existing core elements.           */
/* Loaded after hearthmere.css, so these refine (never remove) what's      */
/* already there: a warmer, wider tower glow and a calmer dragon.          */
/* ====================================================================== */
.scene .tower-glow {
  filter: blur(2px);
  opacity: 0.95;
}
.scene .dragon {
  opacity: 0.85;
}

/* ====================================================================== */
/* REDUCED MOTION — calm, static-rich render.                              */
/* No animation, no parallax; layers hold a pleasant resting state. The JS  */
/* sets fixed opacities on stars / windows / fireflies and skips the rAF.   */
/* ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .scene-aurora__band,
  .scene-moon-halo,
  .scene-star,
  .scene-shoot,
  .scene-river__sheen,
  .scene-window,
  .scene-firefly,
  .scene-mist__band {
    animation: none !important;
  }
  /* fireflies have no twinkle to fall back on, so give them a steady glow
     (JS already sets per-element opacity) */
  .scene-firefly {
    opacity: 0.5;
  }
  /* hide the shooting streaks entirely when motion is reduced */
  .scene-shooting {
    display: none;
  }
}

/* Belt-and-braces: the JS also adds .is-static to motion containers when
   reduced motion is preferred. */
.scene-aurora.is-static .scene-aurora__band,
.scene-moon-halo.is-static,
.scene-river.is-static .scene-river__sheen,
.scene-mist.is-static .scene-mist__band {
  animation: none !important;
}
.scene-aurora.is-static .scene-aurora__band {
  transform: none;
}

/* ====================================================================== */
/* PAINTED BACKDROP                                                        */
/* A hand-feel painted night landscape (tower, river, village, moon) now   */
/* forms the world beyond the glass. The flat CSS sky, vector hills, CSS   */
/* moon and the JS river/village layers it superseded are retired; the     */
/* living layers (stars, aurora drift, fireflies, mist, dragon, halo       */
/* pulse — which aligns with the painted moon) animate on top of it.       */
/* ====================================================================== */
.sky {
  background:
    /* gentle tie-in: keep the top of frame deep and the centre calm */
    linear-gradient(180deg, rgba(12, 20, 24, 0.35) 0%, rgba(12, 20, 24, 0) 30%),
    url("../img/backdrop.2f9d6360f1c6.jpg") center 35% / cover no-repeat,
    linear-gradient(180deg, #0c1418 0%, #102029 38%, #1a313a 68%, #244049 100%);
}
.hills,
.moon,
.tower-glow,
.scene-river,
.scene-village {
  display: none;
}
/* the painting's centre is brighter than the old flat sky — deepen the
   pocket behind the masthead so the title always reads */
.scene-title-scrim {
  background:
    radial-gradient(46% 34% at 50% 42%, rgba(10, 16, 20, 0.42), transparent 75%);
}
/* the painting carries its own aurora; soften the animated one over it */
.scene-aurora__band { opacity: 0.5; }
.scene-aurora__band--teal   { opacity: calc(0.13 * var(--aurora-glow) + 0.04); }
.scene-aurora__band--violet { opacity: calc(0.10 * var(--aurora-glow) + 0.03); }