/* Scroll story (src/story.mjs + shared/story.js). Uses the page's --olive-*, --wine, --gold, --cream and --wrap tokens. */
.scroll-story { position: relative; height: 960vh; background: var(--olive-950); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; color: var(--olive-900); }
.story-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; will-change: transform; } /* height and position set by story.js */
/* phones: the brushed-metal sheen layers cost a lot to draw and are barely visible at this size */
@media (max-width: 899px) { .story-svg [filter="url(#brushedH)"], .story-svg [filter="url(#brushedV)"] { display: none; } }
/* cinematic vignette over every scene */
.stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 60% 50%, transparent 55%, rgba(0, 0, 0, .32)); }
.back-tree { opacity: .82; }
.lamp { transition: fill .3s; }
.lamp.on { fill: #f2c14e; filter: drop-shadow(0 0 8px #f2c14e); }

.captions { position: absolute; inset: 72px 0 0; z-index: 1; pointer-events: none; }
.caption { position: absolute; left: max(28px, calc((100vw - var(--wrap)) / 2 + 24px)); top: 50%; width: min(460px, 40vw); transform: translateY(-40%); opacity: 0; transition: opacity .6s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.caption.is-active { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.caption h2 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
.caption p { font-size: 1.08rem; max-width: 40ch; opacity: .85; }
.caption .lead { font-size: 1.1rem; }
.cap-num { display: inline-flex; align-items: center; gap: 12px; font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--wine); margin-bottom: 1rem; }
.cap-num i { width: 36px; height: 1.5px; background: currentColor; }
.location { position: absolute; z-index: 2; bottom: 32px; right: max(32px, calc((100vw - var(--wrap)) / 2 + 24px)); transition: opacity .5s, transform .5s; display: inline-flex; align-items: center; gap: 8px; padding: .5em 1em .5em .8em; border-radius: 999px; background: rgba(29, 74, 46, .9); color: #fff; font-size: .74rem; letter-spacing: .16em; box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .35); }
.stage.past-hero .location, .stage.past-hero .hero-lead { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.hero-lead { position: absolute; z-index: 2; top: 96px; right: max(32px, calc((100vw - var(--wrap)) / 2 + 24px)); max-width: 360px; margin: 0; padding: 16px 20px; border-radius: 14px; background: rgba(251, 246, 234, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--olive-900); font-size: .98rem; line-height: 1.6; box-shadow: 0 10px 30px -18px rgba(31, 42, 23, .5); transition: opacity .5s, transform .5s; }
.location svg { width: 14px; height: 14px; fill: var(--gold-light); flex: none; }
.caption .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5rem; }
.scroll-hint { display: inline-flex; align-items: center; gap: 12px; margin-top: 1.5rem; font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--olive-500); }
.scroll-hint i { position: relative; width: 22px; height: 36px; border: 2px solid currentColor; border-radius: 12px; }
.scroll-hint i::after { content: ''; position: absolute; left: 50%; top: 6px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: currentColor; animation: wheel 1.6s infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
.caption { text-shadow: 0 1px 14px rgba(251, 246, 234, .8); }
.stage.is-dark { color: var(--cream); }
.stage.is-dark em, .stage.is-dark .cap-num { color: var(--gold-light); }
.stage.is-dark .caption { text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
.stage.is-dark .btn-ghost { color: var(--cream); }
.progress { position: absolute; right: 28px; top: 50%; width: 2px; height: 160px; margin-top: -80px; background: rgba(201, 162, 74, .25); border-radius: 2px; overflow: hidden; }
.progress i { position: absolute; inset: 0; background: var(--gold); transform-origin: top; transform: scaleY(0); }

/* shop version: no export step (one step shorter, export scene hidden) */
.scroll-story[data-skip="export"] { height: 840vh; }
.scroll-story[data-skip="export"] .export > :not(:nth-child(-n+2)) { display: none; }
.story-slogan { display: block; margin-bottom: .6rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--wine); }
.stage.is-dark .story-slogan { color: var(--gold-light); }
.caption .story-title { font-size: clamp(2.6rem, 5.2vw, 4.4rem); }
@media (max-width: 899px) {
  .location { top: 72px; bottom: auto; right: 12px; font-size: .62rem; letter-spacing: .1em; }
  .hero-lead { display: none; }
  .captions { inset: 0; }
  .caption { left: 16px; right: 16px; width: auto; top: auto; bottom: 0; transform: translateY(16px); padding: 40px 0 28px; }
  .caption.is-active { transform: none; }
  .captions::after { content: ''; position: absolute; inset: auto 0 0; height: 44%; background: linear-gradient(transparent, rgba(251, 246, 234, .95) 40%); z-index: -1; }
  .stage.is-dark .captions::after { background: linear-gradient(transparent, rgba(11, 28, 17, .95) 40%); }
  .caption .story-title { font-size: 2.3rem; }
  .caption h2 { font-size: 2rem; }
  .caption p { font-size: .98rem; }
  .caption-hero .lead, .caption-final p { display: none; }
  .progress { right: 12px; }
}
@media (prefers-reduced-motion: reduce) { .scroll-hint i::after { animation: none; } }