/* Faewood forest backdrop styles.
 * Palettes are driven by <html data-time> and <html data-weather>; layout of the scene by <html data-place>.
 * forest.js sets those three attributes. Everything below only reads them.
 */

/* ---------- typed palette variables (so colors crossfade when the time of day changes) ---------- */
@property --sky-top      { syntax: "<color>"; inherits: true; initial-value: #2E2C5E; }
@property --sky-mid      { syntax: "<color>"; inherits: true; initial-value: #B35C6A; }
@property --sky-bottom   { syntax: "<color>"; inherits: true; initial-value: #F4A95C; }
@property --hills        { syntax: "<color>"; inherits: true; initial-value: #6F5C7C; }
@property --far          { syntax: "<color>"; inherits: true; initial-value: #7E6A8C; }
@property --far2         { syntax: "<color>"; inherits: true; initial-value: #5C5170; }
@property --mid          { syntax: "<color>"; inherits: true; initial-value: #3F5A55; }
@property --mid-hi       { syntax: "<color>"; inherits: true; initial-value: #5E7B63; }
@property --near         { syntax: "<color>"; inherits: true; initial-value: #1E322C; }
@property --trunk        { syntax: "<color>"; inherits: true; initial-value: #14110F; }
@property --under        { syntax: "<color>"; inherits: true; initial-value: #17261F; }
@property --celestial    { syntax: "<color>"; inherits: true; initial-value: #FFD28A; }
@property --glow         { syntax: "<color>"; inherits: true; initial-value: rgba(255,190,110,.65); }
@property --ray          { syntax: "<color>"; inherits: true; initial-value: rgba(255,176,104,.55); }
@property --mist         { syntax: "<color>"; inherits: true; initial-value: rgba(255,190,160,.34); }
@property --mote         { syntax: "<color>"; inherits: true; initial-value: #FFD27A; }
@property --leaf         { syntax: "<color>"; inherits: true; initial-value: #D88B3A; }
@property --water        { syntax: "<color>"; inherits: true; initial-value: #4C4A74; }
@property --water-hi     { syntax: "<color>"; inherits: true; initial-value: #E49A6E; }
@property --stone        { syntax: "<color>"; inherits: true; initial-value: #7C7380; }
@property --magic        { syntax: "<color>"; inherits: true; initial-value: #B9A3FF; }
@property --cave-glow    { syntax: "<color>"; inherits: true; initial-value: #C26A4A; }
@property --vignette     { syntax: "<color>"; inherits: true; initial-value: rgba(24,12,20,.45); }
@property --mote-op      { syntax: "<number>"; inherits: true; initial-value: .85; }
@property --leaf-op      { syntax: "<number>"; inherits: true; initial-value: .9; }
@property --star-op      { syntax: "<number>"; inherits: true; initial-value: .12; }
@property --ray-op       { syntax: "<number>"; inherits: true; initial-value: .8; }
@property --magic-op     { syntax: "<number>"; inherits: true; initial-value: .8; }
@property --canopy-op    { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --mid-op       { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --trunks-op    { syntax: "<number>"; inherits: true; initial-value: 1; }

/* ---------- time of day: dusk is the base palette ---------- */
:root {
  --sky-top: #2E2C5E; --sky-mid: #B35C6A; --sky-bottom: #F4A95C;
  --hills: #6F5C7C; --far: #7E6A8C; --far2: #5C5170;
  --mid: #3F5A55; --mid-hi: #5E7B63; --near: #1E322C; --trunk: #14110F; --under: #17261F;
  --celestial: #FFD28A; --glow: rgba(255,190,110,.65); --ray: rgba(255,176,104,.55);
  --mist: rgba(255,190,160,.34); --mote: #FFD27A; --leaf: #D88B3A;
  --water: #4C4A74; --water-hi: #E49A6E; --stone: #7C7380; --magic: #B9A3FF; --cave-glow: #C26A4A;
  --vignette: rgba(24,12,20,.45);
  --mote-op: .85; --leaf-op: .9; --star-op: .12; --ray-op: .8; --magic-op: .8;
  --cel-x: 1280px; --cel-y: 470px; --ray-rot: 78deg;
  --canopy-op: 1; --mid-op: 1; --trunks-op: 1;

  --flower-a: #F4EEDC; --flower-b: #F2A7C3; --flower-c: #F6D56B; --flower-d: #B7A6F2;

  transition:
    --sky-top 5s ease, --sky-mid 5s ease, --sky-bottom 5s ease, --hills 5s ease, --far 5s ease, --far2 5s ease,
    --mid 5s ease, --mid-hi 5s ease, --near 5s ease, --trunk 5s ease, --under 5s ease,
    --celestial 5s ease, --glow 5s ease, --ray 5s ease, --mist 5s ease, --mote 5s ease, --leaf 5s ease,
    --water 5s ease, --water-hi 5s ease, --stone 5s ease, --magic 5s ease, --cave-glow 5s ease, --vignette 5s ease,
    --mote-op 4s ease, --leaf-op 4s ease, --star-op 4s ease, --ray-op 4s ease, --magic-op 4s ease,
    --canopy-op 2s ease, --mid-op 2s ease, --trunks-op 2s ease;
}

html:root[data-time="dawn"] {
  --sky-top: #5D74B2; --sky-mid: #E6A6A4; --sky-bottom: #F9D9A2;
  --hills: #9A93B0; --far: #A99BB8; --far2: #7D7A9C;
  --mid: #52776B; --mid-hi: #7FA07B; --near: #28463C; --trunk: #1E1A17; --under: #1D3329;
  --celestial: #FFE3B8; --glow: rgba(255,214,170,.62); --ray: rgba(255,210,168,.55);
  --mist: rgba(255,228,220,.48); --mote: #FFE6B0; --leaf: #C9A252;
  --water: #8A92C0; --water-hi: #F4C9B0; --stone: #8A8590; --magic: #D8B5FF; --cave-glow: #E0A98A;
  --vignette: rgba(40,28,40,.35);
  --mote-op: .7; --leaf-op: .8; --star-op: .15; --ray-op: 1; --magic-op: .5;
  --cel-x: 340px; --cel-y: 480px; --ray-rot: -78deg;
}
html:root[data-time="day"] {
  --sky-top: #7EC4D8; --sky-mid: #BFE4D2; --sky-bottom: #F3E7B4;
  --hills: #8FB496; --far: #A5C3A8; --far2: #7FA788;
  --mid: #4F8A5E; --mid-hi: #78B07A; --near: #28513A; --trunk: #2A2016; --under: #22402A;
  --celestial: #FFF6C8; --glow: rgba(255,244,190,.65); --ray: rgba(255,248,205,.55);
  --mist: rgba(255,255,255,.4); --mote: #FFF0A8; --leaf: #8FBF5A;
  --water: #5FA7BC; --water-hi: #BDE6E6; --stone: #9A9689; --magic: #CFA8FF; --cave-glow: #D9C48A;
  --vignette: rgba(26,34,18,.28);
  --mote-op: .55; --leaf-op: .85; --star-op: 0; --ray-op: 1; --magic-op: .35;
  --cel-x: 1150px; --cel-y: 215px; --ray-rot: 8deg;
}
html:root[data-time="night"] {
  --sky-top: #070F1E; --sky-mid: #0F1D33; --sky-bottom: #1D2E42;
  --hills: #0E1925; --far: #14222E; --far2: #0F1B25;
  --mid: #0F2018; --mid-hi: #1B3427; --near: #08130D; --trunk: #04060A; --under: #060D08;
  --celestial: #E7EDF6; --glow: rgba(200,220,255,.45); --ray: rgba(170,200,255,.2);
  --mist: rgba(170,195,255,.14); --mote: #E9C468; --leaf: #3B4A5A;
  --water: #0D1B2C; --water-hi: #3A5776; --stone: #3A424C; --magic: #7CF0C8; --cave-glow: #3A6A9A;
  --vignette: rgba(2,4,8,.6);
  --mote-op: 1; --leaf-op: .25; --star-op: 1; --ray-op: .45; --magic-op: 1;
  --cel-x: 430px; --cel-y: 205px; --ray-rot: -10deg;
}

/* ---------- place: how much of the woodland frames the shot ---------- */
html:root[data-place="clearing"]  { --canopy-op: 0;   --mid-op: .9;  --trunks-op: 0; }
html:root[data-place="riverside"] { --canopy-op: .75; --mid-op: 1;   --trunks-op: 1; }
html:root[data-place="ruins"]     { --canopy-op: .75; --mid-op: 1;   --trunks-op: 1; }
html:root[data-place="cave"]      { --canopy-op: .3;  --mid-op: 1;   --trunks-op: 0; }
html:root[data-place="grove"]     { --canopy-op: .9;  --mid-op: 1;   --trunks-op: 1; }

/* ---------- container ---------- */
.forest-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--sky-bottom); }
.forest-bg > svg { display: block; width: 100%; height: 100%; }
.fx, .fx > div, .forest-vignette { position: absolute; inset: 0; pointer-events: none; }
.forest-vignette { background: radial-gradient(ellipse at 50% 44%, transparent 38%, var(--vignette) 100%); }

/* ---------- gradient stops ---------- */
.stop-sky-top { stop-color: var(--sky-top); }
.stop-sky-mid { stop-color: var(--sky-mid); }
.stop-sky-bottom { stop-color: var(--sky-bottom); }
.stop-glow { stop-color: var(--glow); }
.stop-glow-0 { stop-color: var(--glow); stop-opacity: 0; }
.stop-ray { stop-color: var(--ray); }
.stop-ray-0 { stop-color: var(--ray); stop-opacity: 0; }
.stop-water-hi { stop-color: var(--water-hi); }
.stop-water { stop-color: var(--water); }
.stop-cave-glow { stop-color: var(--cave-glow); stop-opacity: .6; }
.stop-cave-dark { stop-color: color-mix(in srgb, var(--trunk) 85%, black); }
.stop-magic { stop-color: var(--magic); stop-opacity: .6; }
.stop-magic-0 { stop-color: var(--magic); stop-opacity: 0; }

/* ---------- sky bodies ---------- */
.star { fill: #fff; opacity: var(--star-op); }
.celestial { transform: translate(var(--cel-x), var(--cel-y)); transition: transform 6s ease-in-out; }
.rays { transform: rotate(var(--ray-rot)); transition: transform 6s ease-in-out; opacity: var(--ray-op); }
.ray { fill: url(#fbRay); }
.celestial-disc { fill: var(--celestial); }
.crater { fill: transparent; }
html[data-time="night"] .crater { fill: rgba(140,155,185,.38); }

/* ---------- color classes (derived from the palette) ---------- */
.c-hills       { fill: var(--hills); }
.c-far         { fill: var(--far); }
.c-far2        { fill: var(--far2); }
.c-mid         { fill: var(--mid); }
.c-mid-hi      { fill: var(--mid-hi); opacity: .55; }
.c-trunk-mid   { fill: color-mix(in srgb, var(--trunk) 55%, var(--mid)); }
.c-mid2        { --c: color-mix(in srgb, var(--mid) 68%, var(--near)); fill: var(--c); }
.c-trunk-mid2  { fill: color-mix(in srgb, var(--trunk) 72%, var(--mid)); }
.c-near        { --c: var(--near); fill: var(--c); }
.c-near2       { fill: color-mix(in srgb, var(--near) 72%, var(--mid)); }
.c-trunk       { fill: var(--trunk); }
.c-under       { fill: var(--under); }
.c-under2      { fill: color-mix(in srgb, var(--under) 65%, var(--near)); }
.c-stone       { fill: var(--stone); }
.c-moss        { fill: color-mix(in srgb, var(--mid) 70%, var(--stone)); }
.c-ruin-ground { fill: color-mix(in srgb, var(--under) 60%, var(--mid)); }
.c-rock        { fill: color-mix(in srgb, var(--trunk) 62%, var(--stone)); }
.c-rock2       { fill: color-mix(in srgb, var(--trunk) 78%, var(--stone)); }
.c-meadow      { fill: color-mix(in srgb, var(--mid) 55%, var(--mid-hi)); }
.c-meadow2     { fill: color-mix(in srgb, var(--mid) 45%, var(--under)); }
.c-meadow-blade{ fill: color-mix(in srgb, var(--mid-hi) 65%, var(--mid)); }
.c-bank        { fill: color-mix(in srgb, var(--under) 55%, var(--mid)); }
.c-grove-ground{ fill: color-mix(in srgb, var(--under) 62%, var(--mid)); }
.mist-blob     { fill: var(--mist); }
.flower-a { fill: var(--flower-a); } .flower-b { fill: var(--flower-b); }
.flower-c { fill: var(--flower-c); } .flower-d { fill: var(--flower-d); }

/* strokes */
.stroke-bark      { fill: none; stroke: color-mix(in srgb, var(--trunk) 40%, var(--mid-hi)); stroke-width: 2; opacity: .35; }
.stroke-bark-near { fill: none; stroke: color-mix(in srgb, var(--trunk) 60%, var(--mid)); stroke-width: 3.5; opacity: .5; stroke-linecap: round; }
.stroke-crack     { fill: none; stroke: color-mix(in srgb, var(--stone) 45%, black); stroke-width: 1.6; opacity: .6; }
.ivy, .vine       { fill: none; stroke: color-mix(in srgb, var(--near) 60%, var(--mid)); stroke-width: 3; stroke-linecap: round; opacity: .9; }
.reed             { fill: none; stroke: color-mix(in srgb, var(--mid) 55%, var(--near)); stroke-width: 3.2; stroke-linecap: round; }
.reed-head        { fill: color-mix(in srgb, var(--trunk) 40%, var(--mid)); }
.ripple           { fill: none; stroke: var(--water-hi); stroke-width: 2; stroke-linecap: round; opacity: .55; }
.cave-rim         { fill: none; stroke: var(--cave-glow); stroke-width: 6; opacity: .25; stroke-linecap: round; }
.rune             { fill: none; stroke: var(--magic); stroke-width: 3; stroke-linecap: round; opacity: var(--magic-op); }
.water            { fill: url(#fbWater); }
.fern-stem        { fill: none; stroke: var(--c, var(--near)); stroke-width: 3; stroke-linecap: round; }
.fern-leaf        { fill: none; stroke: var(--c, var(--near)); stroke-dasharray: 2.2 5.4; stroke-linecap: butt; opacity: .95; }

/* ---------- places ---------- */
.place { opacity: 0; transition: opacity 2s ease; }
html[data-place="deep_woods"] .place-deep_woods,
html[data-place="clearing"]   .place-clearing,
html[data-place="riverside"]  .place-riverside,
html[data-place="ruins"]      .place-ruins,
html[data-place="cave"]       .place-cave,
html[data-place="grove"]      .place-grove { opacity: 1; }

.layer-mid { opacity: var(--mid-op); }
.near-trunks { opacity: var(--trunks-op); }
.canopy-top { opacity: var(--canopy-op); }

.magic-aura, .mush-halo { opacity: var(--magic-op); }
.mush-cap { fill: color-mix(in srgb, var(--magic) 75%, white); opacity: calc(.45 + var(--magic-op) * .55); }
.mush-stem { fill: color-mix(in srgb, var(--magic) 30%, var(--stone)); }

/* ---------- motes and leaves ---------- */
.motes  { opacity: var(--mote-op); transition: opacity 2s ease; }
.mote   { fill: var(--mote); }
.leaves { opacity: var(--leaf-op); transition: opacity 2s ease; }
.leaf   { fill: var(--leaf); transform: translate(var(--lf-x, 200px), -60px); }

/* ---------- weather overlays ---------- */
.fx-dim   { background: #0b1623; opacity: 0; transition: opacity 2.5s ease; }
.fx-fog   { background: linear-gradient(to top, color-mix(in srgb, var(--sky-bottom) 70%, white) 0%, color-mix(in srgb, var(--sky-bottom) 40%, transparent) 38%, transparent 82%); opacity: 0; transition: opacity 2.5s ease; }
.fx-cave  { background: radial-gradient(ellipse at 50% 58%, transparent 22%, rgba(2,4,8,.7) 100%); opacity: 0; transition: opacity 2s ease; }
.fx-rain, .fx-snow { opacity: 0; transition: opacity 1.8s ease; overflow: hidden; }
.fx-flash { background: #dfe9ff; opacity: 0; }

html[data-place="cave"] .fx-cave { opacity: 1; }
html[data-time="dawn"] .fx-fog { opacity: .2; }

html[data-weather="mist"]  .fx-fog { opacity: .85; }
html[data-weather="mist"]  .fx-dim { opacity: .06; }
html[data-weather="rain"]  .fx-dim { opacity: .3; }
html[data-weather="rain"]  .fx-fog { opacity: .3; }
html[data-weather="storm"] .fx-dim { opacity: .55; }
html[data-weather="storm"] .fx-fog { opacity: .25; }
html[data-weather="snow"]  .fx-dim { opacity: .1; }
html[data-weather="snow"]  .fx-fog { opacity: .6; }

html[data-weather="rain"] .rays   { opacity: .3; }
html[data-weather="storm"] .rays  { opacity: .05; }
html[data-weather="snow"] .rays   { opacity: .4; }
html[data-weather="mist"] .rays   { opacity: .9; }
html[data-weather="rain"] .celestial  { opacity: .3; }
html[data-weather="storm"] .celestial { opacity: 0; }
html[data-weather="snow"] .celestial  { opacity: .55; }
html[data-weather="mist"] .celestial  { opacity: .7; }
html[data-weather="storm"] .stars, html[data-weather="rain"] .stars { opacity: .2; }
html[data-weather="rain"] .motes, html[data-weather="storm"] .motes { opacity: .12; }
html[data-weather="snow"] .motes { opacity: .3; }
html[data-weather="rain"] .leaves, html[data-weather="snow"] .leaves { opacity: 0; }
.celestial, .stars { transition: transform 6s ease-in-out, opacity 2.5s ease; }

html[data-weather="rain"]  .fx-rain,
html[data-weather="storm"] .fx-rain { opacity: 1; }
html[data-weather="snow"]  .fx-snow { opacity: 1; }

.fx-rain i {
  position: absolute; top: -120px; left: var(--rx); width: 1.5px; height: var(--rh);
  background: linear-gradient(to bottom, transparent, rgba(215,230,250,.85));
  opacity: var(--ro); transform: translate3d(0,-10vh,0) rotate(11deg);
}
.fx-snow b {
  position: absolute; top: -20px; left: var(--sx); width: var(--ss); height: var(--ss);
  border-radius: 50%; background: #fff; opacity: var(--so); filter: blur(.4px);
  transform: translate3d(0,-5vh,0);
}

/* ---------- motion (skipped entirely for people who prefer reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .px-far   { transform: translate(calc(var(--px, 0) * -8px),  calc(var(--py, 0) * -3px)); }
  .px-mid   { transform: translate(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -6px)); }
  .px-place { transform: translate(calc(var(--px, 0) * -28px), calc(var(--py, 0) * -9px)); }
  .px-near  { transform: translate(calc(var(--px, 0) * -48px), calc(var(--py, 0) * -14px)); }

  .sway { transform-box: fill-box; transform-origin: 50% 100%; animation: sway var(--sway-t, 9s) ease-in-out infinite; animation-delay: var(--sway-d, 0s); }
  @keyframes sway { 0%, 100% { transform: rotate(-.9deg); } 50% { transform: rotate(.9deg); } }

  .fb-mist.m1 > g { animation: drift 62s ease-in-out infinite alternate; }
  .fb-mist.m2 > g { animation: drift 48s ease-in-out -20s infinite alternate-reverse; }
  .cave-breath { animation: breathe 9s ease-in-out infinite; }
  @keyframes drift { from { transform: translateX(-70px); } to { transform: translateX(70px); } }
  @keyframes breathe { 0%, 100% { opacity: .4; transform: translateY(0); } 50% { opacity: .9; transform: translateY(-14px); } }

  .ray { animation: rayPulse var(--ray-t, 8s) ease-in-out infinite; animation-delay: var(--ray-d, 0s); }
  @keyframes rayPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
  .celestial-glow { animation: glowPulse 7s ease-in-out infinite; }
  @keyframes glowPulse { 0%, 100% { opacity: .65; } 50% { opacity: .95; } }
  .star { animation: twinkle var(--tw-t, 4s) ease-in-out infinite; animation-delay: var(--tw-d, 0s); }
  @keyframes twinkle { 0%, 100% { opacity: calc(var(--star-op) * .45); } 50% { opacity: var(--star-op); } }

  .mote { animation: mote var(--mo-t, 4s) ease-in-out infinite; animation-delay: var(--mo-d, 0s); }
  @keyframes mote {
    0%, 100% { opacity: .2; transform: translate(0, 0); }
    40% { opacity: 1; transform: translate(var(--mo-x), var(--mo-y)); }
    70% { opacity: .45; transform: translate(calc(var(--mo-x) * -.5), calc(var(--mo-y) * .4)); }
  }
  .leaf { animation: leafFall var(--lf-t, 18s) linear infinite; animation-delay: var(--lf-d, 0s); }
  @keyframes leafFall {
    0%   { transform: translate(var(--lf-x), -60px) rotate(0deg) scale(var(--lf-s, 1)); }
    50%  { transform: translate(calc(var(--lf-x) + var(--lf-dx) * .35), 450px) rotate(calc(var(--lf-r) * .5)) scale(var(--lf-s, 1)); }
    100% { transform: translate(calc(var(--lf-x) + var(--lf-dx)), 980px) rotate(var(--lf-r)) scale(var(--lf-s, 1)); }
  }
  html[data-weather="storm"] .leaf { animation-duration: calc(var(--lf-t) * .35); }

  .ripple { animation: ripple var(--rp-t, 6s) ease-in-out infinite; animation-delay: var(--rp-d, 0s); }
  @keyframes ripple { 0%, 100% { opacity: .15; transform: translateX(-10px); } 50% { opacity: .7; transform: translateX(14px); } }

  .rune { animation: runePulse 5s ease-in-out infinite; }
  @keyframes runePulse { 0%, 100% { stroke-opacity: .45; } 50% { stroke-opacity: 1; } }
  .mush-halo { animation: halo 5.5s ease-in-out infinite; animation-delay: var(--mu-d, 0s); }
  @keyframes halo { 0%, 100% { opacity: calc(var(--magic-op) * .5); } 50% { opacity: var(--magic-op); } }

  .fx-rain i { animation: rainFall var(--rt) linear infinite; animation-delay: var(--rd); animation-play-state: paused; }
  @keyframes rainFall {
    from { transform: translate3d(0, -10vh, 0) rotate(11deg); }
    to   { transform: translate3d(-24vh, 118vh, 0) rotate(11deg); }
  }
  html[data-weather="rain"]  .fx-rain i { animation-play-state: running; }
  html[data-weather="storm"] .fx-rain i { animation-play-state: running; animation-duration: calc(var(--rt) * .62); opacity: calc(var(--ro) + .2); }

  .fx-snow b { animation: snowFall var(--st) linear infinite; animation-delay: var(--sd); animation-play-state: paused; }
  @keyframes snowFall {
    0%   { transform: translate3d(0, -5vh, 0); }
    50%  { transform: translate3d(var(--sw), 52vh, 0); }
    100% { transform: translate3d(calc(var(--sw) * -.4), 108vh, 0); }
  }
  html[data-weather="snow"] .fx-snow b { animation-play-state: running; }

  html[data-weather="storm"] .fx-flash { animation: lightning 11s linear infinite; }
  @keyframes lightning {
    0%, 91%, 94.5%, 100% { opacity: 0; }
    92% { opacity: .55; }
    93% { opacity: .06; }
    93.8% { opacity: .75; }
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
  .celestial, .rays, .place, .motes, .leaves, .fx-dim, .fx-fog, .fx-cave, .fx-rain, .fx-snow { transition: none; }
  .fx-rain, .fx-snow, .leaves { display: none; }
}