/* Story: the v2 spine (13 Aug design, Omer's pick) with the v3 live demos. Plain
   scrolling, no pinning: a line runs down the middle, the diamond follows the 55%
   line of the viewport and fills the line behind it, and the station it passes
   lights up and plays its section of the panel. Stations alternate sides. */

.tl-over{position:absolute;top:0;bottom:0;left:34px;right:8px;pointer-events:none}
.tl-over .playhead{left:0;transition:transform .38s var(--ease)}

.spine-zone{position:relative;max-width:1180px;margin:0 auto;padding:0 24px}
.spine{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:var(--line-soft)}
.spine .fill{position:absolute;left:0;top:0;width:100%;height:0;
             background:linear-gradient(180deg,var(--vio-2),var(--vio));box-shadow:0 0 14px rgba(139,108,255,.5)}
.ph{position:absolute;left:50%;top:0;z-index:5;width:15px;height:15px;border-radius:3px;background:var(--vio);
    transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 0 5px rgba(139,108,255,.15),0 0 26px rgba(139,108,255,.8)}

.station{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center;padding:64px 0;position:relative}
.station .txt,.station .ui{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.station .txt{opacity:.45;transform:translateY(10px)}
.station .ui{opacity:.45;transform:translateY(14px) scale(.985)}
.station.lit .txt,.station.lit .ui{opacity:1;transform:none}
.station:nth-child(odd) .txt{order:2}

.screen{position:relative;min-width:0}
.screen > .kp{box-shadow:0 30px 80px -30px rgba(0,0,0,.8);transform-origin:top left}

.station .kicker{font-family:var(--mono);font-size:12.5px;color:var(--vio-2);letter-spacing:.06em;margin-bottom:12px}
.station h3{font-size:clamp(24px,2.3vw,32px);letter-spacing:-.02em;line-height:1.12}
.station .txt > p{color:var(--dim);font-size:16px;margin-top:14px;max-width:46ch}
.feats{display:grid;margin-top:18px;max-width:48ch}
.feat{grid-area:1 / 1;padding:16px 18px;border-radius:var(--r-card);background:var(--sheet);border:1px solid var(--line);
      opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.feat.on{opacity:1;transform:none}
.feat b{display:block;font-size:15px;margin-bottom:6px}
.feat b::before{content:"";display:inline-block;width:8px;height:8px;background:var(--vio);transform:rotate(45deg);margin:0 10px 1px 2px}
.feat p{color:var(--dim);font-size:15px;line-height:1.55}

@media (max-width:880px){
  .spine,.ph{left:14px}
  .station{grid-template-columns:minmax(0,1fr);gap:22px;padding:44px 0 44px 40px}
  .station:nth-child(odd) .txt{order:0}
}
@media (prefers-reduced-motion:reduce){
  .station .txt,.station .ui{opacity:1;transform:none}
  .ph{display:none}
  .spine .fill{height:100%}
}