/* ============================================================
   story.css — "Inside the Process" scroll cinematic
   Six pinned scenes; scroll drives a per-scene progress variable
   --p (0→1, set by story.js). Transforms/opacity only — no layout
   thrash. Falls back to a static stacked page for reduced motion.
   ============================================================ */

.story { position:relative; background:var(--slate-2); }

/* ---- scene shell: tall track + sticky viewport ---- */
.scene { position:relative; height:210vh; }
.scene--hall, .scene--finale { height:180vh; }
.scene__pin {
  position:sticky; top:0; height:100vh; height:100svh;
  overflow:hidden; display:flex; align-items:center;
}

/* ---- full-bleed media (scenes 1 & 6) ---- */
.scene__media { position:absolute; inset:0; }
.scene__media img {
  width:100%; height:100%; object-fit:cover;
  transform: scale(calc(1.06 + var(--p, 0) * 0.14)) translateY(calc(var(--p, 0) * -2.5%));
  will-change: transform;
}
.scene__media--dark {
  background:
    radial-gradient(ellipse 70% 55% at 70% 45%, rgba(139,36,51,.16), transparent 70%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(165deg, #1D2129, #12151B);
  background-size:auto, 52px 52px, 52px 52px, auto;
}
.scene__scrim {
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,12,16,.82) 0%, rgba(10,12,16,.55) 45%, rgba(10,12,16,.2) 100%);
}
.scene__scrim--deep {
  background:linear-gradient(180deg, rgba(10,12,16,.55), rgba(10,12,16,.82));
}

/* ---- copy ---- */
.scene__copy {
  position:relative; z-index:2; max-width:640px;
  opacity: clamp(0, calc((var(--p, 0) - 0.05) * 6), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--p, 0) - 0.05) * 6), 1)) * 28px));
  will-change: opacity, transform;
}
.scene--hall .scene__copy { opacity:1; transform:none; }
.story-eyebrow {
  font-family:var(--mono); font-size:.73rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--maroon-br);
  display:inline-flex; align-items:center; gap:10px;
}
.story-eyebrow::before { content:""; width:24px; height:1px; background:currentColor; opacity:.6; }
.scene__title {
  margin-top:var(--sp-5); color:#fff;
  font-size:clamp(2.1rem, 4.2vw, 3.4rem); line-height:1.08; letter-spacing:-.022em;
}
.scene__lead { margin-top:var(--sp-5); font-size:1.14rem; line-height:1.6; color:rgba(255,255,255,.72); max-width:34em; }
.scene__copy .chips { margin-top:var(--sp-6); }
.scene__copy .link-arrow { margin-top:var(--sp-6); }
.chips--on-dark .chip, .scene--defects .chip, .scene--hall .chip, .scene--finale .chip {
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22); color:#fff;
}

/* scroll hint (scene 1) */
.scene__hint {
  margin-top:var(--sp-7); display:inline-flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.scene__hint i { width:1px; height:44px; background:linear-gradient(rgba(255,255,255,.7), transparent); display:block; animation:hint-drip 1.8s ease-in-out infinite; transform-origin:top; }
@keyframes hint-drip { 0%{ transform:scaleY(.2); opacity:0;} 35%{ opacity:1;} 100%{ transform:scaleY(1); opacity:0;} }

/* ---- split scenes (2–5): copy + visual ---- */
.scene__split {
  position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px, 5vw, 88px); align-items:center; width:100%;
}
.scene--flip .scene__split { direction:rtl; }
.scene--flip .scene__split > * { direction:ltr; }

/* ---- defect cross-section (scene 2) ---- */
.scene__visual { position:relative; }
.xsec { width:100%; height:auto; filter:drop-shadow(0 30px 50px rgba(0,0,0,.5)); }
.xsec__tag { font-family:var(--mono); font-size:13px; letter-spacing:.18em; fill:rgba(255,255,255,.55); }
.xsec .void, .xsec .bub {
  opacity:0; transform:scale(.2); transform-origin:center; transform-box:fill-box;
  transition:opacity .5s ease, transform .55s cubic-bezier(.34,1.4,.5,1);
}
.scene.is-active .xsec .void, .scene.is-active .xsec .bub { opacity:1; transform:scale(1); }
.xsec .void:nth-child(1), .xsec .bub:nth-child(1) { transition-delay:.15s; }
.xsec .void:nth-child(2), .xsec .bub:nth-child(2) { transition-delay:.3s; }
.xsec .void:nth-child(3), .xsec .bub:nth-child(3) { transition-delay:.45s; }
.xsec .void:nth-child(4), .xsec .bub:nth-child(4) { transition-delay:.6s; }
.xsec .bub:nth-child(5) { transition-delay:.75s; }
.xsec .bub:nth-child(6) { transition-delay:.9s; }

/* ---- product scenes (3–5): light page, dark product stage ---- */
.scene--product .scene__pin { background:linear-gradient(180deg, var(--surface-2), var(--paper)); }
.scene--product .scene__title { color:var(--ink); }
.scene--product .scene__lead { color:var(--muted); }
.scene--product .story-eyebrow { color:var(--maroon); }
.scene__stage {
  position:relative; border-radius:14px; overflow:hidden;
  aspect-ratio:4/4.6; max-height:74vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse 62% 48% at 50% 42%, rgba(166,46,63,.2), transparent 68%),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(168deg, #1D2129, #12151B);
  background-size:auto, 52px 52px, 52px 52px, auto;
  box-shadow:var(--shadow-panel);
}
.scene__bigno {
  position:absolute; top:2%; left:50%; transform:translateX(-50%) translateY(calc((var(--p, 0) - .5) * 40px));
  font-family:var(--mono); font-weight:600; font-size:clamp(9rem, 17vw, 15rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.13);
  user-select:none; will-change:transform;
}
.scene__cutout {
  position:relative; z-index:1; width:min(78%, 460px); max-height:80%; object-fit:contain;
  filter:drop-shadow(0 36px 42px rgba(0,0,0,.55));
  transform: translateY(calc((0.5 - var(--p, 0)) * 56px));
  will-change:transform;
}

/* ---- finale ---- */
.scene--finale .scene__pin { align-items:center; }
.scene__copy--center { max-width:760px; margin-inline:auto; text-align:center; }
.scene__copy--center .story-eyebrow { justify-content:center; }
.scene__copy--center .scene__lead { margin-inline:auto; }
.story-creds { margin-top:var(--sp-6); display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.story-creds span {
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.24); padding:7px 14px; border-radius:4px;
}
.scene__actions { margin-top:var(--sp-6); display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---- progress rail ---- */
.story-rail {
  position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:55;
  display:flex; flex-direction:column; gap:14px;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.story-rail.visible { opacity:1; pointer-events:auto; }
.story-rail__dot {
  position:relative; width:10px; height:10px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.45); background:transparent; padding:0;
  transition:background .25s, border-color .25s, transform .25s;
}
.story-rail__dot.on { background:var(--maroon-br); border-color:var(--maroon-br); transform:scale(1.35); }
.story-rail__label {
  position:absolute; right:22px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:rgba(10,12,16,.78); padding:4px 10px; border-radius:4px; white-space:nowrap;
  opacity:0; transition:opacity .2s; pointer-events:none;
}
.story-rail__dot:hover .story-rail__label, .story-rail__dot.on .story-rail__label { opacity:1; }
/* rail dots over light product scenes */
.story-rail--on-light .story-rail__dot { border-color:rgba(20,22,27,.4); }
.story-rail--on-light .story-rail__dot.on { background:var(--maroon); border-color:var(--maroon); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1000px) {
  .story-rail { display:none; }
  .scene { height:auto; min-height:100vh; }
  .scene__pin { position:relative; height:auto; min-height:100svh; padding-block:96px 72px; }
  .scene__split { grid-template-columns:1fr; gap:40px; }
  .scene--flip .scene__split { direction:ltr; }
  .scene__stage { aspect-ratio:4/3.4; max-height:none; width:100%; }
  .scene__copy, .scene--product .scene__copy { opacity:1; transform:none; }
  .scene__media img { transform:none; }
  .scene__bigno, .scene__cutout { transform:none; }
}
@media (max-width: 480px) {
  .scene__title { font-size:1.9rem; }
  .scene__lead { font-size:1.02rem; }
  .scene__actions .btn { width:100%; }
}

/* ============================================================
   Reduced motion — static stacked page, all content visible
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .scene { height:auto; }
  .scene__pin { position:relative; height:auto; min-height:0; padding-block:96px; }
  .scene__copy, .scene__media img, .scene__bigno, .scene__cutout { opacity:1; transform:none; transition:none; }
  .xsec .void, .xsec .bub { opacity:1; transform:none; transition:none; }
  .scene__hint i { animation:none; }
}