/* Chapter layout + scroll progress. Scene art per chapter is appended below by the scene tasks. */
@property --progress { syntax: '<number>'; inherits: true; initial-value: 0; }

.chapter { position: relative; min-height: 220vh; min-height: 220svh; --progress: 0; }
#landing { min-height: 120vh; min-height: 120svh; }
.stage { position: relative; }
/* Classic sticky-background: the scene is the sticky layer, and the content overlays it, scrolling
   naturally over the top. The first ~55% of the viewport shows the scene alone before the story rises. */
.scene { position: sticky; top: 0; height: 100vh; height: 100svh; z-index: 0; pointer-events: none; overflow: hidden; }
.scene svg { width: 100%; height: 100%; display: block; }
.content { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100svh; padding: calc(var(--nav-h) + 55svh) 1rem 4rem; }
#landing .content { padding-top: calc(var(--nav-h) + 1rem); }
.content-inner { max-width: 72rem; margin: 0 auto; display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .content-inner { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: start; } .content-inner > details.more { grid-column: 1 / -1; } }

/* Where supported, CSS drives --progress off the scroll position (0 when the chapter's top hits the viewport top, 1 when its bottom reaches the viewport bottom). */
@keyframes chapter-progress { from { --progress: 0; } to { --progress: 1; } }
@supports (animation-timeline: view()) and (animation-range: contain) {
  .chapter { animation: chapter-progress linear both; animation-timeline: view(); animation-range: contain; }
}
.reduced-motion .chapter { animation: none; --progress: 1; }
/* The ?noscrolltimeline=1 flag (and any browser without support) forces scroll.js's JS fallback to
   write --progress inline - but the @supports animation above would still be enabled by browsers that
   do support scroll-driven animations and would outrank that inline write. Switch it off here too. */
.no-scroll-timeline .chapter { animation: none; }

/* ---------- Scenes (Task 6): one inline SVG per chapter, every reveal driven by --progress ---------- */
/* Every rule below is scoped to .scene: exhibits mount inside the same .chapter and use their own generic class names. */
/* Hidden sprite sheet that holds <symbol id="worldmap"> for the world scene and the map exhibit. */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.scene svg { overflow: hidden; }
/* Short chapters: the stage must fill the chapter's min-height, otherwise the sticky scene un-sticks before the
   chapter ends and a strip of page background shows beneath the art. Grid stretches the single .stage row. */
.chapter { display: grid; grid-template-rows: minmax(0, 1fr); }
/* Progress-driven transforms/opacities are pinned to their end state via .reduced-motion .chapter{--progress:1} (above); idle loops stop here. */
.reduced-motion .scene * { animation: none !important; }
/* Idle loops (leaf drift, firefly blink) run only in the active chapter (scroll.js toggles .is-active): an off-screen
   scene's animations otherwise keep invalidating style and layout on every frame. */
.chapter:not(.is-active) .scene * { animation-play-state: paused; }

/* Landing: dappled canopy light. Soft leaf shadows drift slowly; the 3D fruit sits above this in .content. */
@keyframes drift { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(34px, -22px) } }
.chapter--landing .scene .leaf { animation: drift 12s ease-in-out infinite; }
.chapter--landing .scene .leaf:nth-child(2n) { animation-duration: 15s; animation-direction: reverse; }
.chapter--landing .scene .leaf:nth-child(3n) { animation-delay: -4s; animation-duration: 18s; }
.chapter--landing .scene .leaf:nth-child(4) { animation-delay: -7s; }

/* Andes: dawn brightens, far peaks sink a touch, near ridge and terraces rise, mist thins, clouds slide. */
.chapter--andes .scene .layer--sky { opacity: calc(.6 + var(--progress) * .4); }
.chapter--andes .scene .layer--far { transform: translateY(calc(var(--progress) * 40px)); }
.chapter--andes .scene .layer--mid { transform: translateY(calc(var(--progress) * -60px)); }
.chapter--andes .scene .layer--near { transform: translateY(calc(var(--progress) * -160px)); }
.chapter--andes .scene .layer--clouds { transform: translateX(calc(var(--progress) * -120px)); }
.chapter--andes .scene .layer--mist { opacity: calc(.7 - var(--progress) * .5); }

/* Family: the eight cousins start stacked as one fruit at the trunk top and fly out to their branches. */
.chapter--family .scene .cousin-fly {
  transform: translate(calc(800px + (var(--tx) - 800px) * var(--progress)), calc(450px + (var(--ty) - 450px) * var(--progress))) scale(calc(.72 + var(--progress) * .28));
}
.chapter--family .scene .canopy { transform: scale(calc(.94 + var(--progress) * .06)); transform-origin: 800px 700px; }

/* Inside: the scaly skin zooms up and gives way to the custard within. */
.chapter--inside .scene .scales { transform: scale(calc(1 + var(--progress) * 2.2)); transform-origin: 800px 400px; }
.chapter--inside .scene .flesh { opacity: var(--progress); transform: scale(calc(.55 + var(--progress) * .45)); transform-origin: 800px 400px; }
.chapter--inside .scene .seed-ring { opacity: clamp(0, calc(var(--progress) * 2.5 - 1.2), 1); }

/* Night: dusk falls, stars and moon come out, the three fleshy petals swing open, fireflies wake. */
.chapter--night .scene .sky-night { opacity: var(--progress); }
.chapter--night .scene .stars { opacity: calc(var(--progress) * var(--progress)); }
.chapter--night .scene .moon { opacity: var(--progress); }
.chapter--night .scene .ground-night { opacity: calc(var(--progress) * .85); }
.chapter--night .scene .petal-slot { transform: rotate(calc(var(--dir, 0) * (5deg + var(--progress) * 34deg))); }
.chapter--night .scene .petal--back { transform: scaleX(calc(.82 + var(--progress) * .18)); }
.chapter--night .scene .fireflies { opacity: calc(var(--progress) * var(--progress)); }
@keyframes blink { 0%, 100% { opacity: .1 } 50% { opacity: 1 } }
.chapter--night .scene .firefly { animation: blink 2.8s ease-in-out infinite; }
.chapter--night .scene .firefly:nth-child(2n) { animation-duration: 3.7s; animation-delay: -1.3s; }
.chapter--night .scene .firefly:nth-child(3n) { animation-duration: 4.4s; animation-delay: -2.2s; }
.chapter--night .scene .firefly:nth-child(4n+1) { animation-delay: -.8s; }
.chapter--night .scene .firefly:nth-child(5n) { animation-duration: 3.1s; animation-delay: -2.9s; }

/* Taste: confetti tumbles down through the kitchen as you scroll. */
.chapter--taste .scene .confetti { transform: translateY(calc(-300px + var(--progress) * 1200px)); }
/* Each piece carries its own seed angle as an inline --rot custom property (a transform attribute would be overridden by this rule). */
.chapter--taste .scene .confetti rect { transform-box: fill-box; transform-origin: center; transform: rotate(calc(var(--rot, 0deg) + var(--progress) * 540deg)); }
.chapter--taste .scene .confetti rect:nth-child(2n) { transform: rotate(calc(var(--rot, 0deg) + var(--progress) * -420deg)); }
.chapter--taste .scene .confetti rect:nth-child(3n) { transform: rotate(calc(var(--rot, 0deg) + var(--progress) * 760deg)); }
.chapter--taste .scene .steam { opacity: calc(.5 - var(--progress) * .3); }

/* World: fly out over the atlas; the journey lines draw on; destination pins land late. */
.chapter--world .scene .atlas { transform: scale(calc(1.22 - var(--progress) * .22)); transform-origin: 800px 400px; }
.chapter--world .scene .route { stroke-dasharray: 2000; stroke-dashoffset: calc(2000 - var(--progress) * 2000); }
/* Each pin lands as its route arrives (route length / 2000 of the scroll): Spain ~.21, India ~.38, Philippines ~.44. */
.chapter--world .scene .stop { opacity: clamp(0, calc((var(--progress) - .44) * 8), 1); }
.chapter--world .scene .stop[data-place="spain"] { opacity: clamp(0, calc((var(--progress) - .21) * 8), 1); }
.chapter--world .scene .stop[data-place="india"] { opacity: clamp(0, calc((var(--progress) - .38) * 8), 1); }
.chapter--world .scene .uk-ring { opacity: clamp(0, calc((var(--progress) - .5) * 6), 1); }

/* Passport: the burgundy cover swings open to the left. A 2D scaleX(cos(angle)) about the spine is what a
   perspective-free rotateY would render to, and every engine applies it to SVG. The visible width passes
   through zero at 90deg (progress .5625); the inner face takes over from that point. */
.chapter--passport .scene .cover { transform-origin: left center; transform-box: fill-box; transform: scaleX(cos(calc(var(--progress) * -160deg))); }
.chapter--passport .scene .cover-inside { opacity: clamp(0, calc((var(--progress) - .5625) * 40), 1); }
.chapter--passport .scene .cover-outside { opacity: clamp(0, calc((.5625 - var(--progress)) * 40), 1); }
.chapter--passport .scene .stamp-ink { opacity: clamp(0, calc(var(--progress) * 2.5 - 1.5), 1); }