/* 14/10/2026 — il sito in movimento: rotaie laterali guidate dallo scroll, video degli esercizi, numeri che contano.
   Tutto si spegne con prefers-reduced-motion e sotto i 760px diventa uno scorrimento a dito con aggancio. */

/* ── Rotaia: la sezione e' alta quanto serve a scorrere la traccia; dentro, una parte appiccicata che trasla ── */
.rail { position: relative; }
.rail-sticky { position: sticky; top: var(--header-h); min-height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; gap: 28px; overflow: hidden; padding: 32px 0; }
.rail-head { max-width: var(--max-w); }
.rail-head h2 { font-family: var(--font-display); font-size: clamp(28px, 4.4vw, 54px); line-height: 1.05; letter-spacing: -0.03em; max-width: 16ch; text-wrap: balance; margin: 12px 0 14px; }
.rail-head p { color: var(--text-muted); max-width: 58ch; font-size: 17px; line-height: 1.6; }
.rail-track { display: flex; gap: 22px; padding: 0 max(24px, calc((100vw - var(--max-w)) / 2 + 24px)); will-change: transform; outline: none; }
.rail-foot { display: flex; align-items: center; gap: 16px; color: var(--text-muted); font-family: var(--font-data); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.rail-bar { flex: 0 0 160px; height: 2px; background: var(--border); border-radius: 2px; overflow: hidden; }
.rail-bar i { display: block; height: 100%; width: 100%; background: var(--gradient); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ── Una clip: video 4:3, numero e nome in mono, bordo che si accende quando e' al centro ── */
.clip { flex: 0 0 clamp(280px, 34vw, 460px); margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); transition: border-color .4s, transform .5s cubic-bezier(.2,.7,.2,1); }
.clip video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-elevated); }
.clip figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; display: flex; align-items: baseline; gap: 12px; font-weight: 600; background: linear-gradient(to top, rgba(4,7,14,.88), transparent); color: #EAF2FF; }
.clip-n { font-family: var(--font-data); font-size: 11px; letter-spacing: .1em; color: var(--cyan-hi); }
.clip.on { border-color: rgba(34,211,238,.55); box-shadow: 0 0 0 1px rgba(139,92,246,.25), 0 24px 60px -24px var(--glow-cyan); }

/* ── Le schermate diventano una rotaia anche loro (stessa meccanica, telefoni in fila) ── */
.screenshots-grid.shots-rail { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 22px; scrollbar-width: thin; outline: none; }
.screenshots-grid.shots-rail .shot-item { flex: 0 0 clamp(200px, 22vw, 260px); scroll-snap-align: center; }
.shots-rail .shot-item .phone-frame { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.shots-rail .shot-item:hover .phone-frame { transform: translateY(-8px) rotateX(4deg); }

/* ── Numeri che contano ── */
.stat-num.contando { font-variant-numeric: tabular-nums; }

/* ── Telefono e mani: niente rotaia guidata, si scorre col dito con aggancio ── */
@media (max-width: 760px) {
  .rail { height: auto !important; }
  .rail-sticky { position: relative; top: 0; min-height: 0; }
  .rail-track { overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important; padding: 0 16px 6px; }
  .clip { flex-basis: 82vw; scroll-snap-align: center; }
  .rail-foot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rail { height: auto !important; }
  .rail-sticky { position: relative; top: 0; min-height: 0; }
  .rail-track { overflow-x: auto; transform: none !important; }
  .clip, .shots-rail .shot-item .phone-frame { transition: none; }
  .rail-foot { display: none; }
}

/* focus visibile per chi naviga da tastiera */
.rail-track:focus-visible, .shots-rail:focus-visible { box-shadow: 0 0 0 2px var(--cyan-hi); border-radius: var(--radius); }