/*
 * The animals world's backdrop, ground and plants: open grassland in warm daylight.
 * Owner: animals scenery (js/scenery-animals.js). Loaded after css/style.css.
 *
 * The landscape, ground and clouds come in three painted copies (.an-tod-day, -dusk, -night)
 * that cross-fade like the app's sky layers. Plants change color through the variables below.
 * Everything is scoped to body[data-theme=animals].
 */

/* ---------- palette for the plants (day / dusk / night) ---------- */
body[data-theme=animals] {
  --an-dur: 4s; --an-ease: ease;
  --ground: #BAB37B; --ground-edge: #C6BF8B; --fern: #979752; --fern-dark: #7B7F47;
  --an-b1: #7B7F47; --an-b2: #979752; --an-b3: #B6AA63; --an-stalk: #A38F5B; --an-seed: #C2A46A;
  --an-k1: #59633F; --an-k2: #707A4F; --an-k3: #929866; --an-twig: #5B4D3C;
  --an-fstem: #7C884D; --an-fc: #B98A3A;
  --an-fy: #D9B85A; --an-fy2: #E8CB72; --an-fw: #E3DDCC; --an-fw2: #F6F2E6; --an-fl: #A08DB8; --an-fl2: #B7A6CB;
  --an-r1: #5F7245; --an-r2: #819056; --an-cat: #6B4F38;
  --an-f1: #5A6038; --an-f2: #72743E; --an-f3: #918C4D; --an-fstalk: #8C7B4E; --an-fseed: #B49760;
}
body[data-theme=animals].dusk {
  --an-dur: var(--dusk-dur, 110s); --an-ease: linear;
  --an-b1: #6A5B44; --an-b2: #87704D; --an-b3: #AC8A5A; --an-stalk: #9A7A54; --an-seed: #D1A66E;
  --an-k1: #4A3F39; --an-k2: #5C4E43; --an-k3: #7C644B; --an-twig: #3E3330;
  --an-fstem: #6B5C46; --an-fc: #A4773D;
  --an-fy: #D3A257; --an-fy2: #E2B567; --an-fw: #DEC5AD; --an-fw2: #EBD5BC; --an-fl: #957A93; --an-fl2: #A78BA2;
  --an-r1: #524639; --an-r2: #6E5C48; --an-cat: #4B392F;
  --an-f1: #4A3E37; --an-f2: #5C4C3F; --an-f3: #7C6348; --an-fstalk: #806247; --an-fseed: #C99D67;
}
body[data-theme=animals].night {
  --an-dur: 8s; --an-ease: ease;
  --an-b1: #1E2732; --an-b2: #26303D; --an-b3: #2F3A48; --an-stalk: #2D3745; --an-seed: #47536A;
  --an-k1: #19212B; --an-k2: #202935; --an-k3: #2A3543; --an-twig: #161C25;
  --an-fstem: #26303D; --an-fc: #3C4256;
  --an-fy: #5B6177; --an-fy2: #676D82; --an-fw: #6D7690; --an-fw2: #7A839C; --an-fl: #4E556F; --an-fl2: #596079;
  --an-r1: #1E2732; --an-r2: #27313E; --an-cat: #191F28;
  --an-f1: #131A23; --an-f2: #19212B; --an-f3: #222C39; --an-fstalk: #212A36; --an-fseed: #384356;
}

/* ---------- sky ---------- */
body[data-theme=animals] .sky-day { background: linear-gradient(#A6C3D8 0%, #B9D0DF 20%, #CFDFE5 42%, #E2E8E2 60%, #EFEBDA 73%, #F2E8D2 100%); }
body[data-theme=animals] .sky-dusk { background: linear-gradient(#7D88AC 0%, #9C93AE 18%, #C7A3A6 40%, #E3B497 58%, #F0C58F 70%, #F3D09B 78%, #F1D4A6 100%); }
body[data-theme=animals] .sky-night { background: linear-gradient(#10172A 0%, #172137 32%, #213050 60%, #2D3D5B 75%, #33435E 100%); }

/* the sun: a soft pale disc by day; at dusk it warms and sinks toward the hills on the right */
body[data-theme=animals] #sun {
  background: #FFF9EC; opacity: 1; box-shadow: none;
  transition: translate var(--dusk-dur, 110s) linear, scale var(--dusk-dur, 110s) linear, background-color var(--dusk-dur, 110s) linear, opacity 8s ease;
}
body[data-theme=animals] #sun::before,
body[data-theme=animals] #sun::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
body[data-theme=animals] #sun::before { inset: -60%; background: radial-gradient(closest-side, rgba(255, 250, 236, .6) 45%, rgba(255, 250, 236, 0)); }
body[data-theme=animals] #sun::after {
  inset: -240%; opacity: 0; transition: opacity var(--dusk-dur, 110s) linear;
  background: radial-gradient(closest-side, rgba(245, 186, 118, .5), rgba(245, 186, 118, .16) 50%, rgba(245, 186, 118, 0));
}
body[data-theme=animals]:not(.sky-clock).dusk #sun { translate: 0 52vh; scale: 1.12; background: #F7CF8F; }
body[data-theme=animals]:not(.sky-clock).dusk #sun::after { opacity: 1; }
body[data-theme=animals]:not(.sky-clock).night #sun {
  translate: 0 70vh; opacity: 0; box-shadow: none;
  transition: translate 9s ease-in, scale 9s, opacity 6s ease, background-color 8s;
}
/* the moving sun (js/sky.js, css/sky.css): it crosses over the plain and sets behind the hills on the
   right; its warm halo grows as it gets low; the haze lies over the far hills */
body[data-theme=animals] { --horizon: 71vh; --arc-w: 41vw; --arc-h: 60vh; --haze-top: 50vh; --haze-mid: 63vh; --haze-bottom: 77vh; }
body[data-theme=animals].sky-clock #sun { background: var(--sun-col, #FFF9EC); transition: opacity 6s ease; }
body[data-theme=animals].sky-clock #sun::after { opacity: calc(var(--warm, 0) * .9); transition: none; }
body[data-theme=animals].sky-clock.night #sun { opacity: 0; }

/* the moon rises on the left as the sun goes down */
body[data-theme=animals] .an-sky { position: absolute; inset: 0; }
body[data-theme=animals] .an-moon {
  position: absolute; left: 13vw; top: 12vh; width: 7vh; height: 7vh;
  opacity: 0; translate: 0 14vh; transition: opacity var(--dusk-dur, 110s) linear, translate var(--dusk-dur, 110s) linear;
}
body[data-theme=animals] .an-moon svg { position: relative; display: block; width: 100%; height: 100%; }
body[data-theme=animals] .an-moon::before {
  content: ''; position: absolute; inset: -110%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(226, 230, 240, .22), rgba(226, 230, 240, 0));
}
body[data-theme=animals].dusk .an-moon { opacity: .45; translate: 0 0; }
body[data-theme=animals].night .an-moon { opacity: 1; transition: opacity 6s ease 1.5s, translate 8s ease; }

/* clouds drift across very slowly (the one ambient motion) */
body[data-theme=animals] .an-cloud { position: absolute; left: 0; animation: an-drift 500s linear infinite; will-change: transform; }
body[data-theme=animals] .an-cloud svg { display: block; width: 100%; height: auto; overflow: visible; }
body[data-theme=animals] .an-cloud svg + svg { position: absolute; left: 0; top: 0; }
@keyframes an-drift { from { transform: translateX(-100%); } to { transform: translateX(100vw); } }

/* ---------- the three painted copies cross-fade like the sky layers ----------
   Once a copy has fully faded in, the ones under it are switched off, so their soft edges
   can't show through as a rim. */
body[data-theme=animals] .an-tod-dusk { opacity: 0; transition: opacity var(--dusk-dur, 110s) linear; }
body[data-theme=animals].dusk .an-tod-dusk { opacity: 1; }
body[data-theme=animals] .an-tod-night { opacity: 0; transition: opacity 8s ease; }
body[data-theme=animals].night .an-tod-night { opacity: 1; }
body[data-theme=animals].dusk .an-tod-day { opacity: 0; transition: opacity 0s linear var(--dusk-dur, 110s); }
body[data-theme=animals].night .an-tod-day,
body[data-theme=animals].night .an-tod-dusk { opacity: 0; transition: opacity 0s linear 8s; }

/* ---------- landscape band and ground ---------- */
body[data-theme=animals] .an-land { position: absolute; left: 0; right: 0; bottom: 22vh; height: 26vh; }
body[data-theme=animals] .an-land .an-tod,
body[data-theme=animals] .an-ground .an-tod,
body[data-theme=animals] .an-tex { position: absolute; inset: 0; }
body[data-theme=animals] .an-land svg,
body[data-theme=animals] .an-ground svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

body[data-theme=animals] #ground { background: linear-gradient(#C6BF8B, #9F9A5E); }
body[data-theme=animals] .an-tex { transition: opacity 8s ease; }
body[data-theme=animals].night .an-tex { opacity: .35; }
body[data-theme=animals] .an-tex-dark { fill: #4C5527; opacity: .2; }
body[data-theme=animals] .an-tex-light { fill: #F4E9B8; opacity: .26; }

/* ---------- plants ---------- */
body[data-theme=animals] .fern.an-plant svg { overflow: visible; }
body[data-theme=animals] .an-flip svg { scale: -1 1; }
body[data-theme=animals] .an-plant svg [class],
body[data-theme=animals] .an-front svg [class] { transition: fill var(--an-dur) var(--an-ease), stroke var(--an-dur) var(--an-ease); }
body[data-theme=animals] .an-b1 { fill: var(--an-b1); }
body[data-theme=animals] .an-b2 { fill: var(--an-b2); }
body[data-theme=animals] .an-b3 { fill: var(--an-b3); }
body[data-theme=animals] .an-stalk { stroke: var(--an-stalk); }
body[data-theme=animals] .an-seed { fill: var(--an-seed); }
body[data-theme=animals] .an-k1 { fill: var(--an-k1); }
body[data-theme=animals] .an-k2 { fill: var(--an-k2); }
body[data-theme=animals] .an-k3 { fill: var(--an-k3); }
body[data-theme=animals] .an-twig { stroke: var(--an-twig); }
body[data-theme=animals] .an-fstem { stroke: var(--an-fstem); }
body[data-theme=animals] .an-fc { fill: var(--an-fc); }
body[data-theme=animals] .an-fy { fill: var(--an-fy); }
body[data-theme=animals] .an-fy2 { fill: var(--an-fy2); }
body[data-theme=animals] .an-fw { fill: var(--an-fw); }
body[data-theme=animals] .an-fw2 { fill: var(--an-fw2); }
body[data-theme=animals] .an-fl { fill: var(--an-fl); }
body[data-theme=animals] .an-fl2 { fill: var(--an-fl2); }
body[data-theme=animals] .an-r1 { fill: var(--an-r1); }
body[data-theme=animals] .an-r2 { fill: var(--an-r2); }
body[data-theme=animals] .an-rstem { stroke: var(--an-r2); }
body[data-theme=animals] .an-cat { fill: var(--an-cat); }
body[data-theme=animals] .an-f1 { fill: var(--an-f1); }
body[data-theme=animals] .an-f2 { fill: var(--an-f2); }
body[data-theme=animals] .an-f3 { fill: var(--an-f3); }
body[data-theme=animals] .an-fstalk { stroke: var(--an-fstalk); }
body[data-theme=animals] .an-fseed { fill: var(--an-fseed); }

/* a key press bends grass from its roots instead of tipping the whole clump */
body[data-theme=animals] #ferns .fern.sway { animation: an-sway 1.5s ease-in-out; }
body[data-theme=animals] #ferns .fern.an-bush.sway { animation-name: an-rustle; }
@keyframes an-sway {
  0%, 100% { transform: translateX(-50%) skewX(0deg); }
  25% { transform: translateX(-50%) skewX(-6deg); }
  60% { transform: translateX(-50%) skewX(4deg); }
}
@keyframes an-rustle {
  0%, 100% { transform: translateX(-50%) skewX(0deg); }
  30% { transform: translateX(-50%) skewX(-3deg); }
  65% { transform: translateX(-50%) skewX(2deg); }
}

/* ---------- framing: a tall clump at each bottom corner ---------- */
body[data-theme=animals] .an-front { position: absolute; bottom: -3vh; height: min(34vh, 42vw); }
body[data-theme=animals] .an-front svg { display: block; height: 100%; width: auto; overflow: visible; }
body[data-theme=animals] .an-front-l { left: 0; translate: -42% 0; }
body[data-theme=animals] .an-front-r { right: 0; translate: 42% 0; scale: -1 1; }

/* ---------- night: this world paints its own moonlit colors instead of the app's dimming filter;
   the footprints keep the app's dimming (the creatures' moonlight is in css/style.css) ---------- */
body[data-theme=animals].night #scenery-back,
body[data-theme=animals].night #ground,
body[data-theme=animals].night #scenery-front { filter: none; }
body[data-theme=animals] #tracks { transition: filter 8s ease; }
body[data-theme=animals].night #tracks { filter: brightness(.42) saturate(.7); }

/* previews opened with ?tod=dusk|night skip the slow fades (see the end of js/scenery-animals.js) */
body[data-theme=animals].an-now .sky,
body[data-theme=animals].an-now #sun,
body[data-theme=animals].an-now #sun::after,
body[data-theme=animals].an-now #scenery-back,
body[data-theme=animals].an-now #scenery-back *,
body[data-theme=animals].an-now #ground,
body[data-theme=animals].an-now #ground *,
body[data-theme=animals].an-now #scenery-front,
body[data-theme=animals].an-now #scenery-front * { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  body[data-theme=animals] .an-cloud { animation-play-state: paused; }
  body[data-theme=animals].dusk #sun,
  body[data-theme=animals].night #sun,
  body[data-theme=animals] .an-moon { translate: 0 0; }
}