/* ─── Pinned hero: nav floats, hero pins, the page scrolls up over it ── */
.hero-pin { position: sticky; top: 0; height: 100vh; z-index: 0; overflow: hidden; }
.page-over { position: relative; z-index: 2; background: var(--color-canvas); }

.story-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-noir);
  padding-top: var(--nav-h);
  padding-bottom: var(--space-16);
}
.story-hero .divider-gold { max-width: 440px; margin-inline: auto; margin-top: var(--space-16); }

/* ─── Reveal-on-scroll: each stack (section) slides in as a block ── */
@media (prefers-reduced-motion: no-preference) {
  .stack { opacity: 0; transform: translateY(52px); transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
  .stack.is-visible { opacity: 1; transform: none; }
  .stack--nohide { opacity: 1; transform: none; }   /* hero: don't slide the full-bleed block, just stagger its text */

  .stack .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
  .stack .reveal.reveal-d1 { transition-delay: 0.12s; }
  .stack .reveal.reveal-d2 { transition-delay: 0.22s; }
  .stack .reveal.reveal-d3 { transition-delay: 0.32s; }
  .stack.is-visible .reveal { opacity: 1; transform: none; }
}

/* ─── Story track: one continuous pinned stage carries the Workflow copy
   straight into the chaos -> Stitch -> Viora-loop zoom diagram below — there
   is no separate section to un-stick and re-stick between the two, so the
   handoff never reads as scrolling between two different animations. ── */
.story-track { position: relative; height: 520vh; }
.story-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: var(--color-noir);
}
.workflow-layer {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-canvas); padding-block: var(--space-16);
}
.workflow-content { width: 100%; }
.zoom-group { position: absolute; inset: 0; }
@media (prefers-reduced-motion: reduce) {
  .story-track { height: auto; }
  .story-stage { position: static; height: auto; overflow: visible; }
  .workflow-layer { position: static; display: block; }
  .zoom-group {
    position: relative; height: min(60vh, 620px); overflow: hidden;
    margin-top: var(--space-16);
  }
}
.workflow-intro { text-align: center; max-width: 680px; margin-inline: auto; margin-bottom: var(--space-20); }
.workflow-intro h2 { font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--leading-snug); }
.workflow-intro p { margin-top: var(--space-5); font-size: var(--text-lg); color: var(--color-suede); line-height: var(--leading-relaxed); }

.wf-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  max-width: 980px;
  margin-inline: auto;
}
.wf-node { text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; }
.wf-step {
  position: absolute; top: -2px; left: 50%; transform: translate(calc(-50% + 64px), -4px);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-widest); color: var(--color-warm-grey);
}
.wf-node-circle {
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--color-surface); border: 1px solid var(--color-linen);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-gold-dark); flex-shrink: 0; box-shadow: var(--shadow-sm);
}
.wf-stage {
  font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--color-gold-dark); margin-top: var(--space-5);
}
.wf-role { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-noir); margin-top: var(--space-2); line-height: var(--leading-snug); }
.wf-desc { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-suede); line-height: var(--leading-relaxed); margin-top: var(--space-3); max-width: 260px; margin-inline: auto; }

/* ─── Zoom-scrub diagram: chaos (Stitch) zooms out into the whole loop (Viora).
   Lives inside .story-stage above — no sticky positioning of its own. ── */
.zoom-frame {
  position: absolute; left: 50%; top: 50%;
  transform-origin: var(--cx) var(--cy);
  transform: scale(var(--zs, 2.2));
  will-change: transform;
}
.zoom-layer { position: absolute; inset: 0; }
.zoom-copy {
  position: absolute; left: 0; right: 0; bottom: var(--space-6);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-inline: var(--space-6); pointer-events: none;
}
.zoom-copy-block { position: relative; max-width: 620px; margin-inline: auto; transition: opacity 0.15s linear; }
.zoom-copy-eyebrow { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-4); }
.zoom-copy-head { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: var(--leading-snug); color: var(--color-parchment); margin: 0; max-width: 600px; margin-inline: auto; }
.zoom-copy-sub { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-warm-grey); max-width: 540px; margin-inline: auto; margin-top: var(--space-4); }
.zoom-scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 52%;
  background: linear-gradient(to top, var(--color-noir) 22%, rgba(26,20,16,0.82) 55%, transparent);
  pointer-events: none;
}

/* ── Part 2 only: rectangular Stitch CTA card, right side — sized to
   deliberately cover Manufacture + Marketing (and into Sales). Bright
   parchment panel (not another dark tone) so it visibly breaks from the
   noir diagram around it, with a gold glow and a scale-in pop on entry. ── */
.zoom-stitch-overlay {
  position: absolute; right: clamp(16px, 3%, 32px); top: 50%; transform: translateY(-50%) scale(0.94);
  width: 35vw; max-width: 620px;
  background: var(--color-parchment); border: 2px solid var(--color-gold); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg), 0 0 60px rgba(201,169,110,0.35); padding: var(--space-12);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s linear, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.zoom-stitch-overlay.is-visible { pointer-events: auto; transform: translateY(-50%) scale(1); }
.zoom-overlay-eyebrow { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-gold-dark); margin-bottom: var(--space-5); }
.zoom-overlay-head { font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-snug); color: var(--color-noir); margin-bottom: var(--space-5); }
.zoom-overlay-sub { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-suede); margin-bottom: var(--space-8); }

@media (max-width: 900px) {
  .zoom-stitch-overlay {
    right: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.94);
    top: 55%; width: min(320px, 80vw); padding: var(--space-6);
    max-height: 80vh; overflow-y: auto;
  }
  .zoom-stitch-overlay.is-visible { transform: translate(-50%, -50%) scale(1); }
  .zoom-overlay-head { font-size: var(--text-xl); margin-bottom: var(--space-3); }
  .zoom-overlay-sub { margin-bottom: var(--space-4); }
}
/* ── Diagram primitives (absolutely positioned inside .zoom-frame at its native 1320x600 scale) ── */
.zoom-node {
  position: absolute; border-radius: 50%; border: 1px solid rgba(201,169,110,0.32); background: #1C1510;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  box-sizing: border-box; padding: 0 10px;
}
.zoom-node-label { font-family: var(--font-display); font-size: 21px; line-height: 1.12; color: var(--color-parchment); white-space: pre-line; }

.zoom-ring-node {
  position: absolute; border-radius: 50%; border: 1px solid var(--color-gold); background: #1C1510;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.zoom-ring-title { font-family: var(--font-display); font-style: italic; font-size: 36px; color: var(--color-parchment); line-height: 1; }
.zoom-ring-caption { font-family: var(--font-body); font-size: 9px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gold); margin-top: 8px; }

.zoom-diamond {
  position: absolute; transform: rotate(45deg); border: 1px dashed var(--color-gold-light);
  background: rgba(232,217,192,0.04); display: flex; align-items: center; justify-content: center;
}
.zoom-diamond span { transform: rotate(-45deg); font-family: var(--font-display); font-size: 12px; color: var(--color-parchment); white-space: nowrap; }

.zoom-tile {
  position: absolute; border-radius: 50%; border: 1px solid rgba(201,169,110,0.30);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform 0.2s ease;
}
.zoom-tile-label {
  font-family: var(--font-body); font-size: 7px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-warm-grey); margin-top: 1px;
}

/* ─── Waitlist section ── */
#waitlist { padding-block: var(--section-padding-lg); background: var(--color-canvas); text-align: center; }
.waitlist-inner { max-width: 600px; margin-inline: auto; }
.waitlist-inner h2 { font-family: var(--font-display); font-style: italic; font-size: var(--text-4xl); color: var(--color-noir); line-height: var(--leading-snug); margin-bottom: var(--space-5); }
.waitlist-sub { font-size: var(--text-lg); color: var(--color-suede); margin-bottom: var(--space-10); }
.waitlist-footnote { margin-top: var(--space-5); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-warm-grey); }

.waitlist-form { display: flex; gap: var(--space-3); align-items: stretch; max-width: 520px; margin-inline: auto; }
.waitlist-form input {
  flex: 1; font-family: var(--font-body); font-size: var(--text-base); color: var(--color-noir);
  background: var(--color-surface); border: 1px solid var(--color-linen); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); outline: none;
}
.waitlist-form input:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
@media (max-width: 560px) { .waitlist-form { flex-direction: column; } }

.waitlist-confirm {
  border: var(--border-gold); border-radius: var(--radius-md); padding: var(--space-8); background: var(--color-gold-dim);
}
.waitlist-confirm-title { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-noir); margin-bottom: var(--space-2); }
.waitlist-confirm-body { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-suede); }
.waitlist-hidden { display: none; }

@media (max-width: 768px) {
  .wf-rail { grid-template-columns: 1fr; gap: var(--space-12); }
}