/* ---------- Home story scenes (index.html only) ----------
   js/story.js adds `story-on` to <html> once GSAP + ScrollTrigger are
   running. Everything here has a no-JS / no-GSAP default that is a plain,
   readable page; the `story-on` rules only layer the pinned/scrubbed
   behaviour on top. */

/* Scene order: hero, next party, about, editions, cta. Pinned scenes need
   the page to scroll linearly, so snap + smooth-scroll are switched off. */
html.story-on{ scroll-snap-type: none; scroll-behavior: auto; }

/* About: words light up as the visitor scrolls (see splitWords in story.js). */
.about-lead .w{ display: inline; }

/* ---- Scroll-linked wine glass (fixed, bottom right) ---- */
#scroll-glass{
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
}
html.story-on #scroll-glass{ opacity: 1; }
#scroll-glass .tl-glass2d{ position: relative; width: 84px; height: 104px; }
@media (min-width: 900px){
  #scroll-glass .tl-glass2d{ width: 110px; height: 137px; }
}
#scroll-glass .tl-glass2d-level{ transition: none; }

/* ---- Editions ---- */
.editions{ padding: clamp(56px, 7vw, 96px) 0; }
.editions-stack{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.edition-card{
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 2 / 3;
  border-radius: 20px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  color: var(--cream);
}
.edition-card img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.edition-meta{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 56px 20px 20px;
  background: linear-gradient(180deg, transparent, rgba(11,6,5,.88));
  display: flex; flex-direction: column; gap: 4px;
}
.edition-meta b{ font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; }
.edition-meta span{ font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cream-dim); }
.edition-card--all{
  display: flex; align-items: flex-end;
  background: radial-gradient(circle at 30% 20%, rgba(255,106,61,.5), transparent 60%), var(--wine);
}
.edition-card--all .edition-meta{ position: static; background: none; }

/* Stacked mode: only when story.js decided the viewport can hold a pinned
   stack (see the matchMedia in story.js). Cards pile on top of each other
   and the scroll timeline slides them in one by one. */
.editions.is-stacked{ min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: clip; }
.editions.is-stacked .editions-stack{
  display: block; position: relative;
  width: min(360px, 82vw);
  height: min(58svh, 540px);
  margin: 28px auto 0;
}
.editions.is-stacked .edition-card{
  position: absolute; inset: 0; aspect-ratio: auto;
  box-shadow: 0 24px 48px rgba(0,0,0,.5);
  will-change: transform;
}

/* ---- CTA ---- */
.cta{ text-align: center; padding: clamp(96px, 14vw, 180px) 0; }
.cta-title{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.4rem, 8vw, 6rem); line-height: 1;
  letter-spacing: -0.02em; margin: 0 0 18px;
}
.cta-title span{ color: var(--wine-light); }
.cta p{ color: var(--cream-dim); margin: 0 auto 32px; max-width: 460px; }
.cta .hero-ctas{ justify-content: center; }

@media (prefers-reduced-motion: reduce){
  #scroll-glass{ display: none; }
}