/*
 * The dinos world's backdrop, ground and plants: a Cretaceous floodplain on a hazy morning.
 * Owner: dinos scenery (js/scenery-dinos.js). Loaded after css/style.css.
 * Every rule is scoped to body[data-theme=dinos].
 * Time of day: each drawn piece has flat dusk and night copies of its silhouette (.dk-dusk, .dk-night)
 * whose opacity fades in; the colors are the --dusk / --night variables on each piece.
 */

/* ---------- sky: celadon haze, warm at the horizon ---------- */
body[data-theme=dinos] .sky-day   { background: linear-gradient(#C2D4CF 0%, #D1DED8 24%, #E0E8DE 48%, #ECEDDF 62%, #F4E8D1 76%); }
body[data-theme=dinos] .sky-dusk  { background: linear-gradient(#ADA9B9 0%, #C8B5B7 26%, #DFC0AE 50%, #EBCBA5 64%, #F0D09E 76%); }
body[data-theme=dinos] .sky-night { background: linear-gradient(#131C2A 0%, #1B2638 40%, #243246 64%, #304058 78%); }

/* the sun: a pale disc in a wide soft halo; at dusk it warms and slowly sinks behind the trees */
body[data-theme=dinos] #sun {
  top: 15vh; right: 12vw; width: 11vh; height: 11vh;
  background: #F9F0DA; opacity: .92; box-shadow: none;
  transition: background 60s linear, opacity 8s ease, translate 110s cubic-bezier(.45, 0, .55, 1);
}
body[data-theme=dinos] #sun::before, body[data-theme=dinos] #sun::after {
  content: ''; position: absolute; inset: -140%; border-radius: 50%; pointer-events: none;
  transition: opacity 60s linear;
}
body[data-theme=dinos] #sun::before { background: radial-gradient(closest-side, rgba(251, 243, 222, .6), rgba(251, 243, 222, .2) 40%, rgba(251, 243, 222, 0)); }
body[data-theme=dinos] #sun::after { background: radial-gradient(closest-side, rgba(242, 192, 142, .6), rgba(242, 192, 142, .2) 40%, rgba(242, 192, 142, 0)); opacity: 0; }
body[data-theme=dinos]:not(.sky-clock).dusk #sun { background: #F0C595; translate: 0 33vh; }
body[data-theme=dinos]:not(.sky-clock).dusk #sun::before { opacity: 0; }
body[data-theme=dinos]:not(.sky-clock).dusk #sun::after { opacity: 1; }
body[data-theme=dinos].night #sun { opacity: 0; box-shadow: none; }
/* the moving sun (js/sky.js, css/sky.css): it crosses the hazy sky and sets behind the trees on the
   right; the warm halo takes over from the pale one as it gets low */
body[data-theme=dinos] { --horizon: 57vh; --arc-w: 40vw; --arc-h: 46vh; --haze-top: 44vh; --haze-mid: 56vh; --haze-bottom: 74vh; }
body[data-theme=dinos].sky-clock #sun { background: var(--sun-col, #F9F0DA); transition: opacity 8s ease; }
body[data-theme=dinos].sky-clock #sun::before { opacity: calc(1 - var(--warm, 0)); transition: none; }
body[data-theme=dinos].sky-clock #sun::after { opacity: var(--warm, 0); transition: none; }

/* our own moon (in #scenery-back, so it sits in front of the stars) */
body[data-theme=dinos] .dk-moon {
  position: absolute; top: 9vh; right: 17vw; width: 8vh; height: 8vh; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 40%, rgba(196, 192, 176, .45) 0 9%, transparent 16%),
    radial-gradient(circle at 60% 30%, rgba(196, 192, 176, .35) 0 7%, transparent 13%),
    radial-gradient(circle at 56% 62%, rgba(196, 192, 176, .3) 0 10%, transparent 17%),
    radial-gradient(circle at 40% 36%, #F5F2E8, #E5E1D2 70%, #D8D3C2);
  opacity: 0; transition: opacity 6s ease;
}
body[data-theme=dinos] .dk-moon::before {
  content: ''; position: absolute; inset: -130%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(226, 226, 212, .2), rgba(226, 226, 212, .06) 45%, rgba(226, 226, 212, 0));
}
body[data-theme=dinos].night .dk-moon { opacity: 1; transition: opacity 10s ease 3s; }

/* thin high clouds, drifting very slowly: each wisp is a stretched soft glow */
body[data-theme=dinos] .dk-clouds { position: absolute; inset: 0; pointer-events: none; }
body[data-theme=dinos] .dk-cloud {
  position: absolute; color: #FDFAF2;
  animation: dk-drift 180s ease-in-out infinite alternate;
  transition: color calc(var(--dusk-dur, 110s) * .82) linear, opacity 8s ease;
}
body[data-theme=dinos] .dk-wisp { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, currentColor 70%, transparent), color-mix(in srgb, currentColor 28%, transparent) 55%, transparent); }
body[data-theme=dinos] .dk-cloud-a { top: 13.5vh; left: 1vw; width: 36vw; height: 7vh; }
body[data-theme=dinos] .dk-cloud-b { top: 24.5vh; right: 1vw; width: 32vw; height: 6vh; opacity: .9; animation-delay: -70s; }
body[data-theme=dinos] .dk-cloud-c { top: 52.5vh; left: 1vw; width: 42vw; height: 5vh; opacity: .7; animation-delay: -120s; }
@keyframes dk-drift { from { translate: -1.5vw 0; } to { translate: 1.5vw 0; } }
body[data-theme=dinos].dusk .dk-cloud { color: #F8DAC2; }
body[data-theme=dinos].night .dk-cloud { opacity: .08; color: #A5B0C4; }

/* ---------- the drawn pieces ---------- */
body[data-theme=dinos] .dk { position: absolute; pointer-events: none; }
body[data-theme=dinos] .dk > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
body[data-theme=dinos] .dk-band { left: 0; right: 0; }
body[data-theme=dinos] .dk-spot { translate: -50% 0; }

body[data-theme=dinos] .dk-tint { opacity: 0; transition: opacity 8s ease; }
body[data-theme=dinos] .dk-tint .ts, body[data-theme=dinos] .dk-day [stroke-width] { stroke-linecap: round; }
/* the copies get a hairline stroke too, so no light edge of the day drawing peeks out around them */
body[data-theme=dinos] .dk-tint .tf, body[data-theme=dinos] .dk-tint .tfb { stroke-width: 1.6; stroke-linejoin: round; }
body[data-theme=dinos] .dk-dusk .tf { fill: var(--dusk); stroke: var(--dusk); }
body[data-theme=dinos] .dk-dusk .tfb { fill: var(--dusk-b, var(--dusk)); stroke: var(--dusk-b, var(--dusk)); }
body[data-theme=dinos] .dk-dusk .ts { stroke: var(--dusk); }
body[data-theme=dinos] .dk-night .tf { fill: var(--night); stroke: var(--night); }
body[data-theme=dinos] .dk-night .tfb { fill: var(--night-b, var(--night)); stroke: var(--night-b, var(--night)); }
body[data-theme=dinos] .dk-night .ts { stroke: var(--night); }
body[data-theme=dinos].dusk .dk-dusk { opacity: var(--dusk-o, .55); transition: opacity var(--dusk-dur, 110s) linear; }
body[data-theme=dinos].night .dk-night { opacity: var(--night-o, .9); }

/* farthest ridges and the volcano */
body[data-theme=dinos] .dk-far2 { --dusk: #D4BCBB; --night: #3F4D66; }
body[data-theme=dinos] .dk-far { --dusk: #CDB4B6; --night: #3A4860; }
body[data-theme=dinos] .dk-volcano { --dusk: #C3A9AE; --night: #34425A; }
body[data-theme=dinos] .vol-shade { fill: #8E9DA1; opacity: .3; }
body[data-theme=dinos] .vol-lit { fill: #EEE7D6; opacity: .5; }
body[data-theme=dinos] .vol-gully { fill: #8C9B9E; opacity: .16; }
body[data-theme=dinos] .vol-ridge { fill: #E6E9DF; opacity: .2; }
body[data-theme=dinos] .vol-crater { fill: #8B999C; opacity: .4; }
body[data-theme=dinos] .vol-forest { fill: #A3B3A8; opacity: .7; }

/* steam: puffs rise from the crater, spread and fade, drifting away from the middle of the sky */
body[data-theme=dinos] .dk-steam { position: absolute; left: 22%; bottom: 48.9vh; width: 0; height: 0; pointer-events: none; }
body[data-theme=dinos] .dk-plume { color: #FAF9F2; transition: opacity 8s ease, color calc(var(--dusk-dur, 110s) * .82) linear; }
body[data-theme=dinos] .dk-puff {
  position: absolute; left: -4vh; bottom: -1.4vh; width: 8vh; height: 4.4vh; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, currentColor 70%, transparent), color-mix(in srgb, currentColor 32%, transparent) 55%, transparent);
  opacity: 0; animation: dk-steam 49s linear infinite;
}
body[data-theme=dinos] .dk-puff:nth-child(2) { animation-delay: -7s; }
body[data-theme=dinos] .dk-puff:nth-child(3) { animation-delay: -14s; }
body[data-theme=dinos] .dk-puff:nth-child(4) { animation-delay: -21s; }
body[data-theme=dinos] .dk-puff:nth-child(5) { animation-delay: -28s; }
body[data-theme=dinos] .dk-puff:nth-child(6) { animation-delay: -35s; }
body[data-theme=dinos] .dk-puff:nth-child(7) { animation-delay: -42s; }
@keyframes dk-steam {
  0%   { transform: translate(0, 0) scale(.45, .4); opacity: 0; }
  10%  { opacity: .75; }
  25%  { transform: translate(-.4vh, -3vh) scale(.8, .7); }
  50%  { transform: translate(-2.6vh, -6.6vh) scale(1.25, 1.05); opacity: .5; }
  75%  { transform: translate(-6.4vh, -9.2vh) scale(1.75, 1.35); opacity: .26; }
  100% { transform: translate(-11.5vh, -11.2vh) scale(2.3, 1.6); opacity: 0; }
}
body[data-theme=dinos].dusk .dk-plume { color: #F6DCCB; }
body[data-theme=dinos] .dk-glow {
  position: absolute; left: 22%; bottom: 45.2vh; width: 16vh; height: 7vh; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(214, 168, 128, .34), rgba(214, 168, 128, .1) 55%, rgba(214, 168, 128, 0));
  opacity: 0; transition: opacity 8s ease;
}
body[data-theme=dinos].night .dk-glow { opacity: 1; transition: opacity 12s ease 3s; }
body[data-theme=dinos].night .dk-plume { opacity: .25; }

/* morning mist lying in the valleys between the ranges */
body[data-theme=dinos] .dk-mist { position: absolute; left: 0; right: 0; pointer-events: none; transition: opacity 8s ease; }
body[data-theme=dinos] .dk-mist::before, body[data-theme=dinos] .dk-mist::after { content: ''; position: absolute; inset: 0; transition: opacity calc(var(--dusk-dur, 110s) * .82) linear; }
body[data-theme=dinos] .dk-mist::before { background: linear-gradient(rgba(242, 238, 224, 0), rgba(242, 238, 224, .6) 60%, rgba(242, 238, 224, 0)); }
body[data-theme=dinos] .dk-mist::after { background: linear-gradient(rgba(240, 206, 172, 0), rgba(240, 206, 172, .5) 60%, rgba(240, 206, 172, 0)); opacity: 0; }
body[data-theme=dinos] .dk-mist-a { bottom: 30vh; height: 9vh; }
body[data-theme=dinos] .dk-mist-b { bottom: 28vh; height: 6vh; opacity: .6; }
body[data-theme=dinos] .dk-mist-river { bottom: 25.6vh; height: 3.6vh; opacity: .55; }
body[data-theme=dinos].dusk .dk-mist::before { opacity: 0; }
body[data-theme=dinos].dusk .dk-mist::after { opacity: 1; }
body[data-theme=dinos].night .dk-mist { opacity: .12; }

/* foothills, wooded hills, tree stands */
body[data-theme=dinos] .dk-foot { --dusk: #B9A3A2; --night: #2F3C52; }
body[data-theme=dinos] .dk-hills { --dusk: #9F9289; --night: #2A374B; }
body[data-theme=dinos] .dk-stand { --dusk: #6C6A5A; --dusk-o: .62; --night: #222E3F; }
body[data-theme=dinos] .st-trunk { fill: #8D9787; }
body[data-theme=dinos] .st-arm { stroke: #8D9787; }
body[data-theme=dinos] .st-dark { fill: #869983; }
body[data-theme=dinos] .st-light { fill: #9DAE97; }

/* the river */
body[data-theme=dinos] .dk-river { --dusk: #EBC8A6; --dusk-b: #8D8574; --night: #3B4B66; --night-b: #222D3E; }
body[data-theme=dinos] .rv-refl { fill: #9DAC9A; opacity: .6; }
body[data-theme=dinos] .dk-stand-refl { overflow: hidden; fill: #8D9E8C; opacity: .38; transition: opacity 8s ease; }
body[data-theme=dinos].dusk .dk-stand-refl { opacity: .3; }
body[data-theme=dinos].night .dk-stand-refl { opacity: 0; }
body[data-theme=dinos] .rv-sheen { fill: #FBF7EC; }
body[data-theme=dinos] .rv-ripple { fill: #AFC0BA; }
body[data-theme=dinos] .rv-edge { fill: none; stroke: #F7F3E7; stroke-width: .9; opacity: .85; }
body[data-theme=dinos] .rv-bank { fill: #8D9C84; }
body[data-theme=dinos] .rv-lit { fill: #A5B297; }
body[data-theme=dinos] .rv-isle { fill: #94A287; }
body[data-theme=dinos] .dk-moonpath {
  position: absolute; bottom: 24vh; right: calc(17vw + 4vh); width: 12vh; height: 3.4vh; translate: 50% 0;
  fill: #EDEBDD; opacity: 0; transition: opacity 8s ease;
}
body[data-theme=dinos] .dk-moonpath svg { width: 100%; height: 100%; display: block; }
body[data-theme=dinos].night .dk-moonpath { opacity: .6; transition: opacity 12s ease 4s; }

/* at night our own silhouettes do the darkening, so the moon's path and the volcano's glow stay soft-bright */
body[data-theme=dinos].night #scenery-back { filter: none; }

/* ---------- the ground: moss, club-moss, little ferns, stones ---------- */
body[data-theme=dinos] #ground { background: linear-gradient(#B5B691, #ADAE88 45%, #A5A77F); }
body[data-theme=dinos] #ground .dk-ground { top: -1.5vh; }
body[data-theme=dinos] .dk-ground { --dusk: #A97E62; --dusk-o: .24; --night: #33415A; --night-o: .55; }
body[data-theme=dinos].night #ground { filter: brightness(.6) saturate(.6); }
body[data-theme=dinos] .gd-tuft { fill: #85915E; opacity: .55; }
body[data-theme=dinos] .gd-tuft-lt { fill: #C7C595; opacity: .6; }
body[data-theme=dinos] .gd-sprig { fill: #7E8B58; opacity: .7; }
body[data-theme=dinos] .gd-litter { fill: #A69C6E; opacity: .6; }
body[data-theme=dinos] .gd-fernlet { fill: #7B8A58; opacity: .75; }
body[data-theme=dinos] .gd-stone { fill: #ACA691; }
body[data-theme=dinos] .gd-stone-sh { fill: #8F8A76; opacity: .55; }
body[data-theme=dinos] .gd-stone-lt { fill: #C5BFA8; opacity: .85; }
body[data-theme=dinos] .gd-cast { fill: #5F6A45; opacity: .25; }
body[data-theme=dinos] .gd-moss { fill: #8C9B63; }
body[data-theme=dinos] .gd-pebble { fill: #BBB6A2; opacity: .8; }
body[data-theme=dinos] .gd-damp-rim { fill: #7E8A5C; opacity: .45; }
body[data-theme=dinos] .gd-glint { fill: #F2F1E6; opacity: .55; }
body[data-theme=dinos] .gd-fringe { fill: #899A6B; }
body[data-theme=dinos] .gd-fringe-lt { fill: #A9B486; }

/* ---------- plants along the bank and in the corners ---------- */
body[data-theme=dinos] .fern.dk-p { --c: #7E906A; color: var(--c); transition: color 8s ease; }
body[data-theme=dinos] .fern.dk-p svg { overflow: visible; }
body[data-theme=dinos] .dk-p-tail { --c: #8B9A6A; }
body[data-theme=dinos] .dk-p-cycad { --c: #73885F; }
body[data-theme=dinos] .dk-plant .p-dk { fill: color-mix(in srgb, currentColor 74%, #1E2A1B); }
body[data-theme=dinos] .dk-plant .p-md { fill: currentColor; }
body[data-theme=dinos] .dk-plant .p-lt { fill: color-mix(in srgb, currentColor 74%, #EDE8C6); }
body[data-theme=dinos] .dk-plant .p-st { fill: none; stroke: color-mix(in srgb, currentColor 80%, #1E2A1B); stroke-width: 1.1; stroke-linecap: round; }
body[data-theme=dinos] .dk-plant .p-whorl { fill: none; stroke: color-mix(in srgb, currentColor 85%, #1E2A1B); stroke-width: .8; stroke-linecap: round; }
body[data-theme=dinos] .dk-plant .p-joint { fill: none; stroke: color-mix(in srgb, currentColor 50%, #1E2A1B); stroke-width: 1; }
body[data-theme=dinos] .dk-plant .p-cone { fill: #9A8A62; }
body[data-theme=dinos] .dk-plant .p-bark { fill: #8A7D66; }
body[data-theme=dinos] .dk-plant .p-scale { fill: none; stroke: #6E624F; stroke-width: .8; opacity: .6; }
body[data-theme=dinos] .fern.dk-corner { bottom: -5vh; z-index: 2; }
body[data-theme=dinos] .dk-corner-l { left: 3%; height: 22vh; --c: #62784F; }
body[data-theme=dinos] .dk-corner-r { left: 97.5%; height: 20vh; --c: #5E7350; }
/* dusk warms the plants with one filter on the whole layer (cheap to animate), not by repainting each one */
body[data-theme=dinos] #ferns { transition: filter var(--dusk-dur, 110s) linear; }
body[data-theme=dinos].dusk #ferns { filter: sepia(.22) saturate(.9) brightness(.92); }
body[data-theme=dinos].night .fern.dk-p { color: color-mix(in srgb, var(--c) 55%, #33496B); transition: color 8s ease; }

/* ---------- framing, in front of the creatures ---------- */
body[data-theme=dinos] .dk-front-l { left: 0; bottom: 0; height: 36vh; width: 23.4vh; translate: -8vh 0; color: #556B47; }

/* ---------- narrow screens: fewer, roomier plants and trees ---------- */
@media (max-aspect-ratio: 1/1) {
  body[data-theme=dinos] .dk-thin, body[data-theme=dinos] .dk-stand-c { display: none; }
}

/* ---------- calmer still ---------- */
@media (prefers-reduced-motion: reduce) {
  body[data-theme=dinos] .dk-puff, body[data-theme=dinos] .dk-cloud { animation-play-state: paused; }
  body[data-theme=dinos].dusk #sun { translate: none; }
}