/* Kakure: the living night behind the UI (see web/js/atmosphere.js).
 *
 * Every colour of the scene is a registered custom property on #atmosphere,
 * so changing data-season / data-mood crossfades the whole print smoothly.
 * Only transform and opacity are animated, so the compositor does the work.
 */

@property --atmo-top     { syntax: '<color>'; inherits: true; initial-value: #04070d; }
@property --atmo-zenith  { syntax: '<color>'; inherits: true; initial-value: #0d1730; }
@property --atmo-mid     { syntax: '<color>'; inherits: true; initial-value: #1b2a4a; }
@property --atmo-horizon { syntax: '<color>'; inherits: true; initial-value: #34466c; }
@property --atmo-glow    { syntax: '<color>'; inherits: true; initial-value: rgba(90, 120, 170, .35); }
@property --atmo-halo    { syntax: '<color>'; inherits: true; initial-value: #f0d896; }
@property --atmo-cloud   { syntax: '<color>'; inherits: true; initial-value: #22355a; }
@property --atmo-r1      { syntax: '<color>'; inherits: true; initial-value: #34466e; }
@property --atmo-r2      { syntax: '<color>'; inherits: true; initial-value: #1d2b4a; }
@property --atmo-r3      { syntax: '<color>'; inherits: true; initial-value: #0a1120; }
@property --atmo-water   { syntax: '<color>'; inherits: true; initial-value: #13203b; }
@property --atmo-mist    { syntax: '<color>'; inherits: true; initial-value: #6a7ca6; }
@property --atmo-mist-o  { syntax: '<number>'; inherits: true; initial-value: .55; }
@property --atmo-snow    { syntax: '<number>'; inherits: true; initial-value: .25; }
@property --atmo-geese   { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --atmo-stars   { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --atmo-moon    { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --atmo-plume   { syntax: '<number>'; inherits: true; initial-value: .22; }

#atmosphere {
  /* summer night (lobby / title): deep indigo, cool blue horizon */
  --atmo-top: #03060c;
  --atmo-zenith: #0b1530;
  --atmo-mid: #1b2a4a;
  --atmo-horizon: #3a4f7a;
  --atmo-glow: rgba(110, 140, 196, .38);
  --atmo-halo: #f0d896;
  --atmo-cloud: #22365c;
  --atmo-r1: #364a74;
  --atmo-r2: #1c2b4b;
  --atmo-r3: #070d1a;
  --atmo-water: #11203d;
  --atmo-mist: #7184ae;
  --atmo-mist-o: .55;
  --atmo-snow: .14;
  --atmo-geese: 0;
  --atmo-stars: 1;
  --atmo-moon: 1;
  --atmo-plume: .16;
  --atmo-intensity: 1;
  --atmo-torii: #9a2f1f;

  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
  background: var(--night, #080d18);
  transition:
    --atmo-top 3s ease, --atmo-zenith 3s ease, --atmo-mid 3s ease, --atmo-horizon 3s ease,
    --atmo-glow 3s ease, --atmo-halo 3s ease, --atmo-cloud 3s ease, --atmo-r1 3s ease,
    --atmo-r2 3s ease, --atmo-r3 3s ease, --atmo-water 3s ease, --atmo-mist 3s ease,
    --atmo-mist-o 2.5s ease, --atmo-snow 4s ease, --atmo-geese 4s ease, --atmo-stars 4s ease,
    --atmo-moon 4s ease, --atmo-plume 3s ease;
}

/* Act I: spring dusk, violet sky, pink horizon. */
#atmosphere[data-season="spring"] {
  --atmo-top: #070616;
  --atmo-zenith: #18173a;
  --atmo-mid: #2e2b5a;
  --atmo-horizon: #6c5487;
  --atmo-glow: rgba(226, 150, 170, .42);
  --atmo-halo: #f6d9c8;
  --atmo-cloud: #3a3466;
  --atmo-r1: #4d4776;
  --atmo-r2: #2b2950;
  --atmo-r3: #0d0b1e;
  --atmo-water: #1c1a3a;
  --atmo-mist: #b097bf;
  --atmo-snow: .45;
}

/* Act II: autumn, amber edge to the night, red-brown hills, geese at the moon. */
#atmosphere[data-season="autumn"] {
  --atmo-top: #05060d;
  --atmo-zenith: #111a31;
  --atmo-mid: #26304e;
  --atmo-horizon: #6a5248;
  --atmo-glow: rgba(214, 132, 62, .42);
  --atmo-halo: #f3cf8a;
  --atmo-cloud: #2e3554;
  --atmo-r1: #4e4256;
  --atmo-r2: #3b2632;
  --atmo-r3: #120a10;
  --atmo-water: #1b1a2c;
  --atmo-mist: #a8877c;
  --atmo-geese: .85;
  --atmo-snow: .1;
}

/* Act III: winter, cold blue-grey, snow on the cone. */
#atmosphere[data-season="winter"] {
  --atmo-top: #060a12;
  --atmo-zenith: #121c2c;
  --atmo-mid: #26344c;
  --atmo-horizon: #56677f;
  --atmo-glow: rgba(176, 196, 220, .3);
  --atmo-halo: #e6eef6;
  --atmo-cloud: #34435c;
  --atmo-r1: #7586a0;
  --atmo-r2: #3a4862;
  --atmo-r3: #121a28;
  --atmo-water: #1e2a3e;
  --atmo-mist: #bcc8d8;
  --atmo-snow: .95;
}

/* Inspection threatens: a red horizon and thick mist. */
#atmosphere[data-mood="tension"] {
  --atmo-horizon: #5e2c2e;
  --atmo-glow: rgba(200, 67, 43, .55);
  --atmo-mist: #8a6466;
  --atmo-mist-o: .95;
  --atmo-halo: #e8a27a;
  --atmo-plume: .4;
}

/* Victory: first light over the bay. */
#atmosphere[data-mood="dawn"] {
  --atmo-zenith: #1a2448;
  --atmo-mid: #3f4a78;
  --atmo-horizon: #c58a5a;
  --atmo-glow: rgba(240, 184, 96, .7);
  --atmo-halo: #fff1c8;
  --atmo-mist: #e0b48c;
  --atmo-mist-o: .7;
  --atmo-stars: .2;
  --atmo-moon: .82;
  --atmo-water: #2c3156;
}

/* ------------------------------------------------------------- layers */
.atmo-scene {
  position: absolute;
  inset: 0;
  opacity: var(--atmo-intensity);
  transition: opacity 1.2s ease;
}

.atmo-sky {
  position: absolute;
  inset: 0;
  /* ichimonji bokashi: the dark band printed across the top of the sky */
  background: linear-gradient(to bottom,
    var(--atmo-top) 0%, var(--atmo-zenith) 16%, var(--atmo-mid) 50%,
    var(--atmo-horizon) 74%, var(--atmo-horizon) 100%);
}

.atmo-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 42% at 50% 76%, var(--atmo-glow), transparent 70%);
}

.atmo-layer {
  position: absolute;
  inset: -24px;            /* matches PAD in atmosphere.js */
  will-change: transform;
}

.atmo-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.atmo-stars { fill: #f4ead0; opacity: var(--atmo-stars); }
.atmo-moon { opacity: var(--atmo-moon); }
.atmo-moon-ring { fill: none; stroke: var(--kin, #d6a84c); stroke-opacity: .28; stroke-width: 1.2; }
.atmo-moon-ring--far { stroke-opacity: .12; stroke-dasharray: 2 7; }
.atmo-geese { fill: none; stroke: #0b0f1a; stroke-width: 1.6; stroke-linecap: round; opacity: var(--atmo-geese); }

.atmo-cloud {
  position: absolute;
  will-change: transform;
  animation: atmo-drift linear infinite;
}
.atmo-cloud .atmo-svg { overflow: visible; }
.atmo-kumo {
  fill: var(--atmo-cloud);
  fill-opacity: .94;
  stroke: var(--kin, #d6a84c);
  stroke-opacity: .6;
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.atmo-kumo-line { fill: none; stroke: var(--kin-pale, #f0d896); stroke-opacity: .28; stroke-width: 1; stroke-linecap: round; }

@keyframes atmo-drift {
  from { transform: translate3d(var(--atmo-from), 0, 0); }
  to   { transform: translate3d(var(--atmo-to), 0, 0); }
}

.atmo-plume { fill: none; stroke: var(--atmo-mist); stroke-width: 3; stroke-linecap: round; opacity: var(--atmo-plume); }
.atmo-snowcap { fill: #eef2f6; opacity: var(--atmo-snow); }
.atmo-grove { fill: var(--atmo-r2); filter: brightness(.82); }
.atmo-pagoda { fill: var(--atmo-r3); opacity: .85; }

.atmo-shore { stroke: var(--kin-pale, #f0d896); stroke-opacity: .18; stroke-width: 1; }
.atmo-waves { stroke: var(--atmo-mist); stroke-opacity: .22; stroke-width: 1.2; stroke-linecap: round; }
.atmo-glint { fill: var(--kin-pale, #f0d896); }
.atmo-glints { opacity: calc(var(--atmo-moon) * .9); will-change: opacity; }
.atmo-glints--a { animation: atmo-shimmer 3.4s ease-in-out infinite alternate; }
.atmo-glints--b { animation: atmo-shimmer 4.1s ease-in-out -2s infinite alternate-reverse; }
@keyframes atmo-shimmer { from { opacity: .25; } to { opacity: .95; } }

.atmo-near { fill: var(--atmo-r3); }
.atmo-torii { fill: var(--atmo-torii); }
.atmo-window { fill: #ffd486; }
.atmo-lights { will-change: opacity; }
.atmo-lights--a { animation: atmo-flicker 5.3s ease-in-out infinite; }
.atmo-lights--b { animation: atmo-flicker 6.7s ease-in-out -3s infinite; }
@keyframes atmo-flicker {
  0%, 100% { opacity: 1; } 18% { opacity: .78; } 22% { opacity: .95; }
  57% { opacity: .84; } 61% { opacity: 1; } 80% { opacity: .9; }
}

.atmo-mist .atmo-svg { opacity: var(--atmo-mist-o); }
.atmo-layer--mist1 > .atmo-svg { animation: atmo-kasumi 70s ease-in-out infinite alternate; }
.atmo-layer--mist2 > .atmo-svg { animation: atmo-kasumi 54s ease-in-out -20s infinite alternate-reverse; }
.atmo-layer--mist3 > .atmo-svg { animation: atmo-kasumi 46s ease-in-out -9s infinite alternate; }
@keyframes atmo-kasumi {
  from { transform: translate3d(-4%, 0, 0); }
  to   { transform: translate3d(4%, 0, 0); }
}

.atmo-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Woodblock paper: a grain over everything, and a soft print-edge vignette. */
.atmo-grain {
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain, none);
  background-size: 220px 220px;
  /* Plain alpha, not a blend mode: a full-screen blend over the animated
     canvas would be re-composited every frame and halve the frame rate. */
  opacity: .7;
}
.atmo-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 95% at 50% 45%, transparent 55%, rgba(3, 5, 10, .55) 100%);
}

/* ------------------------------------------------------- still scene */
#atmosphere.atmo-still *,
#atmosphere.atmo-still *::before,
#atmosphere.atmo-still *::after { animation: none !important; }
#atmosphere.atmo-still .atmo-cloud { transform: none; }
#atmosphere.atmo-still .atmo-particles { display: none; }

@media (prefers-reduced-motion: reduce) {
  #atmosphere *, #atmosphere *::before, #atmosphere *::after { animation: none !important; }
  #atmosphere .atmo-particles { display: none; }
  #atmosphere .atmo-layer { transform: none !important; }
}

/* ------------------------------------------------- plain night (Taylor) */
/* Only a deep indigo sky with stars sits behind the UI; the Edo paintings
 * carry the scenery. The drawn hills, trees, pagoda, torii, moon, clouds and
 * mist are switched off (display:none, so they cost no paint or memory). */
#atmosphere .atmo-layer--clouds,
#atmosphere .atmo-layer--far,
#atmosphere .atmo-layer--mid,
#atmosphere .atmo-layer--near,
#atmosphere .atmo-mist,
#atmosphere .atmo-glow,
#atmosphere .atmo-moon,
#atmosphere .atmo-geese { display: none; }
#atmosphere .atmo-sky { background: radial-gradient(140% 90% at 50% 0%, #14203a, #0a0f1c 75%); }
/* Stars stay bright in every mood; the fireflies drift over them. */
#atmosphere .atmo-stars { opacity: .95; }

/* Away from the board, the Codex painting IS the background: fixed to the
   screen, so pages scroll over it and no swipe ever uncovers bare blue. The
   fireflies drift above it; the board keeps the starry sky. */
#atmosphere .atmo-painting {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 13, 24, var(--paint-shade-top, .15)), rgba(8, 13, 24, var(--paint-shade-bottom, .55))),
    url('/img/kakure/art/home-hero.webp?v=20261011edo') center top / cover no-repeat,
    #0a0f1c;
  transition: opacity .8s ease;
}
body:has(#view-game:not([hidden])) #atmosphere .atmo-painting { opacity: 0; }
@media (max-width: 720px) {
  #atmosphere .atmo-painting { --paint-shade-top: .4; --paint-shade-bottom: .7; background-position: 0 0, 62% top, 0 0; }
}

/* Resting under a game table, which hides it entirely. */
#atmosphere.atmo-paused { visibility: hidden; }
#atmosphere.atmo-paused * { animation-play-state: paused !important; }