/* ScaleSquad — movimento. Regole di Emil Kowalski (skill apple-design/animate):
   molla critica di base (nessun rimbalzo), rimbalzo solo dopo un gesto con slancio.
   NON tocca colori, palette o spaziature: qui dentro si animano SOLO transform e opacity.
   Senza JavaScript la pagina resta identica e leggibile: le comparse usano la timeline
   di scorrimento del CSS, e dove non e' supportata semplicemente non accade nulla. */

:root{
	/* Un solo vocabolario, riusato ovunque: se cambia qui, cambia in tutto il sito. */
	--scsq-ease-out:cubic-bezier(0.23, 1, 0.32, 1);
	--scsq-ease-io:cubic-bezier(0.77, 0, 0.175, 1);
	--scsq-t-press:140ms;   /* risposta al tocco */
	--scsq-t-ui:200ms;      /* micro cambi di stato */
	--scsq-t-panel:320ms;   /* pannelli, pillola */
}

/* ------------------------------------------------------------------
   1. Risposta al tocco. Oggi il bottone risponde solo al passaggio del
   mouse: su telefono non succede niente. Lo scatto verso l'interno e' il
   segnale che l'interfaccia ha sentito il dito.
   Nota: `transition:.16s` nel foglio principale animava OGNI proprieta',
   compresi sfondo e ombra. Qui si restringe a transform, che e' l'unica
   che non fa ridisegnare la pagina.
------------------------------------------------------------------ */
.scsq-btn,
.scsq-seg button{
	transition:transform var(--scsq-t-press) var(--scsq-ease-out),
	           background-color var(--scsq-t-ui) linear,
	           border-color var(--scsq-t-ui) linear,
	           color var(--scsq-t-ui) linear;
	will-change:transform;
}
.scsq-btn:active,
.scsq-seg button:active{ transform:scale(.97); }
.scsq-btn--lg:active{ transform:scale(.98); }   /* piu' grande e' l'elemento, meno scala */

/* Il sollevamento al passaggio del mouse solo dove un mouse c'e' davvero:
   su touch resterebbe appiccicato dopo il tocco (regola della skill mobile-native). */
@media (hover:hover) and (pointer:fine){
	.scsq-btn--primary:hover{ transform:translateY(-1px); }
	.scsq-agent:hover{ transform:translateY(-3px); }
}
@media not all and (hover:hover){
	.scsq-agent:active{ transform:scale(.99); transition:transform var(--scsq-t-press) var(--scsq-ease-out); }
}

/* ------------------------------------------------------------------
   2. Le sezioni che entrano, SENZA una riga di JavaScript.
   `animation-timeline: view()` lega l'animazione allo scorrimento: il browser
   la esegue da solo, fuori dal filo principale. Se il browser non la conosce,
   la regola viene ignorata e il contenuto e' li', visibile. E' l'opposto del
   difetto che ci e' gia' costato una pagina invisibile al 69%.
------------------------------------------------------------------ */
@supports (animation-timeline: view()){
	@media (prefers-reduced-motion: no-preference){
		.scsq-sec-head,
		.scsq-agent,
		.scsq-how__card,
		.scsq-plan,
		.scsq-band{
			animation:scsq-enter linear both;
			animation-timeline:view();
			animation-range:entry 0% cover 32%;
		}
		/* La scalinata nella griglia: ogni scheda entra un soffio dopo la precedente.
		   Non e' un ritardo (bloccherebbe il tocco), e' una fetta diversa di scorrimento. */
		.scsq-agent:nth-child(2){ animation-range:entry 3% cover 35%; }
		.scsq-agent:nth-child(3){ animation-range:entry 6% cover 38%; }
		.scsq-agent:nth-child(4){ animation-range:entry 9% cover 41%; }
		.scsq-how__card:nth-child(2){ animation-range:entry 4% cover 36%; }
		.scsq-plan:nth-child(2){ animation-range:entry 4% cover 36%; }
	}
}
@keyframes scsq-enter{
	from{ opacity:0; transform:translateY(24px) scale(.98); }
	to  { opacity:1; transform:none; }
}

/* ------------------------------------------------------------------
   3. Il prezzo che cambia. Oggi il numero viene riscritto e si teletrasporta:
   e' il momento in cui il visitatore sta decidendo, e non capisce se ha
   cambiato qualcosa. Il numero esce in alto ed entra dal basso, 180ms.
   Le classi le mette pricing.js; senza JavaScript il prezzo resta quello scritto.
------------------------------------------------------------------ */
.scsq-num,
.scsq-per,
.scsq-amount-sub{
	transition:opacity 150ms var(--scsq-ease-out), transform 150ms var(--scsq-ease-out);
}
.scsq-amount.is-swapping .scsq-num,
.scsq-amount.is-swapping .scsq-per{ opacity:0; transform:translateY(-6px); }
.scsq-amount.is-entering .scsq-num,
.scsq-amount.is-entering .scsq-per{ opacity:0; transform:translateY(6px); }

/* Le righe «solo gestito» comparivano e sparivano di colpo dentro l'elenco. */
.scsq-managed-only{
	transition:opacity var(--scsq-t-ui) var(--scsq-ease-out), transform var(--scsq-t-ui) var(--scsq-ease-out);
}
.scsq-managed-only.is-hidden{ opacity:0; transform:translateY(-4px); }

/* ------------------------------------------------------------------
   4. La pillola del selettore. Oggi lo sfondo salta da un bottone all'altro.
   La pillola la crea pricing.js e scorre: un solo oggetto che si sposta,
   invece di due che si accendono e spengono. Senza JavaScript resta il
   comportamento di prima, che funziona lo stesso.
------------------------------------------------------------------ */
.scsq-seg{ position:relative; isolation:isolate; }
.scsq-seg__pill{
	position:absolute; top:.28rem; bottom:.28rem; left:0; z-index:-1;
	border-radius:999px; background:var(--scsq-grad);
	transform:translateX(var(--scsq-pill-x,0)) ;
	width:var(--scsq-pill-w,0);
	transition:transform var(--scsq-t-panel) var(--scsq-ease-out),
	           width var(--scsq-t-panel) var(--scsq-ease-out);
}
.scsq-seg.has-pill button.on{ background:transparent; }
.scsq-seg__pill.is-first{ transition:none; }  /* la prima posa non si anima */

/* ------------------------------------------------------------------
   5. Il salto al capitolo. I collegamenti del menu puntano a #agenti, #come,
   #prezzi: lo scorrimento morbido e' CSS, e si ferma sotto l'intestazione
   appiccicata invece di finirci dietro.
------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference){
	html{ scroll-behavior:smooth; }
}
:target,
#agenti,#come,#prezzi{ scroll-margin-top:5.5rem; }

/* ------------------------------------------------------------------
   6. Chi ha chiesto meno animazioni. Non si spegne tutto (sparire di colpo
   e' anch'esso un movimento): si tolgono spostamenti e scale, restano le
   dissolvenze brevi.
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
	.scsq-btn:active,.scsq-seg button:active,.scsq-agent:active{ transform:none; }
	.scsq-seg__pill{ transition:opacity var(--scsq-t-ui) linear; }
	.scsq-amount.is-swapping .scsq-num,
	.scsq-amount.is-swapping .scsq-per,
	.scsq-amount.is-entering .scsq-num,
	.scsq-amount.is-entering .scsq-per{ transform:none; }
	html{ scroll-behavior:auto; }
}
/* Il pannello di accessibilita' del nostro stack: se l'utente spegne le
   animazioni da li', vale come l'impostazione di sistema. */
.gaw-a11y-noanim .scsq-seg__pill,
.gaw-a11y-noanim .scsq-num,
.gaw-a11y-noanim .scsq-per{ transition:none; }
.gaw-a11y-noanim .scsq-btn:active,
.gaw-a11y-noanim .scsq-agent:active{ transform:none; }

/* ==================================================================
   SECONDA PASSATA — le cose che si notano.
   Stessa disciplina: nessun colore nuovo, solo transform e opacity.
   ================================================================== */

/* 7. L'hero che si presenta. La classe .scsq-entra la mette motion.js: senza
   JavaScript il titolo e' fermo, intero e leggibile (non parte da trasparente). */
@media (prefers-reduced-motion: no-preference){
	.scsq-hero.scsq-entra .scsq-eyebrow,
	.scsq-hero.scsq-entra .scsq-hero__title,
	.scsq-hero.scsq-entra .scsq-hero__sub,
	.scsq-hero.scsq-entra .scsq-cta-row,
	.scsq-hero.scsq-entra .scsq-chips,
	.scsq-hero.scsq-entra .scsq-stage{
		animation:scsq-entra-su 620ms var(--scsq-ease-out) both;
	}
	/* Non tutti insieme: il titolo per primo, poi quello che lo accompagna.
	   40ms fra una cosa e l'altra, abbastanza da leggersi come un ordine. */
	.scsq-hero.scsq-entra .scsq-eyebrow{ animation-delay:40ms }
	.scsq-hero.scsq-entra .scsq-hero__title{ animation-delay:90ms }
	.scsq-hero.scsq-entra .scsq-hero__sub{ animation-delay:170ms }
	.scsq-hero.scsq-entra .scsq-cta-row{ animation-delay:230ms }
	.scsq-hero.scsq-entra .scsq-chips{ animation-delay:290ms }
	.scsq-hero.scsq-entra .scsq-stage{ animation:scsq-entra-scala 900ms var(--scsq-ease-out) both; animation-delay:60ms }
}
@keyframes scsq-entra-su{
	from{ opacity:0; transform:translateY(16px) }
	to  { opacity:1; transform:none }
}
@keyframes scsq-entra-scala{
	from{ opacity:0; transform:scale(.94) }
	to  { opacity:1; transform:none }
}

/* 8. L'intestazione si stringe mentre scendi. Legata allo scorrimento dal CSS:
   nessuno script che ascolta, nessun calcolo a ogni scatto. */
@supports (animation-timeline: scroll()){
	@media (prefers-reduced-motion: no-preference){
		.scsq-brand{
			animation:scsq-brand-stringi linear both;
			animation-timeline:scroll(root block);
			animation-range:0 220px;
			transform-origin:left center;
		}
	}
}
@keyframes scsq-brand-stringi{
	from{ transform:none }
	to  { transform:scale(.88) }
}

/* 9. Le voci dei due riquadri «come funziona» entrano una dopo l'altra mentre
   la sezione sale. Sempre timeline di scorrimento: zero JavaScript. */
@supports (animation-timeline: view()){
	@media (prefers-reduced-motion: no-preference){
		.scsq-how__card li{
			animation:scsq-riga linear both;
			animation-timeline:view();
			animation-range:entry 12% cover 30%;
		}
		.scsq-how__card li:nth-child(2){ animation-range:entry 15% cover 32% }
		.scsq-how__card li:nth-child(3){ animation-range:entry 18% cover 34% }
		.scsq-how__card li:nth-child(4){ animation-range:entry 21% cover 36% }
		.scsq-how__card li:nth-child(5){ animation-range:entry 24% cover 38% }
	}
}
@keyframes scsq-riga{
	from{ opacity:0; transform:translateX(-8px) }
	to  { opacity:1; transform:none }
}

/* 10. La scheda dell'agente e' diventata toccabile da tastiera (motion.js le da'
   tabindex): deve quindi avere un contorno visibile quando la si raggiunge. */
.scsq-agent:focus-visible{
	outline:2px solid var(--scsq-green);
	outline-offset:3px;
}
@media (hover:hover) and (pointer:fine){
	.scsq-agent:focus-visible{ transform:translateY(-3px) }
}

/* 11. Il disegno degli agenti resta indietro di un soffio mentre si scorre:
   profondita', non parallasse chiassoso. Solo su schermi larghi, dove l'hero
   sta davvero accanto al testo. */
@supports (animation-timeline: scroll()){
	@media (prefers-reduced-motion: no-preference) and (min-width:901px){
		.scsq-stage{
			animation:scsq-stage-profondita linear both;
			animation-timeline:scroll(root block);
			animation-range:0 600px;
		}
	}
}
@keyframes scsq-stage-profondita{
	from{ transform:translateY(0) }
	to  { transform:translateY(26px) }
}

/* L'ingresso dell'hero e la profondita' non devono sommarsi sullo stesso
   elemento: quando la pagina entra, comanda l'ingresso. */
.scsq-hero.scsq-entra .scsq-stage{ animation-timeline:auto }

/* 12. Lo stesso ingresso, per i browser senza timeline di scorrimento.
   La classe `scsq-reveal-js` sulla radice la mette motion.js: se quel file non
   arriva, niente di tutto questo si applica e il contenuto resta visibile. */
@media (prefers-reduced-motion: no-preference){
	.scsq-reveal-js .scsq-sec-head,
	.scsq-reveal-js .scsq-agent,
	.scsq-reveal-js .scsq-how__card,
	.scsq-reveal-js .scsq-plan,
	.scsq-reveal-js .scsq-band{
		opacity:0;
		transform:translateY(22px) scale(.985);
		transition:opacity 560ms var(--scsq-ease-out) var(--scsq-ritardo,0ms),
		           transform 560ms var(--scsq-ease-out) var(--scsq-ritardo,0ms);
	}
	.scsq-reveal-js .is-in{
		opacity:1;
		transform:none;
	}
}