/* Scroll storytelling layer (loaded after ria.css). Effects only switch on when scroll.js adds .sx to <html>,
   i.e. GSAP loaded, motion allowed and the viewport is wide enough; otherwise the page reads as a normal static page. */

.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; pointer-events: none; }

/* hero: 3D phone */
.sx .stage { perspective: 1400px; }
.sx .phone { transform-style: preserve-3d; will-change: transform; }

/* parallax photos: a little overscan so the image can travel inside its frame */
.sx .photo img { scale: 1.14; will-change: transform; }

/* ---------- riaai.me: pinned story ---------- */
.story { background: var(--app); padding: 0; }
.story .pin { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; min-height: 100vh; min-height: 100svh; padding: 96px 0; }
.story .beats { display: grid; gap: 28px; }
.story .beat { border-left: 2px solid var(--line); padding: 4px 0 4px 24px; transition: border-color .3s, opacity .3s; }
.story .beat h3 { font-size: clamp(22px, 2.4vw, 30px); }
.story .beat p { margin: 0; color: var(--muted); }
.story .beat .k { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--subtle); display: block; margin-bottom: 6px; }
.sx .story .beat { opacity: .3; }
.sx .story .beat.on { opacity: 1; border-color: var(--ink); }
.story .stage { height: 660px; }
.story .phone { bottom: auto; top: 0; }
.story [data-at] { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.sx .story [data-at]:not(.show) { opacity: 0; transform: translateY(10px); }
.story .chip.mem { align-self: flex-start; font-size: 12px; padding: 5px 10px; background: var(--surface); }
.story .pick { display: grid; gap: 8px; }
.story .pick div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; font-size: 12.5px; display: flex; justify-content: space-between; gap: 8px; }
.story .pick div.sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* ---------- riaai.biz: horizontal pinned steps ---------- */
.sx .hpin { overflow: hidden; }
.sx .hpin .steps { display: flex; gap: 16px; width: max-content; }
.sx .hpin .steps li { width: min(380px, 70vw); flex: none; min-height: 300px; }

/* ---------- ria.com.ai: 3D network ---------- */
.net { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .9; }
.net canvas { width: 100%; height: 100%; display: block; }

@media (max-width: 1080px) {
  .story .pin { grid-template-columns: 1fr; gap: 40px; padding: 88px 0; }
  .story .stage { max-width: 560px; margin: 0 auto; width: 100%; height: 600px; }
}
@media (prefers-reduced-motion: reduce) { .progress, .net { display: none; } }