/* Scroll-driven deck + rise-in (founder 2026-11-16: "make all of these cards scroll-based trigger").
   Desktop only and only with motion allowed; otherwise it falls back to a static list. */

/* ── static fallback (phones, reduced motion, no JS) ── */
.deckscroll { padding: 40px 20px; }
.deckscroll .stage { display: grid; gap: 64px; max-width: 820px; margin: 0 auto; }
.slide .side { margin-bottom: 18px; }
.slide .side h3 { font-size: 26px; line-height: 1.12; margin-bottom: 10px; }
.slide .side p { margin: 0; color: var(--ink-2); max-width: 300px; line-height: 1.45; }
.slide .deck { border-radius: 28px; aspect-ratio: 4 / 3.4; }
.slide .deck .ask { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
.work .fin { display: none; }
.work .ok { display: none; }

/* ── pinned deck (desktop + motion) ── */
html.motion .deckscroll { height: 340vh; padding: 0; }
html.motion .deckscroll .pin { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
html.motion .deckscroll .stage { position: relative; display: block; width: min(820px, calc(100vw - 2 * 330px)); aspect-ratio: 820 / 515; max-width: none; margin: 0; }
html.motion .slide { position: absolute; inset: 0; }
html.motion .slide .deck { position: absolute; inset: 0; border-radius: 48px; aspect-ratio: auto; will-change: transform; transform-origin: 50% 100%; box-shadow: 0 30px 60px -40px rgba(10,20,60,.5); }
html.motion .slide .side { position: absolute; top: 50%; width: 250px; margin: 0; transform: translateY(-50%); opacity: 0; transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
html.motion .slide .side:not(.r) { right: calc(100% + 44px); }
html.motion .slide .side.r { left: calc(100% + 44px); }
html.motion .slide.on .side { opacity: 1; transform: translateY(-50%); }
html.motion .slide:not(.on) .side { transform: translateY(calc(-50% + 14px)); }

/* the product card inside comes alive when its deck is active */
html.motion .slide .deck > .ui, html.motion .slide .deck > .ask { transition: opacity .5s ease .15s, transform .6s cubic-bezier(.2,.8,.2,1) .15s; }
html.motion .slide:not(.on) .deck > .ui { opacity: 0; transform: translate(-50%, calc(-50% + 22px)); }
html.motion .slide:not(.on) .deck > .ask { opacity: 0; transform: translate(-50%, calc(-50% + 22px)); }
.stt { position: relative; width: 15px; height: 15px; flex: none; display: grid; place-items: center; }
.stt .spin, .stt .ok { grid-area: 1 / 1; }
html.motion .work .r > span { transition: opacity .3s; }
html.motion .work .fin { display: inline; position: absolute; right: 11px; opacity: 0; }
html.motion .work .box { position: relative; }
html.motion .work .ok { display: inline-grid; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s; }
html.motion .work .spin { transition: opacity .3s; }
html.motion .slide.on .work .spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
html.motion .work .wrow.done .spin { opacity: 0; animation: none; }
html.motion .work .wrow.done .ok { opacity: 1; transform: none; }
html.motion .work .wrow.done .busy { opacity: 0; }
html.motion .work .wrow.done .fin { opacity: 1; color: var(--cobalt-text); }
html.motion .loop .l2 { transition: opacity .4s ease .9s, transform .4s ease .9s; }
html.motion .slide:not(.on) .loop .l2 { opacity: 0; transform: translateY(6px); }
html.motion .typed::after { content: ""; display: inline-block; width: 1.5px; height: 15px; background: var(--cobalt); margin-left: 2px; vertical-align: -2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* rise-in for the number collage + how-it-works panels */
html.motion [data-rv] { opacity: 0; translate: 0 28px; transition: opacity .7s ease, translate .8s cubic-bezier(.2,.8,.2,1); }
html.motion [data-rv].in { opacity: 1; translate: 0 0; }