/* =========================================================================
   FPS ITALIA — Livello "TELEMETRIA"
   Il linguaggio visivo del sim racing: cronometri, gauge, tracciati, settori.
   Tutto CSS-first. Rispetta prefers-reduced-motion. Zero librerie.
   ========================================================================= */

:root {
	--tel-green: #3ddc84;   /* settore migliore, come nei sim */
	--tel-purple: #b47cff;  /* giro record */
	--tel-line: rgba(234, 85, 42, .55);
}

/* ---- 1. Barra di progresso lettura (stile cronometro) ------------------- */
.fps-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200;
	background: transparent; pointer-events: none;
}
.fps-progress__bar {
	height: 100%; width: 0%;
	background: linear-gradient(90deg, var(--brand), var(--brand-300));
	box-shadow: 0 0 12px var(--brand-glow);
	transition: width .1s linear;
}

/* ---- 2. Rivelazioni: tendina che scorre (non il solito fade) ------------ */
.js .tel-reveal {
	opacity: 0; transform: translateY(22px);
	transition: opacity .62s var(--ease-out), transform .62s var(--ease-out);
}
.js .tel-reveal.is-in { opacity: 1; transform: none; }

/* =========================================================================
   L'HERO NON ASPETTA IL JAVASCRIPT.

   Questa era la cosa piu' costosa di tutta la home, e non si vedeva a occhio.
   Le rivelazioni partono da `opacity: 0` e diventano visibili quando fx.js
   aggiunge `is-in`. Per quello che sta sotto va benissimo. Ma il paragrafo
   dell'hero e' il pezzo di pagina PIU' GRANDE che il browser disegna: e'
   quello che Google cronometra come "LCP". Tenendolo nascosto fino allo
   script, il cronometro segnava 3,1 secondi mentre il testo era gia' pronto
   nell'HTML dal primo istante — misurato: 2,4 secondi di sola attesa, il 78%
   del punteggio.

   Qui l'hero si disegna appena arriva il CSS. L'animazione d'ingresso resta,
   ma la fa il CSS da solo, in mezzo secondo, senza chiedere il permesso a
   nessuno. Sotto l'hero non cambia niente: li' la rivelazione allo scorrimento
   ha senso, perche' nessuno la sta guardando.
   ====================================================================== */
/* L'animazione muove SOLO la posizione, mai la trasparenza: un testo a
   `opacity: 0`, per il cronometro di Google, è un testo che non c'è ancora.
   Scorrendo di dieci pixel l'ingresso si vede lo stesso, ma il primo fotogramma
   è già leggibile. */
.js .fps-hero .tel-reveal {
	opacity: 1;
	transform: none;
	transition: none;
	animation: fps-hero-entra .5s var(--ease-out) both;
}
.js .fps-hero .tel-wipe > span {
	transform: none;
	transition: none;
	animation: fps-hero-entra .5s var(--ease-out) both;
}
.js .fps-hero .tel-reveal[data-d="2"],
.js .fps-hero .tel-wipe > span { animation-delay: .05s; }
.js .fps-hero .tel-reveal[data-d="3"] { animation-delay: .11s; }
.js .fps-hero .tel-reveal[data-d="4"] { animation-delay: .17s; }
@keyframes fps-hero-entra {
	from { transform: translateY(12px); }
	to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.js .fps-hero .tel-reveal, .js .fps-hero .tel-wipe > span { animation: none; }
}
/* stagger automatico dei figli */
.js .tel-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.js .tel-stagger.is-in > * { opacity: 1; transform: none; }
/* già in vista all'apertura: nessuna dissolvenza, solo mobile (v. main.css) */
@media (max-width: 900px) {
	.js .tel-reveal.is-subito, .js .tel-stagger.is-subito > *,
	.js .tel-wipe.is-subito, .js .tel-spec.is-subito { transition: none; }
}
.js .tel-stagger.is-in > *:nth-child(1) { transition-delay: .04s; }
.js .tel-stagger.is-in > *:nth-child(2) { transition-delay: .10s; }
.js .tel-stagger.is-in > *:nth-child(3) { transition-delay: .16s; }
.js .tel-stagger.is-in > *:nth-child(4) { transition-delay: .22s; }
.js .tel-stagger.is-in > *:nth-child(5) { transition-delay: .28s; }
.js .tel-stagger.is-in > *:nth-child(6) { transition-delay: .34s; }

/* Titolo che si svela dietro una maschera (come un tabellone) */
.js .tel-wipe { overflow: hidden; }
.js .tel-wipe > span { display: inline-block; transform: translateY(105%); transition: transform .8s var(--ease-out); }
.js .tel-wipe.is-in > span { transform: none; }

/* ---- 3. Etichetta dati (font tabellare, da telemetria) ------------------ */
.tel-data {
	font-variant-numeric: tabular-nums; letter-spacing: .02em;
	font-feature-settings: "tnum" 1;
}
.tel-label {
	display: inline-flex; align-items: flex-start; gap: 7px;
	font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
	color: var(--text-3);
}
.tel-label::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; margin-top: .5em; border-radius: 50%; background: var(--brand-btn); box-shadow: 0 0 8px var(--brand); }

/* ---- 4. Tracciato animato: divisore di sezione -------------------------- */
/* Il divisore ha aria sopra e sotto, ma la sezione che segue non deve
   aggiungere il suo padding: altrimenti si apre un vuoto di 200px. */
/* IL LAMPO SUL DIVISORE SI MUOVE CON `transform`, NON CON `left`.
 *
 * Era: `@keyframes tel-sweep { 0% { left: -10% } 100% { left: 100% } }`, in
 * ciclo infinito. Sembra identico a vedersi, ma per il browser sono due cose
 * lontanissime: `left` cambia la POSIZIONE nell'impaginazione, quindi ogni
 * fotogramma va ricalcolato dal processore principale — venti volte al
 * secondo, per sempre, anche quando nessuno sta guardando.
 *
 * E' questo che faceva fallire PageSpeed con "the page took too long to load
 * (No CPU idle period)": lo strumento aspetta un momento in cui il processore
 * respiri per poter misurare, e quel momento non arrivava mai.
 *
 * Con `transform` il movimento lo fa la scheda video su un livello suo: il
 * processore principale non viene disturbato e puo' stare fermo.
 * Il divisore ora e' alto 3px con la riga disegnata dentro e `overflow:hidden`,
 * cosi' il lampo puo' uscire di scena a destra senza mostrarsi fuori.
 */
.tel-track {
	position: relative; height: 3px; margin: clamp(40px, 5.5vw, 64px) 0 0; border: 0;
	overflow: hidden; background-color: transparent;
	background-image: linear-gradient(var(--line), var(--line));
	background-size: 100% 1px; background-position: 0 1px; background-repeat: no-repeat;
}
.tel-track + .fps-sec { padding-top: clamp(40px, 5.5vw, 64px); }
.tel-track::after {
	content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 88px; border-radius: 3px;
	background: linear-gradient(90deg, transparent, var(--brand), transparent);
	animation: tel-sweep 4.5s linear infinite;
}
@keyframes tel-sweep { from { transform: translateX(-100px); } to { transform: translateX(100vw); } }

/* ---- 5. Card con inclinazione 3D + luce che segue il cursore ------------ */
.tel-tilt { transform-style: preserve-3d; will-change: transform; transition: transform .35s var(--ease); }
.tel-tilt__glare {
	position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 3;
	background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .16), transparent 62%);
	transition: opacity .25s var(--ease); border-radius: inherit;
}
.tel-tilt:hover .tel-tilt__glare { opacity: 1; }
@media (hover: none) { .tel-tilt { transform: none !important; } .tel-tilt__glare { display: none; } }

/* ---- 6. Bottone: scia di velocità -------------------------------------- */
.fps-btn--primary { isolation: isolate; }
.fps-btn--primary::before {
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
	background: radial-gradient(120px circle at var(--bx, 50%) var(--by, 50%), rgba(255, 255, 255, .22), transparent 60%);
	transition: opacity .25s var(--ease);
}
.fps-btn--primary:hover::before { opacity: 1; }

/* ---- 7. Numero da cronometro (per le statistiche) ---------------------- */
.tel-num {
	font-family: var(--font-head); font-weight: 900; letter-spacing: -.03em;
	font-variant-numeric: tabular-nums; line-height: 1;
	background: linear-gradient(180deg, var(--text) 40%, var(--text-2));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.tel-num em { font-style: normal; color: var(--brand); -webkit-text-fill-color: var(--brand); }

/* ---- 8. Griglia tecnica di sfondo (riutilizzabile) --------------------- */
.tel-grid-bg { position: relative; }
.tel-grid-bg::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
	background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(circle at 50% 0%, #000, transparent 72%);
	mask-image: radial-gradient(circle at 50% 0%, #000, transparent 72%);
}

/* ---- 9. Specifiche in evidenza (blocco "telemetria prodotto") ---------- */
.tel-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tel-spec { background: var(--ink-800); padding: 18px 18px 16px; position: relative; overflow: hidden; }
.tel-spec::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--brand-btn); transition: transform .5s var(--ease); }
.tel-spec.is-in::after { transform: scaleX(1); }
.tel-spec__k { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.tel-spec__v { font-family: var(--font-head); font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: var(--text); }
.tel-spec__v small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 12.5px; color: var(--text-3); margin-top: 4px; letter-spacing: 0; }

/* ---- 10. Marcatore "settore" per le sezioni --------------------------- */
.tel-sector { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tel-sector__n {
	width: 26px; height: 26px; flex: 0 0 auto; border-radius: 7px;
	display: grid; place-items: center; font-family: var(--font-head); font-weight: 900; font-size: 12px;
	background: var(--brand-soft); color: var(--brand-300); box-shadow: inset 0 0 0 1px rgba(234, 85, 42, .32);
}

/* ---- Rispetto del movimento ridotto ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.tel-track::after { animation: none; }
	.js .tel-reveal, .js .tel-stagger > *, .js .tel-wipe > span { opacity: 1 !important; transform: none !important; transition: none !important; }
	.tel-tilt { transform: none !important; }
	.fps-progress { display: none; }
}