/* Homepage only: the growing canopy and where its sprites and figures sit. Shared rules live in site.css. */
body.night-body .nav.scrolled { background: rgba(20, 39, 28, .78); box-shadow: 0 1px 0 rgba(244, 239, 227, .1); }
body.night-body .tabs a, body.night-body .brand, body.night-body .lang-toggle, body.night-body .member-link, body.night-body .scheme-toggle { color: var(--cream); }
body.night-body .member-link { border-color: var(--cream); }
body.night-body .scheme-toggle { border-color: rgba(244, 239, 227, .4); }
body.night-body .tabs a[aria-current="page"] { box-shadow: 0 1.5px 0 var(--sprout); }

/* layout: sticky stage + content */
.layout { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); margin-top: -72px; }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.stage .sky, .stage .night-sky, .stage .dusk { position: absolute; inset: 0; }
/* the stage's own sky: day and night layers crossfade; the sun, moon and insects ride on top (theme.js moves the sun and moon) */
:root { --night: 0; --fireflies: 0; --firefly-delay: 0s; --daybugs: 1; --daybug-delay: 1.9s; }
:root { --canopy-bg: var(--canopy); }
:root[data-scheme="dark"] { --canopy-bg: #08140e; --night: 1; --fireflies: 1; --firefly-delay: 1.9s; --daybugs: 0; --daybug-delay: 0s; }
.stage .night-sky { background: radial-gradient(120% 80% at 50% 100%, #1a2f27 0%, #0b1612 50%, #060d0a 100%); opacity: var(--night); transition: opacity 1.6s ease .3s; }
.stage .sun { opacity: calc(1 - .45 * var(--dusk, 0)); } /* still up over the canopy, so the switch shows at the bottom of the page too */
.fireflies { position: absolute; inset: 0; opacity: var(--fireflies); transition: opacity .9s ease var(--firefly-delay); }
.ff { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #f3e7a6; box-shadow: 0 0 9px 3px rgba(243, 231, 166, .55); opacity: 0; animation: ff-blink 5s ease-in-out infinite; }
.ff:nth-child(2n) { animation-duration: 6s; }
.ff:nth-child(3n) { animation-duration: 4.5s; }
@keyframes ff-blink { 0%, 100% { opacity: 0; transform: translate(0, 0); } 40% { opacity: .95; } 65% { opacity: .7; transform: translate(7px, -11px); } }
.bugs { position: absolute; inset: 0; opacity: var(--daybugs); transition: opacity .8s ease var(--daybug-delay); }
.bugs .dusk-fade { position: absolute; inset: 0; opacity: calc(1 - var(--dusk, 0)); } /* follows the scroll at once, apart from the scheme fade */
.fly { position: absolute; width: 22px; height: 18px; animation: fly-wander 17s ease-in-out infinite alternate; }
.fly svg { width: 100%; height: 100%; overflow: visible; display: block; animation: fly-flap .3s ease-in-out infinite alternate; }
.fly path { stroke: #8a6d2f; fill: rgba(240, 217, 162, .6); }
.fly .body { fill: none; }
@keyframes fly-flap { from { transform: scaleX(1); } to { transform: scaleX(.3); } }
@keyframes fly-wander { 0% { transform: translate(0, 0) rotate(-8deg); } 25% { transform: translate(46px, -30px) rotate(10deg); } 50% { transform: translate(96px, -8px) rotate(-4deg); } 75% { transform: translate(54px, 26px) rotate(12deg); } 100% { transform: translate(118px, -34px) rotate(0deg); } }
.ladybug { opacity: var(--daybugs); transition: opacity .8s ease var(--daybug-delay); }
@media (prefers-reduced-motion: reduce) {
  .stage .night-sky, .stage .dusk::after, .fireflies, .bugs, .ladybug { transition: none; }
  .ff { animation: none; opacity: .8; }
  .fly, .fly svg { animation: none; }
}
.stage .sky { background: radial-gradient(120% 80% at 50% 100%, #fbf8f0 0%, #f4efe3 45%, #e9e2d1 100%); } /* day colours fixed: the night layer fades over it */
.stage .dusk { background: radial-gradient(130% 90% at 50% 110%, #2c4a33 0%, var(--canopy) 70%); opacity: 0; }
/* the canopy is opaque at the foot of the page and would hide the scheme; at night it deepens, crossfading with the night sky */
.stage .dusk::after { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 90% at 50% 110%, #12241b 0%, #060d0a 70%); opacity: var(--night); transition: opacity 1.6s ease .3s; }
.stage svg.tree { position: absolute; left: 50%; bottom: 0; height: 86vh; width: auto; transform: translateX(-50%); overflow: visible; }

.meter { position: absolute; left: clamp(20px, 3vw, 40px); top: 50%; transform: translateY(-50%); list-style: none; font-size: .8rem; color: var(--ink-soft); }
.meter li { position: relative; padding: 9px 0 9px 20px; transition: color .6s; }
.meter li::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; border: 1px solid currentColor; transition: background .6s, transform .6s; }
.meter li.on { color: var(--ink); }
.meter li.on::before { background: var(--sprout); border-color: var(--fern); transform: scale(1.3); }
.stage.night .meter li { color: rgba(244, 239, 227, .5); }
.stage.night .meter li.on { color: var(--cream); }

.content { position: relative; z-index: 1; }
.content > section { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 120px clamp(24px, 6vw, 96px) 96px clamp(24px, 4vw, 64px); }
.content > section > * { max-width: 34rem; }
.content .lede { margin-top: 26px; max-width: 30rem; }
.content .actions { margin-top: 38px; }

.list.with-sprites li { grid-template-columns: 64px 1fr; gap: 14px; align-items: start; }
.list.with-sprites .sp { margin-top: -6px; }
.list.tools li { padding: 28px 0 24px; }

section.canopy { color: var(--cream); background: var(--canopy-bg); }
section.canopy .lede { color: rgba(244, 239, 227, .72); }
section.canopy .btn.solid { background: var(--sprout); color: var(--canopy); }
section.canopy .btn.solid:hover { background: var(--cream); }
.field { position: relative; margin-top: 48px; width: 100%; max-width: 36rem; aspect-ratio: 5 / 4; touch-action: pan-y; }
.field svg { width: 100%; height: 100%; display: block; overflow: visible; }
.field .watcher { position: absolute; left: 0; bottom: 2%; width: 84px; height: 84px; }

/* the footer continues the dark canopy, with a sleeping sprite added by home.js */
.content > footer[data-site-footer] { background: var(--canopy-bg); color: rgba(244, 239, 227, .55); border-top: 0; }
.content > footer .sleeper { width: 40px; height: 40px; }

/* mobile: tree becomes a quiet fixed backdrop */
@media (max-width: 860px) {
  .layout { display: block; }
  .stage { position: fixed; inset: 0; height: 100vh; z-index: 0; }
  .stage svg.tree { opacity: .45; height: 88vh; transition: opacity .8s; }
  .stage.night svg.tree { opacity: .8; }
  .meter { display: none; }
  .content > section { padding: 110px 22px 72px; }
  section.canopy, .content > footer[data-site-footer] { background: transparent; }
  .field { display: none; } /* on a phone the grown tree is the last picture; the field needs a pointer anyway */
  section.canopy h2, section.canopy .lede { text-shadow: 0 1px 12px rgba(20, 39, 28, .9); }
}