/* Coating story: a sticky, scroll-scrubbed walk through dispense, spread, spin off, evaporate.
   Theme it from the host page with --cs-* custom properties. */
.coating-story {
  --cs-text: #f1eff4;
  --cs-muted: #918e9b;
  --cs-body: #bdbac4;
  --cs-accent: #e5007d;
  --cs-accent-hi: #ff3ba1;
  --cs-line: rgba(241, 239, 244, 0.09);
  --cs-gutter: clamp(16px, 4vw, 56px);
  position: relative; height: 420vh; border-top: 1px solid var(--cs-line); color: var(--cs-text);
}
.cs-stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 24px; padding: 0 var(--cs-gutter); overflow: hidden; }
.cs-steps { position: relative; height: 340px; }
.cs-step { position: absolute; inset: 0; opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.cs-step.on { opacity: 1; transform: none; }
.cs-step-n { font-size: 15px; color: var(--cs-accent-hi); font-variant-numeric: tabular-nums; }
.cs-step h2 {
  font-family: var(--cs-display, "Newsreader", Georgia, serif); font-weight: var(--cs-display-weight, 300); font-stretch: var(--cs-display-stretch, 100%);
  font-size: clamp(44px, 5.6vw, 88px); line-height: 1; letter-spacing: var(--cs-display-tracking, -0.03em); margin-top: 10px;
}
.cs-step p:not(.cs-step-n) { margin-top: 20px; color: var(--cs-body); max-width: 38ch; font-size: 18px; line-height: 1.6; }
.cs-progress { display: flex; gap: 6px; position: absolute; bottom: -84px; left: 0; width: min(100%, 360px); }
.cs-progress span { flex: 1; height: 2px; background: rgba(241,239,244,.14); position: relative; overflow: hidden; border-radius: 2px; }
.cs-progress i { position: absolute; inset: 0; background: var(--cs-accent); transform-origin: left; transform: scaleX(var(--f, 0)); }
.cs-visual { position: relative; justify-self: center; width: min(76vh, 88vw, 680px); aspect-ratio: 1; }
.cs-wafer { position: absolute; inset: 0; border-radius: 50%; }
.cs-wafer canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }
.cs-wafer::after { /* fixed light: does not rotate with the film */
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.22), transparent 38%),
    conic-gradient(from 200deg, transparent 0 10deg, rgba(255,255,255,.14) 30deg, transparent 70deg 190deg, rgba(255,255,255,.06) 215deg, transparent 250deg),
    radial-gradient(closest-side, transparent 70%, rgba(0,0,0,.45) 100%);
  mix-blend-mode: soft-light;
}
.cs-wafer::before { /* bowl shadow ring */
  content: ""; position: absolute; inset: -5%; border-radius: 50%;
  background: radial-gradient(closest-side, transparent 93%, rgba(255,255,255,.06) 95%, transparent 96%, rgba(0,0,0,.5) 100%);
}
.cs-readout { position: absolute; left: 50%; bottom: -54px; translate: -50% 0; display: flex; gap: 32px; font-size: 13px; color: var(--cs-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cs-readout b { display: block; font-size: 20px; color: var(--cs-text); font-weight: 600; letter-spacing: -0.01em; }

@media (max-width: 900px) {
  .cs-stage { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 72px; }
  .cs-visual { order: -1; width: min(52vh, 84vw); }
  .cs-steps { height: 230px; }
  .cs-progress { bottom: -10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-step { transition: none; }
}