/* ============================================================
   LEDURA home: story, one phone on the night sky (js/fx-story.js)
   Default (no motion / mobile): five steps, each with its own
   inline device. .story.is-pinned (desktop + motion): the steps
   scroll on the right past one sticky device on the left whose
   screens crossfade; a halo, a glass sweep and a small turn of
   the device mark every change.
   ============================================================ */
.story {
  position: relative;
  padding-block: clamp(80px, 12vw, 160px);
  overflow-x: clip; /* safety net for tilted devices; clip keeps sticky working */
}
.story-stage { display: none; }

/* ---------- steps ---------- */
.story-steps { display: grid; gap: clamp(88px, 14vw, 140px); }
.story-step { display: grid; gap: 18px; justify-items: center; text-align: center; }
.story-step h3 {
  font-size: clamp(32px, 3.6vw, 56px);
  color: var(--night-ink);
  max-width: 16ch;
}
.story-step p {
  margin: 0;
  max-width: 34ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
}
.story-inline { margin-top: 26px; }
.story-inline { /* the stage's gold halo, quieter, carried by each inline phone */
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--night-glow) 22%, transparent),
    var(--shadow-phone),
    0 0 90px color-mix(in srgb, var(--night-glow) 16%, transparent);
}

/* Tablet and static desktop: text beside a smaller phone, one calm column. */
@media (min-width: 768px) {
  .story-steps { max-width: 920px; margin-inline: auto; }
  .story-step {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: clamp(40px, 6vw, 96px);
    justify-items: start;
    align-content: center;
    text-align: left;
  }
  .story-step h3 { align-self: end; }
  .story-step p { align-self: start; }
  .story-inline { --dw: 230px; grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}

/* ---------- desktop + motion: sticky device, scrolling steps ---------- */
.story.is-pinned { padding-block: 0; }
.story.is-pinned .story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(32px, 6vw, 96px);
}
.story.is-pinned .story-steps { grid-column: 2; grid-row: 1; display: block; max-width: none; margin: 0; padding-bottom: 12svh; }
.story.is-pinned .story-step {
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  min-height: 90svh;
  text-align: left;
}
.story.is-pinned .story-inline { display: none; }
.story.is-pinned .story-step h3 { max-width: 20ch; }
.story.is-pinned .story-step > * { align-self: start; opacity: .26; transition: opacity .8s var(--ease-out); }
.story.is-pinned .story-step.is-active > * { opacity: 1; }

.story.is-pinned .story-stage {
  grid-column: 1; grid-row: 1;
  align-self: start;
  position: sticky; top: 0;
  height: 100svh;
  padding-top: 64px; /* clear the fixed header */
  display: flex; align-items: center; justify-content: center;
  perspective: 1600px;
}

/* the device: screens stacked in one cell, sized to fit short viewports */
.story-device {
  --dw: min(330px, calc((100svh - 180px) * .445));
  display: grid;
  transform-style: preserve-3d;
  /* on the night sky a dark drop shadow reads as a box; the phone rests on light instead */
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--night-glow) 30%, transparent),
    0 30px 80px -20px color-mix(in srgb, var(--night-glow) 28%, transparent);
  will-change: transform;
}
.story-device > * { grid-area: 1 / 1; }
.story-screen { will-change: transform, opacity; }

/* glass: a soft band of light that sweeps across on each change */
.story-glass {
  position: relative; z-index: 1;
  overflow: hidden;
  border-radius: calc(var(--dw) * .135);
  pointer-events: none;
}
.story-glass::before {
  content: "";
  position: absolute; top: -20%; left: 0;
  width: 60%; height: 140%;
  background: linear-gradient(100deg, transparent 12%,
    color-mix(in srgb, var(--night-glow) 22%, transparent) 36%,
    color-mix(in srgb, var(--elevated) 75%, transparent) 50%,
    color-mix(in srgb, var(--night-glow) 22%, transparent) 64%, transparent 88%);
  transform: translateX(calc(-160% + var(--sweep, 0) * 400%)) skewX(-12deg);
}

/* halo: the device floats on gold light, not on a card */
.story-halo {
  position: absolute; left: 50%; top: calc(50% + 32px);
  width: min(640px, 110%); aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--night-glow) 34%, transparent),
    color-mix(in srgb, var(--night-glow) 10%, transparent) 50%, transparent);
  opacity: .85;
  pointer-events: none;
}

/* progress: a gold hairline with five unlabelled marks */
.story-progress {
  position: absolute; right: 0; top: calc(50% + 32px);
  height: 200px; width: 7px;
  translate: 0 -50%;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
}
.story-progress::before,
.story-progress-fill {
  content: ""; position: absolute; left: 3px; top: 3px; bottom: 3px; width: 1px;
  background: color-mix(in srgb, var(--night-glow) 22%, transparent);
}
.story-progress-fill { background: var(--night-glow); transform-origin: top; transform: scaleY(0); }
.story-progress i {
  position: relative;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--night-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--night-glow) 50%, transparent);
  transition: background-color .6s ease, transform .6s var(--ease-out);
}
.story-progress i.is-on { background: var(--night-glow); transform: scale(1.2); }