/* ═══════════════════════════════════════
   MOTION DETAILS — piccoli movimenti che danno carattere senza rubare la scena.
   Caricato dopo style.css: le regole qui sovrascrivono le animazioni generiche.
   Riferimenti: codrops/MagneticButtons (CTA magnetiche), barvian/number-flow
   (cifre che rotolano), maschere "a feritoia" dei siti editoriali.
   Tutto si spegne con prefers-reduced-motion.
   ═══════════════════════════════════════ */

/* ── 1. Titolo hero: le righe salgono da una feritoia ──
   Il clip-path si muove con l'elemento, quindi traslazione e ritaglio vanno
   interpolati insieme: a metà corsa la riga è scesa del 50% e ne è visibile
   la metà superiore, cioè sembra uscire da una fessura fissa. */
@keyframes p2fSlot {
    from { transform: translateY(100%); clip-path: inset(-0.12em -0.1em 100% -0.1em); }
    to   { transform: translateY(0);    clip-path: inset(-0.12em -0.1em -0.2em -0.1em); }
}
.hero-title .title-line:nth-child(1) { animation: p2fSlot 1.05s 0.18s var(--ease) both; }
.hero-title .title-line:nth-child(2) { animation: p2fSlot 1.05s 0.32s var(--ease) both; }

/* ── 2. Prezzi che rotolano (odometro) ──
   Ogni cifra è una colonna 0-9 che scorre fino al valore; il testo vero resta
   nell'aria-label per gli screen reader. */
.roll { display: inline-flex; align-items: baseline; white-space: nowrap; }
.roll-d {
    display: inline-block; position: relative; overflow: hidden;
    height: 1.12em; line-height: 1.12em; vertical-align: bottom;
}
.roll-col {
    display: flex; flex-direction: column;
    transform: translateY(0);
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 70ms);
}
.roll-col > span { height: 1.12em; line-height: 1.12em; text-align: center; }
.roll.is-rolled .roll-col { transform: translateY(calc(var(--n, 0) * -1.12em)); }

/* ── 3. CTA magnetiche (solo mouse) ──
   Usa la proprietà `translate`, indipendente da `transform`: così convive con
   l'hover (translateY) e con le animazioni d'ingresso già presenti. */
.p2f-magnet { translate: var(--mx, 0px) var(--my, 0px); }
/* La transizione su `translate` la aggiunge motion.js in coda a quella che il
   bottone ha già, così hover e colori restano come sono. */

/* ── 4. Pressione: il bottone "cede" di un soffio ── */
.hero-scroll-cta:active, .nav-cta:active, .submit-btn:active,
.board-empty-cta:active, .frp-btn:active { scale: 0.97; }

/* ── 5. Come funziona: la rotta si traccia da 01 a 03 ──
   Le tre righe diventano un'unica tratta disegnata in sequenza, con un
   waypoint che si accende all'inizio di ogni segmento. */
.hiw-steps .hiw-step-rule {
    position: relative; overflow: visible;
    background: linear-gradient(90deg, var(--red), color-mix(in srgb, var(--red) 25%, var(--border)));
    transform: scaleX(0); transform-origin: left center;
}
.hiw-steps .hiw-step-rule::before {
    content: ''; position: absolute; left: -3px; top: -3px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 18%, transparent);
    transform: scale(0);
}
.hiw-steps.revealed .hiw-step-rule {
    transform: scaleX(1);
    transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.hiw-steps.revealed .hiw-step-rule::before {
    transform: scale(1);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hiw-steps.revealed .hiw-step:nth-child(1) .hiw-step-rule,
.hiw-steps.revealed .hiw-step:nth-child(1) .hiw-step-rule::before { transition-delay: 0.25s; }
.hiw-steps.revealed .hiw-step:nth-child(2) .hiw-step-rule,
.hiw-steps.revealed .hiw-step:nth-child(2) .hiw-step-rule::before { transition-delay: 1.05s; }
.hiw-steps.revealed .hiw-step:nth-child(3) .hiw-step-rule,
.hiw-steps.revealed .hiw-step:nth-child(3) .hiw-step-rule::before { transition-delay: 1.85s; }

@media (prefers-reduced-motion: reduce) {
    .hero-title .title-line:nth-child(1),
    .hero-title .title-line:nth-child(2) { animation: none; }
    .roll-col { transition: none; }
    .p2f-magnet { translate: none; transition: none; }
    .hero-scroll-cta:active, .nav-cta:active, .submit-btn:active,
    .board-empty-cta:active, .frp-btn:active { scale: none; }
    .hiw-steps .hiw-step-rule, .hiw-steps .hiw-step-rule::before { transform: none; transition: none; }
}