/* Spark RC part by part: the section is tall, the stage sticks, scroll drives the frames */
.sx{position:relative;height:720vh;background:#0e0d10;color:#f3f1ec}
.sx-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center;padding:150px 0 170px}
.sx-media{position:relative;width:min(100vw,calc((100svh - 270px) * 16 / 9 * 1.08));aspect-ratio:16/9;
  /* soft edges on all four sides so the frame melts into the stage */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 10%,#000 88%,transparent);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 10%,#000 88%,transparent);
          mask-composite:intersect}
.sx-canvas,.sx-poster{position:absolute;inset:0;width:100%;height:100%}
.sx-poster{object-fit:cover}
.sx.ready .sx-poster{visibility:hidden}

/* the pulsing marker on the part being described */
.sx-dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;opacity:0;transform:scale(.4);
  transition:left .6s var(--ease),top .6s var(--ease),opacity .4s,transform .4s;box-shadow:0 0 0 0 rgba(255,255,255,.5)}
.sx-dot.on{opacity:1;transform:scale(1);animation:sxPulse 1.8s infinite}
@keyframes sxPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}70%{box-shadow:0 0 0 16px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

.sx-intro{position:absolute;top:84px;inset-inline:0;text-align:center;transition:opacity .5s,transform .5s}
.sx-kicker{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#9a968e}
.sx-intro h2{font-size:clamp(30px,3.6vw,52px);font-weight:300;letter-spacing:-.02em;margin-top:8px}
.sx-hint{margin-top:10px;font-size:13.5px;color:#9a968e}
.sx-hint::after{content:"";display:block;width:1px;height:28px;margin:12px auto 0;background:linear-gradient(#9a968e,transparent);animation:sxHint 1.6s infinite}
@keyframes sxHint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.sx.past-intro .sx-intro{opacity:0;transform:translateY(-14px);pointer-events:none}

/* part captions sit on the floor below the bike: number, hairline, then the words */
.sx-parts{position:absolute;bottom:clamp(84px,11vh,112px);inset-inline:0;height:120px;pointer-events:none;list-style:none;margin:0;padding:0}
.sx-parts li{position:absolute;bottom:0;width:min(380px,84vw);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;text-align:left;
  transform:translate(-50%,14px);opacity:0;transition:opacity .2s,transform .2s}
/* the outgoing caption leaves first, the next one waits for it */
.sx-parts li.on{opacity:1;transform:translate(-50%,0);transition:opacity .5s .2s,transform .7s .2s var(--ease)}
.sx-parts i{font-style:normal;font-size:42px;font-weight:200;line-height:.9;letter-spacing:-.03em;color:rgba(243,241,236,.38);font-variant-numeric:tabular-nums;
  padding-inline-end:18px;border-inline-end:1px solid rgba(243,241,236,.18)}
.sx-parts small{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8f8b83}
.sx-parts b{display:block;font-size:clamp(19px,1.55vw,23px);font-weight:400;letter-spacing:-.01em;line-height:1.2;margin-top:7px}
.sx-parts p{font-size:14px;line-height:1.55;color:#b9b5ad;margin-top:6px;text-wrap:pretty}
/* the words rise one after another */
.sx-parts li > div > *{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .6s var(--ease)}
.sx-parts li.on > div > *{opacity:1;transform:none}
.sx-parts li.on > div > *{transition-delay:.2s}
.sx-parts li.on > div > b{transition-delay:.28s}
.sx-parts li.on > div > p{transition-delay:.36s}

/* hairline from the part down to its caption */
.sx-line{position:absolute;width:1px;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.08));transform-origin:top;transform:scaleY(0);transition:transform .6s var(--ease),left .6s var(--ease),top .6s var(--ease),height .6s var(--ease)}
.sx-line.on{transform:scaleY(1)}

.sx-end{position:absolute;bottom:clamp(92px,12vh,120px);inset-inline:0;display:flex;justify-content:center;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s;pointer-events:none}
.sx.at-end .sx-end{opacity:1;transform:none;pointer-events:auto}
.sx-cta{height:52px;padding-inline:26px;background:#f3f1ec;color:#0b0a0d;border-color:#f3f1ec}
.sx-cta:hover{background:#fff}
.sx-cta svg{width:18px;height:18px}

.sx-ticks{position:absolute;inset-inline-end:clamp(10px,2.4vw,32px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .4s}
.sx-ticks button{width:24px;height:30px;display:grid;place-items:center}
.sx-ticks button::before{content:"";width:2px;height:22px;background:rgba(255,255,255,.18);transition:background .3s,width .3s}
.sx-ticks button:hover::before{background:rgba(255,255,255,.6);width:3px}
.sx-ticks button.on::before{background:#fff}
.sx.in-parts .sx-ticks{opacity:1;pointer-events:auto}

/* let people out at any point */
.sx-skip{position:absolute;top:84px;inset-inline-end:clamp(16px,3vw,40px);display:flex;align-items:center;gap:6px;font-size:13px;color:#b9b5ad;padding:8px 4px;opacity:0;pointer-events:none;transition:opacity .4s,color .2s}
.sx-skip svg{width:14px;height:14px}
.sx-skip:hover{color:#fff}
.sx.past-intro:not(.at-end) .sx-skip{opacity:1;pointer-events:auto}

@media (max-width:767px){
  /* on a phone the stage is a compact card pinned under the header, not the whole screen */
  /* card is centred in the screen (below the header) and tall enough that little paper shows around it */
  .sx{height:560vh;background:transparent}
  .sx-stage{--h:min(520px,calc(100svh - 230px));height:var(--h);top:calc((100svh - 70px - var(--h)) / 2 + 34px);
    display:flex;flex-direction:column;justify-content:center;margin:0 12px;border-radius:14px;background:#0e0d10;padding:64px 0 112px}
  .sx-media{width:118%;margin-inline:-9%}
  .sx-intro{top:20px;padding-inline:16px}
  .sx-kicker{font-size:11px}
  .sx-intro h2{font-size:26px;margin-top:4px}
  .sx-hint{display:none}
  .sx-skip{top:10px;inset-inline-end:12px}
  .sx-parts{height:112px;bottom:16px}
  .sx-parts li{left:50% !important;width:calc(100% - 32px);gap:14px}
  .sx-parts i{font-size:30px;padding-inline-end:14px}
  .sx-parts b{font-size:18px}
  .sx-parts p{font-size:13px}
  .sx-end{bottom:44px}
  .sx-line{display:none}
  .sx-ticks{display:none}
}

/* no scroll animation: show the exploded bike and every caption */
@media (prefers-reduced-motion:reduce){
  .sx{height:auto;padding-block:64px}
  .sx-stage{position:relative;height:auto;display:block;padding:0}
  .sx-media{margin-inline:auto}
  .sx-canvas,.sx-dot,.sx-ticks,.sx-hint,.sx-line,.sx-skip{display:none}
  .sx-intro{position:static;margin-bottom:12px}
  .sx-parts{position:static;height:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;padding:24px 16px 0;max-width:1200px;margin-inline:auto}
  .sx-parts li{position:static;opacity:1;transform:none;width:auto}
  .sx-parts li > div > *{opacity:1;transform:none}
  .sx-end{position:static;opacity:1;transform:none;pointer-events:auto;margin-top:32px}
}

/* home: the name stays on top through the whole ride; the end shows price and the way to the SL page */
.sx-home .sx-intro h2{font-weight:400;letter-spacing:-.01em}
.sx-home.past-intro .sx-intro{opacity:1;transform:none}
.sx-home.past-intro .sx-hint{opacity:0}
.sx-home .sx-hint{transition:opacity .4s}
.sx-home .sx-end{flex-direction:column;align-items:center;gap:14px}
.sx-price{display:flex;align-items:baseline;gap:10px;font-variant-numeric:tabular-nums;color:#c9c5bd;font-size:14px}
.sx-price b{font-size:22px;font-weight:500;color:#f3f1ec}
.sx-price s{color:#8f8b83}
@media (max-width:767px){
  .sx-home .sx-end{bottom:24px;gap:10px}
  .sx-price b{font-size:19px}
}

/* rest points: a gentle flick settles on the next step instead of racing past several */
html:has(.sx){scroll-snap-type:y proximity}
.sx-snap{position:absolute;inset-inline:0;height:1px;scroll-snap-align:start;pointer-events:none}
@media (prefers-reduced-motion:reduce){ html:has(.sx){scroll-snap-type:none} .sx-snap{display:none} }