/* ============================================================
   Sublidyne — "Inside the Machine" scrollytelling layer
   story.css — loaded ONLY by commercial-freeze-dryers.html.
   Extends the v2.0 design system in css/styles.css (deep-cold
   darks, frost-blue accents, Inter, --ease-out). Animation is
   transform/opacity(/filter) only; everything is opt-in:
   - html.story-on  → set by js/story.js (IO + motion OK only)
   - no JS / reduced motion → static, fully readable layout.
   Images are AI-generated placeholder renders until real
   photography exists (see images/README.txt).
   ============================================================ */

/* ------------------------------------------------------------
   1. OPENING — full-viewport hero with the machine behind the
      existing H1/lead/CTAs (copy untouched, just re-staged).
   ------------------------------------------------------------ */
.page-hero.story-hero {
  min-height: 100vh;
  min-height: 100svh;
  padding: 130px 0 120px;
  background: var(--bg-deep); /* image + vignette layer on top */
}
.story-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.story-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  transform: scale(1);                /* Ken Burns 1.0 → 1.06 via JS */
  transform-origin: 50% 45%;
  will-change: transform;
}
.story-hero-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(5, 8, 13, 0.86) 0%,
      rgba(5, 8, 13, 0.46) 30%,
      rgba(5, 8, 13, 0.52) 60%,
      rgba(5, 8, 13, 0.95) 100%),
    radial-gradient(ellipse 85% 75% at 50% 48%,
      rgba(5, 8, 13, 0.08) 0%,
      rgba(5, 8, 13, 0.62) 92%);
}
.page-hero.story-hero .container { z-index: 2; }
.page-hero.story-hero h1 {
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  max-width: 1000px;
  text-shadow: 0 2px 36px rgba(5, 8, 13, 0.7);
}
.page-hero.story-hero .lead {
  text-shadow: 0 1px 22px rgba(5, 8, 13, 0.8);
  color: var(--ice-dim);
}

/* Scroll cue — "Scroll" + thin animated line */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.scroll-cue-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--frost);
  padding-left: 0.34em; /* optically center the tracked text */
}
.scroll-cue-line {
  width: 1px;
  height: 56px;
  background: rgba(159, 216, 255, 0.22);
  position: relative;
  overflow: hidden;
}
.scroll-cue-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--frost) 55%, #fff 100%);
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue-line::after { animation: cueDrop 2.3s var(--ease-out) infinite; }
}
@keyframes cueDrop {
  0%        { transform: translateY(-100%); }
  62%, 100% { transform: translateY(100%); }
}

/* ------------------------------------------------------------
   2. THE STORY — sticky full-viewport stage + scrolling steps
   ------------------------------------------------------------ */
.story {
  position: relative;
  background: var(--bg-deep);
  color: var(--ice-dim);
}
.story-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(20, 56, 90, 0.5), transparent 60%),
    var(--bg-deep);
}
.story-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transform: scale(1.06);
  transform-origin: 50% 50%;
  transition: opacity 1.1s var(--ease-out), transform 1.7s var(--ease-out);
  will-change: transform, opacity;
}
.story-img.is-on { opacity: 0.88; }

/* Moving radial spotlight — shifts attention across the machine */
.story-spot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72vmax;
  height: 72vmax;
  margin: -36vmax 0 0 -36vmax;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(159, 216, 255, 0.17) 0%,
    rgba(159, 216, 255, 0.06) 32%,
    rgba(159, 216, 255, 0) 62%);
  mix-blend-mode: screen;
  transform: translate3d(0, 0, 0) scale(1);
  transition: transform 1.5s var(--ease-out), opacity 1s ease;
  will-change: transform;
  pointer-events: none;
}
.story-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(5, 8, 13, 0.62) 0%,
    rgba(5, 8, 13, 0.30) 38%,
    rgba(5, 8, 13, 0.38) 64%,
    rgba(5, 8, 13, 0.78) 100%);
  pointer-events: none;
}

/* Chapter progress rail (right edge of the stage) */
.story-progress {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 3;
}
.story-progress i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(159, 216, 255, 0.22);
  transition: background 0.35s ease, transform 0.35s ease;
}
.story-progress i.on { background: var(--frost); transform: scale(1.35); }

/* ------------------------------------------------------------
   Chapter choreography — data-ch on .story (set by story.js)
   drives image focus + spotlight position. Transform only.
   Regions (hero render): door/center → shelves upper-mid →
   condenser detail image → cabinet/piping lower-left → wide.
   ------------------------------------------------------------ */
.story[data-ch="1"] .img-machine { transform: scale(1.12); }
.story[data-ch="1"] .story-spot  { transform: translate3d(0, 0, 0) scale(0.92); }

.story[data-ch="2"] .img-machine { transform: scale(1.32) translate3d(2%, 7%, 0); }
.story[data-ch="2"] .story-spot  { transform: translate3d(-4vw, -12vh, 0) scale(0.78); }

.story[data-ch="3"] .img-machine { opacity: 0; transform: scale(1.18); }
.story[data-ch="3"] .img-detail  { opacity: 0.92; transform: scale(1.1); }
.story[data-ch="3"] .story-spot  { transform: translate3d(6vw, 4vh, 0) scale(1.05); }

.story[data-ch="4"] .img-machine { transform: scale(1.3) translate3d(-9%, -9%, 0); }
.story[data-ch="4"] .img-detail  { opacity: 0; }
.story[data-ch="4"] .story-spot  { transform: translate3d(10vw, 14vh, 0) scale(0.8); }

.story[data-ch="5"] .img-machine { transform: scale(1.02); }
.story[data-ch="5"] .story-spot  { transform: translate3d(0, 0, 0) scale(1.35); opacity: 0.7; }

/* ------------------------------------------------------------
   Steps — transparent sections scrolling over the pinned stage
   ------------------------------------------------------------ */
.story-steps {
  position: relative;
  z-index: 2;
  margin-top: -100vh;
  margin-top: -100svh;
}
.story-step {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 90px 24px;
}
.story-step:nth-child(odd)  { justify-content: flex-start; }
.story-step:nth-child(even) { justify-content: flex-end; }

/* Spec callout card */
.story-card {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: 0 max(24px, 7vw);
  background: rgba(10, 22, 36, 0.74);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  padding: 34px 34px 30px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.story-card h3 {
  color: #fff;
  font-size: clamp(1.55rem, 2.7vw, 2.15rem);
  letter-spacing: -0.026em;
  margin-bottom: 14px;
}
.story-card p { color: var(--ice-dim); font-size: 1.02rem; line-height: 1.65; }
.story-kicker {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.27em;
  text-transform: uppercase;
  color: var(--frost);
  margin-bottom: 16px;
}
.story-foot {
  font-size: 0.78rem;
  color: rgba(169, 194, 216, 0.72);
  margin-top: 16px;
  line-height: 1.5;
}

/* Connector line + pulsing node dot (desktop) */
.story-node, .story-line { position: absolute; top: 50%; pointer-events: none; }
.story-node {
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--frost);
  box-shadow: 0 0 0 0 rgba(159, 216, 255, 0.55);
}
.story-line {
  width: 52px;
  height: 1px;
  background: linear-gradient(90deg, rgba(159, 216, 255, 0.9), rgba(159, 216, 255, 0.05));
}
.story-step:nth-child(odd)  .story-node { right: -62px; }
.story-step:nth-child(odd)  .story-line { right: -52px; transform-origin: 0 50%; }
.story-step:nth-child(even) .story-node { left: -62px; }
.story-step:nth-child(even) .story-line {
  left: -52px;
  transform-origin: 100% 50%;
  background: linear-gradient(270deg, rgba(159, 216, 255, 0.9), rgba(159, 216, 255, 0.05));
}
@media (prefers-reduced-motion: no-preference) {
  .story-step.is-active .story-node { animation: nodePulse 2.2s ease-out infinite; }
}
@keyframes nodePulse {
  0%   { box-shadow: 0 0 0 0 rgba(159, 216, 255, 0.55); }
  100% { box-shadow: 0 0 0 16px rgba(159, 216, 255, 0); }
}

/* Materialize: fade + rise + blur-out — ONLY when story.js is
   driving (html.story-on). No JS = cards simply visible. */
html.story-on .story-card {
  opacity: 0;
  transform: translateY(36px);
  filter: blur(9px);
  transition: opacity 0.85s var(--ease-out),
              transform 0.85s var(--ease-out),
              filter 0.85s var(--ease-out);
  will-change: transform, opacity, filter;
}
html.story-on .story-step.is-active .story-card {
  opacity: 1;
  transform: none;
  filter: none;
}
html.story-on .story-line {
  transform: scaleX(0);
  transition: transform 0.7s var(--ease-out) 0.4s;
}
html.story-on .story-step.is-active .story-line { transform: scaleX(1); }
html.story-on .story-node {
  opacity: 0;
  transition: opacity 0.4s ease 0.9s;
}
html.story-on .story-step.is-active .story-node { opacity: 1; }

/* ------------------------------------------------------------
   Stats & spec chips
   ------------------------------------------------------------ */
.story-stat {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 6px 0 16px;
}
.stat-num {
  font-size: clamp(2.7rem, 5.4vw, 4.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.stat-num.giant {
  font-size: clamp(3.6rem, 9vw, 6.6rem);
  background-image: linear-gradient(100deg, #ffffff 0%, var(--frost) 55%, var(--frost-mid) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-unit {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--frost);
}
.stat-unit sup { font-size: 0.7em; }

/* Placeholder spec chips — honest by design (no invented numbers) */
.story-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.story-chip {
  display: inline-block;
  border: 1px dashed var(--frost-mid);
  background: rgba(74, 168, 232, 0.10);
  color: var(--frost);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.45;
  padding: 8px 15px;
  border-radius: 10px;
}
.story-chip.solid {
  border-style: solid;
  border-color: var(--line-dark);
  background: rgba(159, 216, 255, 0.07);
  color: var(--ice-dim);
  font-weight: 500;
}
.story-chip.solid strong {
  display: block;
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------
   Mobile — simpler pinned scene: dimmed background, full-width
   cards, no spotlight/connectors, gentler transforms (no jank).
   ------------------------------------------------------------ */
@media (max-width: 920px) {
  .page-hero.story-hero { padding: 120px 0 110px; }
  .story-step { justify-content: center; padding: 70px 18px; }
  .story-card { margin: 0; max-width: 620px; padding: 28px 24px 26px; }
  .story-node, .story-line, .story-spot { display: none; }
  .story-progress { right: 12px; }
  .story-img.is-on { opacity: 0.55; }
  .story[data-ch="3"] .img-detail { opacity: 0.62; }
  .story-shade {
    background: linear-gradient(180deg,
      rgba(5, 8, 13, 0.74) 0%,
      rgba(5, 8, 13, 0.5) 45%,
      rgba(5, 8, 13, 0.82) 100%);
  }
  /* keep transforms small on touch devices */
  .story[data-ch="1"] .img-machine { transform: scale(1.06); }
  .story[data-ch="2"] .img-machine { transform: scale(1.16) translate3d(0, 4%, 0); }
  .story[data-ch="3"] .img-machine { transform: scale(1.1); }
  .story[data-ch="3"] .img-detail  { transform: scale(1.05); }
  .story[data-ch="4"] .img-machine { transform: scale(1.16) translate3d(-4%, -4%, 0); }
  .story[data-ch="5"] .img-machine { transform: scale(1.02); }
}

/* ------------------------------------------------------------
   Reduced motion — static layout: no pin, no Ken Burns, no
   crossfade choreography, every callout visible. story.js also
   bails out entirely under this preference (belt & suspenders).
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .story-hero-img { transform: none !important; }
  .scroll-cue-line::after { animation: none; transform: none; opacity: 0.5; }
  .story-stage {
    position: relative;
    height: 52vh;
    min-height: 320px;
  }
  .story-steps { margin-top: 0; }
  .story-step { min-height: 0; padding: 36px 24px; justify-content: center; }
  .story-img { transition: none; transform: none !important; }
  .img-machine { opacity: 0.8 !important; }
  .img-detail  { opacity: 0 !important; }
  .story-spot, .story-progress { display: none; }
  html.story-on .story-card,
  html.story-on .story-line,
  html.story-on .story-node {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .story-node { animation: none !important; }
}

/* Very short viewports: don't let the card overflow the stage */
@media (max-height: 560px) {
  .story-card { max-height: 86vh; overflow-y: auto; }
}

/* Print — story collapses to plain readable blocks */
@media print {
  .story-hero-media, .scroll-cue, .story-spot, .story-shade,
  .story-progress, .story-img { display: none !important; }
  .page-hero.story-hero { min-height: 0; }
  .story { background: #fff; color: #000; }
  .story-stage { position: static; height: auto; }
  .story-steps { margin-top: 0; }
  .story-step { min-height: 0; padding: 16px 0; }
  .story-card { background: #fff; border-color: #ccc; box-shadow: none; }
  .story-card h3, .stat-num { color: #000; -webkit-text-fill-color: initial; }
}