/* ==========================================================================
   Pagina Kart, testata "kart che gira" (richiesta del cliente 20/10/2026):
   video del giro del kart su fondo verde, scontornato e reso a fotogrammi
   (assets/media/t4/seq/kart-spin/d = 1600px, m = 800px, 61 WebP con alfa).
   - .t4ksp          sezione; con .is-anim (messa da uno script in linea
                     prima del disegno) è alta: il palco resta fermo e lo
                     scroll fa girare il kart (t4-kart-spin.js)
   - .t4ksp__stage   palco a tutto schermo: sticky senza smoother; con lo
                     smoother del tema (da 992px, .is-st) lo aggancia
                     ScrollTrigger, sticky lì non funziona
   - .t4ksp__body    titolo, kart, testo e bottoni in colonna: è anche lo
                     stato finale e quello senza JS / "riduci movimento"
   Token e .t4-pill da t4-fx.css. Misure in px con clamp(): la root del tema
   cambia valore con la larghezza (12px a 1000-1699, 16px sotto i 992px).
   ========================================================================== */
.t4ksp {
  --t4ksp-gut: max(18px, 4.8vw);
  background: var(--t4-navy);
  box-sizing: border-box;
  color: #fff;
  position: relative;
}
.t4ksp * { box-sizing: border-box; }
/* corsa dello scroll: un palco + 170% (da telefono + 110%), in svh così la
   barra degli indirizzi che compare e sparisce non cambia la lunghezza */
.t4ksp.is-anim { height: calc(100vh + 170vh); height: calc(100svh + 170svh); }
@media (max-width: 767px) {
  .t4ksp.is-anim { height: calc(100vh + 110vh); height: calc(100svh + 110svh); }
}

.t4ksp__stage {
  display: flex;
  flex-direction: column;
  isolation: isolate;
  justify-content: center;
  min-height: max(560px, 100vh);
  min-height: max(560px, 100svh);
  overflow: hidden;
  padding: 118px var(--t4ksp-gut) 78px;
  position: relative;
}
.t4ksp.is-anim .t4ksp__stage { height: 100vh; height: 100svh; min-height: 0; position: sticky; top: 0; }
.t4ksp.is-anim.is-st .t4ksp__stage { position: relative; }

/* trama di croci "+" (come il selettore kart) e un alone blu sotto il kart */
.t4ksp__stage::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 23v10M23 28h10' stroke='%2386a0ff' stroke-opacity='.22' stroke-width='1'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 56px 56px;
  content: "";
  inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 72% 58% at 50% 52%, #000 22%, transparent 82%);
  mask-image: radial-gradient(ellipse 72% 58% at 50% 52%, #000 22%, transparent 82%);
  pointer-events: none;
  position: absolute;
  z-index: -2;
}
.t4ksp__stage::after {
  background:
    radial-gradient(ellipse 42% 26% at 50% 56%, rgba(36, 72, 216, .34), rgba(36, 72, 216, 0) 72%),
    linear-gradient(180deg, rgba(14, 20, 48, .55) 0%, rgba(14, 20, 48, 0) 18%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.t4ksp__crumb {
  display: flex;
  font-family: var(--t4-mono);
  font-size: 12px;
  gap: 8px;
  left: var(--t4ksp-gut);
  letter-spacing: .1em;
  opacity: .78;
  position: absolute;
  text-transform: uppercase;
  top: 112px;
  z-index: 2;
}
.t4ksp__crumb a { color: inherit; text-decoration: none; }
.t4ksp__crumb a:hover { color: #fff; text-decoration: underline; }

.t4ksp__body {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.4vh, 28px);
  margin: 0 auto;
  max-width: 1400px;
  position: relative;
  text-align: center;
  width: 100%;
}
.t4ksp__title {
  color: #fff;
  font-family: var(--t4-head);
  font-size: clamp(44px, 6.4vw, 104px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: .88;
  margin: 0;
  position: relative;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 0;
}
.t4ksp__kart {
  aspect-ratio: 1600 / 504;
  margin: 0;
  position: relative;
  /* largo quanto serve, ma lascia posto a titolo, testo e bottoni in altezza */
  width: min(100%, 1320px, max(320px, (100vh - 470px) * 3.17));
  width: min(100%, 1320px, max(320px, (100svh - 470px) * 3.17));
  z-index: 1;
}
.t4ksp__kart img, .t4ksp__kart canvas { display: block; height: 100%; inset: 0; position: absolute; width: 100%; }
.t4ksp__kart.has-seq img { visibility: hidden; }
.t4ksp__lead {
  font-family: var(--t4-mono);
  font-size: clamp(14px, 13px + .2vw, 17px);
  line-height: 1.55;
  margin: 0;
  max-width: 52ch;
  opacity: .88;
  position: relative;
  z-index: 2;
}
.t4ksp__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; position: relative; z-index: 2; }
.t4ksp__hint { bottom: 22px; left: 50%; position: absolute; transform: translateX(-50%); z-index: 2; }
/* testata ferma: i bottoni sono già lì, "Scorri" finiva loro addosso sugli schermi bassi */
.t4ksp:not(.is-anim) .t4ksp__hint { display: none; }

/* da telefono il kart esce un po' dai lati (il palco taglia): il giro sposta
   il kart nel riquadro e a tutta larghezza sarebbe rimasto piccolo */
@media (max-width: 767px) {
  .t4ksp__stage { padding-bottom: 72px; padding-top: 104px; }
  .t4ksp__crumb { top: 96px; }
  .t4ksp__body { gap: clamp(16px, 3.4vh, 36px); }
  .t4ksp__title { font-size: clamp(36px, 12.5vw, 64px); }
  .t4ksp__kart { max-width: none; width: 116vw; }
  .t4ksp__cta { width: 100%; }
  .t4ksp__cta .t4-pill { flex: 1 1 100%; justify-content: space-between; }
}

/* durante l'animazione: trasformazioni dal JS (variabili), bottoni sempre
   visibili se ci si arriva con la tastiera */
.t4ksp.is-anim .t4ksp__title, .t4ksp.is-anim .t4ksp__kart { will-change: transform; }
.t4ksp.is-anim .t4ksp__lead, .t4ksp.is-anim .t4ksp__cta { will-change: opacity, transform; }
.t4ksp.is-anim .t4ksp__body:focus-within .t4ksp__lead,
.t4ksp.is-anim .t4ksp__body:focus-within .t4ksp__cta { opacity: 1 !important; transform: none !important; }

/* senza animazione (niente JS, "riduci movimento", Risparmio dati): testata
   normale con il fotogramma di tre quarti e un ingresso morbido */
@media (prefers-reduced-motion: no-preference) {
  .t4ksp:not(.is-anim) .t4ksp__body > * { animation: t4ksp-up .9s var(--t4-ease-out) both; }
  .t4ksp:not(.is-anim) .t4ksp__body > :nth-child(2) { animation-delay: .08s; }
  .t4ksp:not(.is-anim) .t4ksp__body > :nth-child(3) { animation-delay: .16s; }
  .t4ksp:not(.is-anim) .t4ksp__body > :nth-child(4) { animation-delay: .24s; }
}
@keyframes t4ksp-up { from { opacity: 0; transform: translateY(24px); } }