/* ==========================================================================
   Kefero — pagina principale

   All'arrivo c'e' solo la macchina, a tutto schermo, immersa nel cielo. Le
   informazioni vivono sotto la piega: chi vuole l'esperienza preme e basta,
   chi vuole capire prima scende.

   La macchina e' un video 3:4 verticale e non si taglia mai. Su desktop
   resta al centro e lo spazio ai lati diventa cielo; su telefono riempie la
   larghezza.
   ========================================================================== */

/* `html { overflow-x: hidden }` (che tiene fuori la scrollbar orizzontale
   creata dal full-bleed a 100vw) e il fondo della pagina vivono ora in
   base.css, caricato su ogni pagina: qui erano una seconda verità che
   vinceva o perdeva a seconda dell'ordine dei <link>. */

.home { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-6); }

/* --------------------------------------------------------------------------
   L'atrio: la macchina nel cielo

   La sezione esce dalla colonna centrata e prende tutta la larghezza dello
   schermo, cosi' il cielo non ha bordi. Tutto cio' che si muove qui lo fa
   con transform e opacity: il browser lo compone sulla GPU, e resta fluido
   anche su telefono.
   -------------------------------------------------------------------------- */

.machine-hero {
    box-sizing: border-box;
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    min-height: 100svh;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    padding: var(--space-12) var(--space-6);
}

/* Il campo di stelle, disegnato da sky-ambient.js. */
.sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    pointer-events: none;
    transform: translateZ(0);
}

/* --------------------------------------------------------------------------
   Le nebulose

   Aloni morbidi e saturi che derivano lenti. Si sommano fra loro e al cielo
   con `screen`, come luce vera; l'animazione tocca solo transform e opacity.
   -------------------------------------------------------------------------- */

.neb {
    position: absolute;
    inset: -25%;
    z-index: 0;
    pointer-events: none;
    filter: blur(70px);
    mix-blend-mode: screen;
    will-change: transform, opacity;
    transform: translateZ(0);
}

.neb-a {
    background: radial-gradient(38% 38% at 22% 40%, rgba(157, 107, 216, 0.50), transparent 70%);
    animation: kefero-drift-a 30s ease-in-out infinite alternate;
}

.neb-b {
    background: radial-gradient(36% 36% at 80% 60%, rgba(55, 230, 214, 0.38), transparent 70%);
    animation: kefero-drift-b 38s ease-in-out infinite alternate;
}

.neb-c {
    background: radial-gradient(46% 46% at 50% 10%, rgba(224, 92, 255, 0.30), transparent 72%);
    animation: kefero-drift-c 46s ease-in-out infinite alternate;
}

.neb-d {
    background: radial-gradient(30% 30% at 66% 22%, rgba(55, 230, 214, 0.28), transparent 70%);
    animation: kefero-drift-a 52s ease-in-out infinite alternate-reverse;
}

.neb-e {
    background: radial-gradient(34% 34% at 30% 78%, rgba(157, 107, 216, 0.34), transparent 72%);
    animation: kefero-drift-b 44s ease-in-out infinite alternate-reverse;
}

@keyframes kefero-drift-a { to { transform: translate3d(7%, -5%, 0) scale(1.15); } }
@keyframes kefero-drift-b { to { transform: translate3d(-6%, 6%, 0) scale(1.20); } }
@keyframes kefero-drift-c { to { transform: translate3d(4%, 5%, 0) scale(1.10); } }

/* La vignetta chiude i bordi dello schermo e tiene lo sguardo sulla macchina. */
.hero-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(120% 92% at 50% 44%,
        transparent 42%,
        color-mix(in srgb, var(--bg-deep) 74%, transparent) 82%,
        var(--bg-deep) 100%);
}

/* --------------------------------------------------------------------------
   Contatore coin

   Un badge piccolo in alto a destra della hero: la moneta di Kefero + il saldo.
   Visibile solo se c'è un saldo o un utente; sparisce durante la riproduzione.
   -------------------------------------------------------------------------- */

.coin-counter {
    position: absolute;
    /* Alla stessa altezza della scritta INSERT COIN (il tavolino) e alla sua
       destra. `right: 9%` la tiene dentro la fascia non sfumata dalla maschera
       del video (che dissolve l'ultimo ~7% di ciascun lato). */
    top: 64%;
    right: 9%;
    transform: translateY(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.26em 0.62em 0.26em 0.32em;
    border-radius: var(--radius-full, 999px);
    background: color-mix(in srgb, var(--bg-deep) 60%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(216, 201, 168, 0.28);
    color: #e7ddc4;
    font-family: var(--type-family-utility, 'Share Tech Mono', monospace);
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    pointer-events: none;
    user-select: none;
    transition: opacity 0.3s ease;
}
.coin-counter__img {
    width: 26px;
    height: 26px;
    display: block;
    border-radius: 50%;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}
.coin-counter__num { font-weight: 600; }

/* --------------------------------------------------------------------------
   La macchina
   -------------------------------------------------------------------------- */

.machine-frame {
    position: relative;
    z-index: 2;
    height: min(82svh, 820px);
    aspect-ratio: 3 / 4;
    max-width: 94vw;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
    transform: translateZ(0);
    box-shadow:
        0 44px 130px -28px rgba(0, 0, 0, 0.92),
        0 0 90px -20px rgba(157, 107, 216, 0.35);
    /* Bordi del video sfumati NEL CIELO: invece di un rettangolo nero netto, la
       macchina si dissolve nell'ambiente (il campo stellato traspare ai bordi).
       Due gradienti incrociati sfumano tutti e quattro i lati. In riproduzione
       (fullscreen) la maschera si disattiva. */
    -webkit-mask-image:
        linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-composite: intersect;
}

.machine-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* --------------------------------------------------------------------------
   Le luci della macchina

   Tre fonti dove la luce c'e' davvero — insegna, sfera, volto — ora in tinta
   neon. L'intensita' e' governata da machine.js, che imposta `--on` fra 0 e
   1: un tremolio scritto in CSS si ripeterebbe identico e smetterebbe di
   sembrare un guasto.
   -------------------------------------------------------------------------- */

.machine-lights {
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: screen;
}

.light {
    position: absolute;
    display: block;
    border-radius: 50%;
    opacity: calc(var(--on, 0) * var(--peak, 0.5));
    transition: opacity var(--fade, 90ms) linear;
    will-change: opacity;
}

/* L'insegna: magenta-viola, la piu' incline alle raffiche. */
.light-sign {
    left: 18%;
    top: 6%;
    width: 64%;
    height: 16%;
    --peak: 0.7;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(224, 92, 255, 0.85) 0%,
        rgba(157, 107, 216, 0.45) 42%,
        transparent 72%);
    filter: blur(14px);
}

/* La sfera di cristallo: ciano fluo, respira lenta. */
.light-orb {
    left: 58%;
    top: 43%;
    width: 18%;
    height: 14%;
    --peak: 0.85;
    background: radial-gradient(circle at 50% 50%,
        rgba(111, 255, 240, 0.95) 0%,
        rgba(55, 230, 214, 0.5) 38%,
        transparent 70%);
    filter: blur(10px);
}

/* Il volto dietro il vetro: viola, appena accennato. */
.light-face {
    left: 32%;
    top: 26%;
    width: 34%;
    height: 18%;
    --peak: 0.4;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(157, 107, 216, 0.55) 0%,
        transparent 68%);
    filter: blur(18px);
}

/* --------------------------------------------------------------------------
   L'insegna KEFERO in neon cyber

   ── PERCHE' NON UNA TINTA SOPRA LE LETTERE ───────────────────────────────
   Una tinta in color-dodge sull'insegna sbianca l'immagine: le lettere
   perdono contrasto e sembrano lavate. Questo e' invece un alone morbido in
   `screen`, sfocato e concentrato sull'insegna: aggiunge luce viola-magenta
   attorno alle lettere senza coprirle. Pulsa piano, per conto suo.
   -------------------------------------------------------------------------- */

.sign-neon {
    position: absolute;
    left: 19%;
    top: 5.5%;
    width: 62%;
    height: 15%;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
    border-radius: 10px;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(224, 92, 255, 0.55) 0%,
        rgba(157, 107, 216, 0.30) 50%,
        transparent 76%);
    filter: blur(10px);
    animation: kefero-sign 3.2s ease-in-out infinite;
}

@keyframes kefero-sign {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 0.95; }
}

/* La vignettatura del riquadro: stacca meno il video dalla pagina. */
.machine-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 45%,
        transparent 42%,
        color-mix(in srgb, var(--bg-deep) 55%, transparent) 88%,
        color-mix(in srgb, var(--bg-deep) 80%, transparent) 100%);
}

/* --------------------------------------------------------------------------
   La base che sprofonda nel buio

   Nasconde la firma in basso al fotogramma e, insieme, fa sembrare che la
   macchina emerga dal buio invece di poggiare su un bordo netto. Resta anche
   durante il filmato, quando la firma sarebbe di nuovo visibile.
   -------------------------------------------------------------------------- */

.machine-base-mask {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 9%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to top,
        #000 0%,
        #000 44%,
        rgba(0, 0, 0, 0.82) 64%,
        transparent 100%);
}

/* --------------------------------------------------------------------------
   INSERT COIN — la scritta arcade sul vetro E' il pulsante

   Lampeggia netta come un coin-op, in neon ciano con alito viola. Sta
   all'altezza del banco, dietro il vetro: e' li' che l'occhio cade, ed e' li'
   che si chiede la moneta.
   -------------------------------------------------------------------------- */

.insert-coin {
    position: absolute;
    left: 50%;
    /* Più in basso, nello spessore del tavolino di Kefero. (Valore visivo:
       se serve, si sposta di un paio di punti.) */
    top: 64%;
    transform: translateX(-50%);
    z-index: 3;
    width: 54%;
    padding: 2px 0;
    background: none;
    border: 0;
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.insert-coin .marq {
    display: inline-flex;
    white-space: nowrap;
    will-change: transform;
    animation: kefero-marquee 13s linear infinite;
}

.insert-coin .marq-copy {
    font-family: 'Press Start 2P', var(--type-family-utility);
    font-size: clamp(7px, 0.95vw, 10px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c9fff8;
    text-shadow:
        0 0 4px #37e6d6,
        0 0 12px rgba(55, 230, 214, 0.7),
        0 0 22px rgba(224, 92, 255, 0.45);
}

.insert-coin:hover .marq-copy {
    color: #ffffff;
    text-shadow: 0 0 6px #6ffff2, 0 0 16px #37e6d6, 0 0 30px #e05cff;
}

@keyframes kefero-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ══ LA GETTONIERA ════════════════════════════════════════════════════════
   Il bersaglio e' la PIASTRA della moneta, non un riquadro qualunque intorno.
   Nessun bordo visibile: la sola cosa che si vede e' la freccia.

   ── I NUMERI SONO MISURATI SUL POSTER, NON STIMATI ────────────────────────
   La cornice ha le stesse proporzioni del video (3/4 in entrambi i casi) e il
   filmato la riempie esattamente, quindi una percentuale letta sull'immagine
   vale su qualunque schermo. Su `machine-poster.webp` (810x1080), leggendo il
   colore pixel per pixel:

      fessura   x 654-659 px  =  80,74% - 81,36%   (centro 81,05%)
                y 247-279 px  =  22,87% - 25,83%   (centro 24,35%)
      piastra   x 620-690 px  =  76,5%  - 85,2%
                y 235-362 px  =  21,8%  - 33,5%

   ── COSA C'ERA PRIMA ──────────────────────────────────────────────────────
   Il bersaglio copriva dal 76% al 93% in larghezza e dal 24% al 44% in
   altezza: cominciava SOTTO la fessura, tagliava la piastra a meta' e
   sconfinava sul telaio e sul vetro. E la freccia stava al 69,5% / 30,5%,
   cioe' circa dieci punti a sinistra e sette sotto: puntava al vetro dipinto,
   vicino a una luna, a settanta pixel dalla fessura. Si indicava un punto e
   se ne toccava un altro, e nessuno dei due era la gettoniera.
   ═════════════════════════════════════════════════════════════════════════ */
.coin-slot {
    position: absolute;
    left: 76.5%;
    top: 21.8%;
    width: 8.8%;
    height: 11.8%;
    z-index: 4;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    /* Su telefono la cornice si stringe e la piastra con lei: l'8,8% di 340
       pixel sono trenta, sotto la soglia di cio' che un pollice prende al
       primo colpo. Il bersaglio non scende mai sotto quarantaquattro pixel;
       cresce verso destra e verso il basso, dove non c'e' nient'altro da
       toccare. */
    min-width: 44px;
    min-height: 44px;
}

/* La freccia indica la fessura: punta a destra e rimbalza verso di lei.
   Compare solo con gettoni disponibili.

   ── LA FRECCIA CRESCE CON LA MACCHINA ────────────────────────────────────
   Era un triangolo fatto di bordi: 10 pixel per 12, FISSI. Ma la cornice va
   da 320 pixel su un telefono a 768 su un tablet, e quei dieci pixel
   passavano dal 3,1% della larghezza all'1,3%. Su schermo piccolo,
   accanto a una piastra di ventotto pixel, la punta era un granello: chi
   guardava non la vedeva proprio, e il segnale che dice DOVE si infila la
   moneta non arrivava.

   Un triangolo di bordi non si puo' misurare in percentuale — i bordi
   accettano solo lunghezze. Con `clip-path` invece la forma e' ritagliata da
   un rettangolo qualunque, e il rettangolo puo' misurarsi come si vuole:
   qui il 3,2% della cornice, con un fondo di quattordici pixel perche' su un
   telefono molto stretto non torni a essere un granello.

   ── `left` E `top` INDICANO LA PUNTA, NON L'ANGOLO ────────────────────────
   La traslazione porta l'elemento indietro di tutta la sua larghezza piu'
   otto pixel di stacco, e in su di meta' altezza: da li' in poi `left` e' il
   punto in cui la punta si ferma, e `top` e' la sua altezza. Vale a
   qualunque dimensione, perche' `-100%` si misura sull'elemento stesso.

   Il rimbalzo e' nelle keyframe e riparte da quella stessa traslazione: se si
   limitasse a `translateX`, la prima battuta cancellerebbe la centratura e la
   freccia salterebbe in un altro punto. */
.coin-arrow {
    position: absolute;
    left: 80.74%;
    top: 24.35%;
    z-index: 4;

    /* ── LE DUE MISURE SONO ENTRAMBE DICHIARATE ──────────────────────────
       `aspect-ratio` da solo non basta: arriva con Safari 15, e prima di
       quello un elemento senza altezza e' alto ZERO. Un triangolo alto zero
       non si vede, e non c'e' nessun errore a dirlo.

       La cornice e' 3/4, quindi la sua altezza vale 0,75 della larghezza: il
       3,6% in larghezza corrisponde al 3,24% in altezza per una punta alta
       una volta e mezzo la sua base. */
    width: max(16px, 3.6%);
    height: max(19px, 3.24%);

    /* L'alone deborda dal riquadro: senza questa riga verrebbe tagliato, e il
       vertice non starebbe piu' al bordo destro — che e' il punto su cui e'
       tarata tutta la posizione. */
    overflow: visible;

    color: #37e6d6;
    pointer-events: none;
    transform: translate(calc(-100% - 8px), -50%);
    animation: kefero-arrow 1s ease-in-out infinite;
}

/* ── NIENTE `filter`, NIENTE `clip-path` ──────────────────────────────────
   Erano le due proprieta' che rendevano la freccia invisibile su telefono:
   la cornice e' un contenitore mascherato e promosso alla scheda grafica
   (`-webkit-mask-image` + `translateZ(0)` + `overflow: hidden`), e su WebKit
   un figlio filtrato o ritagliato finisce in un livello che la maschera del
   padre si porta via.

   Adesso la punta e' un `<path>` e l'alone e' un contorno disegnato sotto di
   lei. Vedi `views/partials/freccia-gettoniera.php`. */
.coin-arrow__punta {
    fill: currentColor;
}

.coin-arrow__alone {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.15;
    stroke-linejoin: round;
    stroke-opacity: 0.3;
    /* Manda il contorno DIETRO il riempimento. Dove non e' supportato il
       contorno finisce sopra, ma e' dello stesso colore al trenta per cento:
       non si distingue. */
    paint-order: stroke;
}

/* Il rimbalzo avvicina la punta alla fessura di sei pixel e la riporta
   indietro. Ogni battuta ripete la traslazione di base: senza, la freccia si
   sposterebbe di netto al primo fotogramma. */
/* ── IL BATTITO NON SCENDE PIU' A META' ───────────────────────────────────
   Scendeva a 0,5: per meta' del secondo la freccia era semitrasparente sopra
   un mobile dipinto e pieno di dettagli, e su schermo piccolo in quella meta'
   del tempo spariva. Il rimbalzo si vede lo stesso — a muoversi e' la
   posizione — e a 0,78 la punta resta leggibile in ogni fotogramma. */
@keyframes kefero-arrow {
    0%, 100% { transform: translate(calc(-100% - 8px), -50%); opacity: 1; }
    50%      { transform: translate(calc(-100% - 2px), -50%); opacity: 0.78; }
}

/* --------------------------------------------------------------------------
   Le frasi del veggente

   Nella fascia alta del vetro, sotto l'insegna. Piccole, una riga, affiorano
   e svaniscono a caso. Il testo arriva tradotto dal server e lo mette in
   pagina glass-fx.js: qui c'e' solo l'aspetto.
   -------------------------------------------------------------------------- */

.machine-whisper {
    position: absolute;
    left: 50%;
    top: 22%;
    transform: translateX(-50%);
    z-index: 3;
    width: 64%;
    text-align: center;
    pointer-events: none;
    overflow: hidden;
    font-family: 'VT323', var(--type-family-utility);
    font-size: clamp(14px, 1.9vw, 21px);
    line-height: 1.1;
    letter-spacing: 0.03em;
    color: #ece0ff;
    text-shadow:
        0 0 10px rgba(157, 107, 216, 0.7),
        0 0 20px rgba(224, 92, 255, 0.4);
}

/* La riga scorre dentro il contenitore: entra da destra, si ferma al centro,
   poi esce a sinistra. Solo transform e opacity: tutto su GPU. */
.machine-whisper .whisper-line {
    display: inline-block;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(55%);
    will-change: transform, opacity;
}

.machine-whisper.is-running .whisper-line {
    animation: kefero-whisper 7.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Movimento ridotto: una frase sola, ferma al centro. */
.machine-whisper.is-static .whisper-line {
    opacity: 0.92;
    transform: none;
}

@keyframes kefero-whisper {
    0%   { transform: translateX(55%);  opacity: 0; }
    14%  { transform: translateX(0);    opacity: 1; }
    74%  { transform: translateX(0);    opacity: 1; }
    92%  { transform: translateX(-55%); opacity: 0; }
    100% { transform: translateX(-55%); opacity: 0; }
}

/* --------------------------------------------------------------------------
   L'invito a scendere
   -------------------------------------------------------------------------- */

.scroll-hint {
    position: absolute;
    left: 50%;
    bottom: var(--space-6);
    z-index: 2;
    transform: translateX(-50%);
    width: 22px;
    height: 34px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
}

.scroll-hint span {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 3px;
    height: 6px;
    margin-left: -1.5px;
    border-radius: var(--radius-full);
    background: var(--accent-alt-bright);
    box-shadow: 0 0 8px var(--accent-alt-bright);
    animation: kefero-scroll 2.4s ease-in-out infinite;
}

@keyframes kefero-scroll {
    0%, 100% { transform: translateY(0);  opacity: 0.9; }
    60%      { transform: translateY(12px); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Quando la moneta entra

   Il video passa a schermo intero: ogni elemento d'interfaccia ancora
   visibile romperebbe l'illusione, quindi sparisce. La maschera della base
   resta, perche' la firma tornerebbe visibile nel filmato.
   -------------------------------------------------------------------------- */

body[data-machine='running'],
body[data-machine='whiteout'] { overflow: hidden; }

body[data-machine] .machine-frame {
    position: fixed;
    inset: 0;
    z-index: var(--layer-modal);
    height: auto;
    aspect-ratio: auto;
    max-width: none;
    border-radius: 0;
    background: #000;
    box-shadow: none;
    -webkit-mask-image: none;
    mask-image: none;
}

body[data-machine] .machine-lights,
body[data-machine] .machine-vignette,
body[data-machine] .sign-neon,
body[data-machine] .machine-whisper,
body[data-machine] .insert-coin,
body[data-machine] .coin-arrow,
body[data-machine] .coin-slot,
body[data-machine] .coin-counter,
body[data-machine] .sky,
body[data-machine] .neb,
body[data-machine] .hero-vignette,
body[data-machine] .scroll-hint,
body[data-machine] .home-intro,
body[data-machine] .home-section,
body[data-machine] .site-footer { opacity: 0; pointer-events: none; }

/* Tre di questi elementi animano l'opacità per conto proprio (l'insegna al
   neon che pulsa, la freccia della gettoniera che lampeggia, l'invito a
   scorrere che rimbalza): un'animazione CSS attiva vince sempre sulla
   semplice regola qui sopra, quindi restavano visibili — lampeggianti —
   SOPRA il video, invece di sparire con tutto il resto. Ferma solo la LORO
   animazione: gli altri elementi, che non toccano l'opacità, non ne hanno
   bisogno. */
body[data-machine] .sign-neon,
body[data-machine] .coin-arrow,
body[data-machine] .scroll-hint { animation: none; }

/* ── E CIO' CHE SI PUO' PREMERE VA SPENTO, NON SOLO NASCOSTO ──────────────
   La regola qui sopra porta l'opacita' a zero e toglie il puntatore. Basta
   per un fondo stellato o una vignettatura; non basta per un PULSANTE.

   `opacity: 0` non toglie niente dal giro del tabulatore: durante il filmato
   si arrivava ancora alla gettoniera (un `<button>`), al ticker (che porta
   `role="button"` e `tabindex="0"`), all'invito a scorrere e — peggio di
   tutti — alle card dei gettoni, che stanno in `.home-intro`. Premere invio
   li' dentro faceva partire un SECONDO acquisto sopra il video del primo.
   Lo stesso per i collegamenti del piede.

   `visibility: hidden` li toglie davvero: niente fuoco, niente lettore di
   schermo, niente tabulatore. Vale per entrambe le macchine, perche' il
   difetto e' di entrambe.

   ── PERCHE' IL CONTATORE RESTA FUORI ────────────────────────────────────
   Perche' e' l'unico di questo gruppo che ha una dissolvenza da rispettare
   (`transition: opacity .3s`), e non si puo' premere: gli basta l'opacita'
   della regola precedente, e con `visibility` la sua sfumatura si
   taglierebbe di netto. */
body[data-machine] .accesso,
body[data-machine] .coin-slot,
body[data-machine] .insert-coin,
body[data-machine] .scroll-hint,
body[data-machine] .home-intro,
body[data-machine] .home-section,
body[data-machine] .site-footer { visibility: hidden; }

/* `.accesso` sta nell'elenco ma non nella regola dell'opacita' qui sopra: la
   cornice a schermo pieno lo copre gia' — stesso livello, ma arriva dopo nel
   documento — quindi a schermo era gia' invisibile. Restava il tabulatore:
   due collegamenti che portano fuori dalla pagina proprio mentre il gettone
   sta scendendo. */

/* Il ticker mancava all'appello qui sopra, ed e' quello che costava di piu':
   `kefero-marquee` e' un'animazione INFINITA su una striscia larga quanto la
   macchina. L'opacita' a zero la rende invisibile, non la ferma — il browser
   continua a comporre ogni fotogramma di una cosa che nessuno vede, per tutti
   gli otto secondi del filmato, che sono esattamente gli otto secondi in cui
   il dispositivo ha meno margine da dare.

   Vale per entrambe le macchine: il ticker e' lo stesso oggetto su tutte e
   due le pagine. */
body[data-machine] .insert-coin .marq { animation: none; }

body[data-machine='whiteout'] .machine-frame { background: #fff; }

body[data-machine='whiteout']::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: calc(var(--layer-modal) + 1);
    background: #fff;
    opacity: 0;
    animation: kefero-whiteout 1.8s ease-in forwards;
    pointer-events: none;
}

@keyframes kefero-whiteout {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* --------------------------------------------------------------------------
   L'introduzione, sotto la piega
   -------------------------------------------------------------------------- */

.home-intro {
    box-sizing: border-box;
    max-width: 640px;
    margin: 0 auto var(--space-24);
    padding: var(--space-24) var(--space-6) 0;
    text-align: center;
}

/* La forma dell'etichetta sta in base.css. Qui solo la variante della home:
   più tenue, e con più respiro sotto perché precede un titolo grande. */
.home-intro .eyebrow {
    color: var(--text-faint);
    margin-bottom: var(--space-4);
}

.home-title {
    font-family: var(--type-family-display);
    font-size: var(--type-xl);
    font-weight: var(--type-weight-light);
    line-height: var(--type-leading-tight);
    letter-spacing: var(--type-tracking-tight);
    margin: 0 0 var(--space-6);
}

.home-lead {
    font-size: var(--type-md);
    color: var(--text-dim);
    line-height: var(--type-leading-normal);
    margin: 0 0 var(--space-6);
}

.cta-note,
/* ── IL MENU STA IN `menu.css` ─────────────────────────────────────────────
   Era qui, e qui poteva servire solo le due insegne: `home.css` non arriva
   alla dashboard, che carica `form` e `dashboard`. Il giorno che il menu e'
   servito anche li', la scelta era fra copiarlo — due copie che divergono alla
   prima modifica — e dargli un foglio suo.

   Ha un foglio suo. Lo caricano le pagine che montano
   `views/partials/accesso.php`, e nessun'altra. */

/* Il pulsante della moneta nel cassetto: cremisi pieno, il gesto irreversibile. */
.cta {
    display: inline-block;
    padding: var(--space-4) var(--space-8);
    border: 0;
    border-radius: var(--radius-full);
    font: inherit;
    font-size: var(--type-base);
    font-weight: var(--type-weight-semibold);
    cursor: pointer;
}

.cta-coin {
    width: 100%;
    background: var(--accent-warm);
    color: var(--text);
    margin-top: var(--space-4);
}

.cta-coin:hover { background: var(--accent-warm-bright); }
.cta-coin:disabled { opacity: 0.5; cursor: wait; }

/* Avviso "audio on / meglio con le cuffie": piccolo e discreto, con icona
   cuffie. Sopra il pulsante del gettone. Testo in caso normale (non maiuscolo). */
.coin-sound-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    margin: var(--space-4) 0 0;
    font-size: var(--type-sm, 0.85rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--hud-text, #b9c4de);
    opacity: 0.82;
    text-align: center;
}

.coin-sound-icon {
    flex: none;
    font-size: 1.15em;
    opacity: 0.9;
}

/* --------------------------------------------------------------------------
   Le sezioni informative
   -------------------------------------------------------------------------- */

.home-section {
    box-sizing: border-box;
    max-width: 760px;
    margin: 0 auto var(--space-24);
    padding: 0 var(--space-6);
}

.home-section h2 {
    font-family: var(--type-family-display);
    font-size: var(--type-xl);
    font-weight: var(--type-weight-light);
    letter-spacing: var(--type-tracking-tight);
    margin: 0 0 var(--space-6);
}
.home-section h2::before {
    content: '';
    display: block;
    width: 34px;
    height: 2px;
    margin-bottom: var(--space-4);
    background: var(--accent);
    opacity: 0.55;
}

.home-section > p { color: var(--text-dim); font-size: var(--type-md); line-height: var(--type-leading-loose); margin: 0; }

.steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-4);
}
.steps li {
    box-sizing: border-box;
    padding: var(--space-6);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2em;
    height: 2.2em;
    border-radius: var(--radius-full);
    border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
    font-family: var(--type-family-utility);
    font-size: var(--type-sm);
    color: var(--accent);
    margin-bottom: var(--space-4);
}

.step-title { font-size: var(--type-md); color: var(--text); font-weight: 500; margin: 0 0 var(--space-2); }
.step-body { font-size: var(--type-sm); color: var(--text-dim); line-height: var(--type-leading-normal); margin: 0; }

.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }

.feature-list li {
    box-sizing: border-box;
    padding-left: calc(1.5rem + var(--space-4));
    position: relative;
    color: var(--text-dim);
    line-height: var(--type-leading-normal);
}

.feature-list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0.1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    font-size: 0.8em;
    font-weight: 700;
}

/* La voce di punta, l'esperienza cinematica: una card in evidenza sopra
   l'elenco. Le altre voci restano un elenco pari, così è chiaro che si riceve
   l'esperienza E tutto il resto, non solo l'esperienza. */
.receive-hero {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
    margin-bottom: var(--space-8);
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border-strong));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-raised));
}
.receive-hero__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--bg-deep);
}
.receive-hero__text {
    color: var(--text);
    font-size: var(--type-md);
    font-weight: 500;
    line-height: var(--type-leading-normal);
}

/* --------------------------------------------------------------------------
   Il cassetto dei dati
   -------------------------------------------------------------------------- */

/* ── PERCHE' QUESTA RIGA E' VITALE ────────────────────────────────────────
   Il cassetto e' position:fixed inset:0: se resta nel flusso quando e'
   chiuso, copre l'intera pagina (invisibile, opacity:0) e INTERCETTA OGNI
   CLICK — gettoniera, link, tutto. L'attributo `hidden` da solo non basta:
   la regola `.drawer{display:grid}` qui sotto vince sullo stile del browser
   `[hidden]{display:none}`. Questa riga lo rimette a posto: chiuso = sparito.
   machine.js conta su questo — mostra il cassetto togliendo `hidden`. */
.drawer[hidden] { display: none; }

/* ── IL CASSETTO COPRE CIÒ CHE SI VEDE, NON CIÒ CHE ESISTE ────────────────
   Era `inset: 0`, cioè l'intera finestra di LAYOUT. Con la tastiera aperta
   quella finestra non si accorcia (è il comportamento normale su mobile): si
   accorcia solo la parte VISIBILE, e il fondo della finestra di layout
   finisce sotto i tasti. Il pannello, ancorato al fondo (`place-items: end`),
   ci finiva insieme — e restava tagliato a metà. Un utente si è fermato lì:
   vedeva il campo del fuso orario mozzato e nessun pulsante per proseguire.

   `--vvt` e `--vvh` le scrive machine.js leggendo `visualViewport`, l'unica
   fonte che sappia dove sia davvero il bordo di sotto. Il cassetto si posa
   esattamente sul rettangolo visibile, quindi il pannello si appoggia SOPRA
   la tastiera invece che sotto.

   Il ripiego (`0px` / `100svh`) è il comportamento di prima: sui browser che
   non espongono l'API non si perde nulla rispetto a oggi. */
.drawer {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--vvt, 0px);
    height: var(--vvh, 100svh);
    z-index: var(--layer-modal);
    background: color-mix(in srgb, var(--bg-deep) 88%, transparent);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
    display: grid;
    place-items: end center;
    opacity: 0;
    transition: opacity var(--motion-duration-quick) var(--motion-easing-standard);
}

.drawer[data-state='open'] { opacity: 1; }

/* ── IL PANNELLO STA DENTRO CIÒ CHE SI VEDE ───────────────────────────────
   Misura e posizione le decide ormai il cassetto (vedi sopra): qui resta il
   comportamento del contenuto — scorre per conto proprio, non trascina la
   pagina dietro, e lascia in fondo lo spazio delle barre di sistema. */
.drawer-panel {
    width: min(560px, 100%);
    /* Il cassetto misura già ESATTAMENTE la parte visibile (vedi sopra):
       qui basta una percentuale, e la si lascia leggermente sotto il pieno
       perché si veda il bordo del pannello e si capisca che è un pannello e
       non la pagina. Prima questa riga rileggeva `--vvh` da sé, e con il
       cassetto ancorato al posto sbagliato correggeva la misura di una cosa
       che stava comunque fuori vista. */
    max-height: calc(100% - var(--space-4));
    overflow-y: auto;
    /* ── PERCHÉ SERVE overscroll-behavior ────────────────────────────────
       Arrivati in fondo al pannello, il gesto CONTINUA sulla pagina dietro:
       è lo "scroll chaining", ed è esattamente il «su tablet si muove tutto»
       segnalato. `contain` ferma il gesto al bordo del pannello. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-8) var(--space-6) var(--space-12);
    /* La sicura di iOS: la barra gesti in fondo copriva il pulsante finale. */
    padding-bottom: max(var(--space-12), env(safe-area-inset-bottom) + var(--space-8));
    box-shadow: 0 -30px 70px -30px rgba(0, 0, 0, 0.85);
    transform: translateY(100%);
    transition: transform var(--motion-duration-quick) var(--motion-easing-celestial);
}

.drawer[data-state='open'] .drawer-panel { transform: translateY(0); }

/* Il pannello riceve il fuoco all'apertura (vedi machine.js) ma non è un
   comando: il contorno del fuoco lì sarebbe rumore, non informazione. Quello
   dei campi dentro resta intatto. */
.drawer-panel:focus { outline: none; }

/* Una presa visibile in cima al pannello: dice «questo si trascina/scorre»
   prima ancora che il dito lo provi. */
.drawer-panel::before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto var(--space-6);
    border-radius: var(--radius-full);
    background: var(--border-strong);
}

/* ── TABLET E ORIZZONTALE: IL PANNELLO SI CENTRA ─────────────────────────
   Su un tablet (o su un telefono girato) un cassetto ancorato in basso è
   sbagliato due volte: lascia mezzo schermo vuoto sopra e schiaccia i campi
   in una striscia. Da 640px in su, o quando lo schermo è basso e largo,
   diventa una finestra centrata con angoli su tutti i lati. */
@media (min-width: 640px), (orientation: landscape) and (min-width: 560px) {
    .drawer {
        place-items: center;
        padding: var(--space-6);
    }

    .drawer-panel {
        /* `100%` è l'area interna del cassetto, cioè la parte visibile meno
           il suo padding: la finestra centrata resta staccata dai bordi
           anche quando la tastiera si mangia metà schermo. */
        max-height: 100%;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-lg);
        padding-bottom: var(--space-8);
        transform: translateY(24px) scale(0.98);
        opacity: 0;
        transition:
            transform var(--motion-duration-quick) var(--motion-easing-celestial),
            opacity var(--motion-duration-quick) var(--motion-easing-standard);
    }

    .drawer[data-state='open'] .drawer-panel { transform: none; opacity: 1; }
    .drawer-panel::before { display: none; }
}

/* ── I due passi del cassetto: dati → controllo audio ────────────────────── */
/* Di default si vedono i DATI e il controllo audio è nascosto. Passando a
   data-step='sound' si scambiano. Regole ESPLICITE (display:none/block) per non
   dipendere dall'attributo [hidden] del browser. */
.drawer-step--sound { display: none; }
.drawer-panel[data-step='sound'] .drawer-step--data  { display: none; }
.drawer-panel[data-step='sound'] .drawer-step--sound { display: block; }
.drawer-step { animation: drawer-step-in 0.32s var(--motion-easing-standard) both; }
@keyframes drawer-step-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── SU SCHERMI BASSI I DUE PASSI SI COMPRIMONO ──────────────────────────
   Un telefono in orizzontale, o un tablet con la tastiera aperta, lascia
   poco più di 400px in altezza. Senza questo, il controllo audio (cuffie
   grandi + titolo + testo + pulsante) non ci sta e il pulsante finale
   finisce fuori vista: si vede l'invito ad accendere l'audio ma non il
   pulsante per iniziare.

   ── ANCHE IL PASSO DATI, NON SOLO L'AUDIO ────────────────────────────────
   Qui c'era metà della regola. Il passo dei DATI è quello che si guarda con
   la tastiera aperta — cioè quello che ha meno spazio di tutti — e non aveva
   nessuna compressione: cinque campi a spaziatura piena dentro 300px utili
   significano scorrere per ogni singolo campo, e non vedere mai il pulsante
   «Pronto» insieme a ciò che si sta compilando.

   Si stringe ciò che è aria e non si tocca ciò che è bersaglio: i campi
   restano alti 46px (la misura del polpastrello) in ogni condizione. Un
   modulo che sta a schermo ma su cui non si riesce a centrare un campo non
   è un miglioramento. */
@media (max-height: 560px) {
    .drawer-panel { padding-top: var(--space-6); padding-bottom: var(--space-6); }
    .drawer-title { margin-bottom: var(--space-4); }
    .birth-form { gap: var(--space-4); }

    /* La presa in cima ruba altezza dove non ce n'è, e in orizzontale il
       pannello è già una finestra centrata: si capisce da sé. */
    .drawer-panel::before { display: none; }

    /* Le note esplicative restano — servono — ma smettono di spaziare. */
    .field-note { margin-top: var(--space-1); }

    /* La conferma si stacca dal modulo quanto basta a non sembrarne parte. */
    .form-confirm { margin-top: var(--space-4); }
    .confirm-q { margin-bottom: var(--space-2); }

    .sound-on { margin: var(--space-2) 0 var(--space-1); font-size: var(--type-lg); }
    .sound-hp-wrap { margin: var(--space-2) 0 var(--space-3); }
    .sound-hp { width: 84px; height: 70px; }
    .sound-check-body { margin-bottom: var(--space-4); }
    .drawer-step--sound { padding-top: 0; }
}

/* Conferma dei dati + "Pronto" */
.form-confirm { text-align: center; margin-top: var(--space-6); }
.confirm-q {
    font-size: var(--type-sm);
    color: var(--text-dim);
    letter-spacing: 0.02em;
    margin: 0 0 var(--space-3);
}
.cta-ready { width: 100%; background: var(--accent-warm); color: var(--text); }
.cta-ready:hover { background: var(--accent-warm-bright); }

/* ── Passo 2: controllo audio ────────────────────────────────────────────── */
.drawer-step--sound { text-align: center; padding: var(--space-4) 0 var(--space-2); }
.sound-back {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    background: none;
    border: 0;
    color: var(--text-dim);
    cursor: pointer;
    padding: var(--space-2);
    line-height: 0;
}
.sound-back:hover { color: var(--text); }
.sound-on {
    font-family: var(--type-family-display);
    font-size: var(--type-xl, 1.6rem);
    font-weight: var(--type-weight-light, 300);
    letter-spacing: 0.06em;
    margin: var(--space-6) 0 var(--space-2);
    color: var(--text);
}
.sound-hp-wrap { display: flex; justify-content: center; margin: var(--space-4) 0 var(--space-6); }
.sound-hp {
    color: var(--accent-warm);
    filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent-warm) 55%, transparent));
    animation: sound-hp-breathe 2.6s ease-in-out infinite;
}
@keyframes sound-hp-breathe {
    0%, 100% { transform: scale(1);    opacity: 0.96; }
    50%      { transform: scale(1.05); opacity: 1; }
}
.hp-wave { opacity: 0; animation: sound-hp-wave 1.9s ease-out infinite; }
.hp-w1 { animation-delay: 0s; }
.hp-w2 { animation-delay: 0.32s; }
@keyframes sound-hp-wave {
    0%   { opacity: 0; }
    28%  { opacity: 0.9; }
    100% { opacity: 0; }
}
.sound-check-body {
    max-width: 30ch;
    margin: 0 auto var(--space-8);
    font-size: var(--type-base, 1rem);
    line-height: 1.5;
    color: var(--hud-text, #b9c4de);
}

@media (prefers-reduced-motion: reduce) {
    .sound-hp, .hp-wave, .drawer-step { animation: none; }
    .hp-wave { opacity: 0.7; }
}

.drawer-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background: none;
    border: 0;
    color: var(--text-dim);
    font-size: var(--type-lg);
    cursor: pointer;
    padding: var(--space-2);
}

.drawer-title {
    font-family: var(--type-family-display);
    font-size: var(--type-lg);
    font-weight: var(--type-weight-light);
    margin: 0 0 var(--space-6);
}

/* --------------------------------------------------------------------------
   Schermi stretti: la macchina riempie la larghezza
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    /* La macchina larga quanto il telefono: niente card, niente spazi ai
       lati. Il cielo resta sopra e sotto. */
    .machine-hero {
        min-height: 100svh;
        padding: 0;
    }

    .machine-frame {
        height: auto;
        width: 100%;
        max-width: none;
        border-radius: 0;
        box-shadow: none;
    }

    /* In RIPRODUZIONE a tutto schermo il video RIEMPIE (niente fasce nere che
       spostano il watermark a metà) e la fascia nera in basso, un po' più alta,
       resta a coprire la firma del fotogramma: prima, col video "contain", il
       watermark finiva a metà schermo e la fascia (in fondo) non lo copriva. */
    body[data-machine] .machine-video { object-fit: cover; }
    body[data-machine] .machine-base-mask { height: 15%; }

    .insert-coin { top: 67%; width: 66%; }
    .coin-counter { top: 67%; }
    .machine-whisper { top: 21%; width: 76%; }
    .home-title { font-size: var(--type-lg); }
    .cta { width: 100%; }
}

/* --------------------------------------------------------------------------
   Chi ha chiesto meno movimento

   Il tremolio e' esattamente cio' che puo' scatenare crisi in chi e'
   fotosensibile. Chi ha dichiarato di volere meno movimento riceve le luci
   ferme, la scritta fissa e il cielo immobile.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .light {
        opacity: calc(var(--peak, 0.5) * 0.7) !important;
        transition: none;
    }

    .neb,
    .sign-neon,
    .scroll-hint span { animation: none; }

    .insert-coin .marq { animation: none; }
    .machine-whisper .whisper-line { animation: none; }
    .coin-arrow { animation: none; }
}

/* ============================================================================
   Scelta al gioco: crea un account oppure prosegui senza (guest checkout)
   ========================================================================== */
.buy-choice {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    transition: opacity .22s ease;
}
.buy-choice[data-state='open'] { opacity: 1; }

/* Come per .drawer: `display:flex` batte l'`[hidden]` del browser, e senza
   questa riga l'overlay invisibile resterebbe a schermo intero intercettando
   ogni click. Chiuso = sparito davvero. */
.buy-choice[hidden] { display: none; }

.buy-choice__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 4, 12, 0.72);
    backdrop-filter: blur(3px);
}

.buy-choice__card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    padding: var(--space-8) var(--space-6);
    text-align: center;
    transform: translateY(8px) scale(0.98);
    transition: transform .22s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.buy-choice[data-state='open'] .buy-choice__card { transform: translateY(0) scale(1); }

.buy-choice__title {
    margin: 0 0 var(--space-2);
    font-family: var(--type-family-display);
    font-size: var(--type-xl);
    font-weight: var(--type-weight-light);
    color: var(--text);
}
.buy-choice__note {
    margin: 0 0 var(--space-6);
    color: var(--text-dim);
    font-size: var(--type-sm);
    line-height: var(--type-leading-normal, 1.5);
}

.buy-choice__btn {
    display: block;
    width: 100%;
    padding: 0.85em 1.2em;
    margin: 0 0 var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--type-base);
    font-weight: var(--type-weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}
.buy-choice__btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }

.buy-choice__btn--primary {
    border: 0;
    background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 60%, var(--accent-dim) 130%);
    color: var(--text-inverse);
}
.buy-choice__btn--primary:hover { filter: brightness(1.06); background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 60%, var(--accent-dim) 130%); }

.buy-choice__cancel {
    margin-top: var(--space-2);
    border: 0;
    background: transparent;
    color: var(--text-faint);
    font: inherit;
    font-size: var(--type-sm);
    cursor: pointer;
}
.buy-choice__cancel:hover { color: var(--text-dim); }
/* ============================================================================
   Le card moneta (compra / pacchetto / regala) SONO STATE SPOSTATE

   Vivono ora in base.css: compaiono identiche anche nell'archivio delle
   letture, che caricava tutto questo foglio soltanto per averle. Cercarle qui
   e non trovarle è il motivo di questa nota.
   ========================================================================== */

/* ==========================================================================
   LA VETRINA DELLA SEQUENZA

   ── PENSATA PRIMA PER IL TELEFONO ─────────────────────────────────────────
   Le regole di base descrivono lo schermo stretto — una colonna, immagine
   sopra e testo sotto — e solo da 900px in su i quattro passi si dispongono
   in due colonne alternate. È l'ordine giusto: la maggior parte di chi arriva
   guarda da un telefono, e progettare al contrario significa scrivere prima il
   caso raro e poi rimediare.
   ========================================================================== */

.home-reel {
    max-width: 1080px;
    margin: 0 auto var(--space-24);
    padding: 0 var(--space-6);
}

.home-reel__head {
    max-width: 46ch;
    margin: 0 auto var(--space-12);
    text-align: center;
}

.home-reel__title {
    font-family: var(--type-family-display);
    font-size: clamp(1.7rem, 5.5vw, var(--type-2xl));
    font-weight: var(--type-weight-light);
    line-height: 1.15;
    letter-spacing: var(--type-tracking-tight);
    margin: 0 0 var(--space-4);
    color: var(--text);
}

.home-reel__lead {
    margin: 0;
    font-size: var(--type-base);
    line-height: 1.65;
    color: var(--text-dim);
}

.reel {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-12);
    /* Il contatore dei passi è dichiarato qui e stampato dal CSS: così la
       numerazione non può divergere dall'ordine reale degli elementi. */
    counter-reset: passo;
}

.reel__figure {
    margin: 0;
    display: grid;
    gap: var(--space-5);
}

/* ── L'IMMAGINE ──────────────────────────────────────────────────────────
   Un fotogramma vero della sequenza. La cornice è sottile e il bagliore
   appena accennato: la scena è già luminosa di suo, e incorniciarla di più
   la farebbe sembrare uno screenshot dentro una finestra invece che una
   finestra sulla scena. */
.reel__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--edge, var(--border-strong));
    background: #05060f;
    box-shadow:
        0 30px 70px -40px rgba(0, 0, 0, 0.95),
        0 0 80px -50px rgba(120, 150, 255, 0.6);
}

.reel__caption {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

/* Il numero del passo: un disco dorato, la stessa lingua dei numeri di
   «Come funziona». Chi scorre riconosce che sono la stessa serie. */
.reel__step {
    counter-increment: passo;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    font-family: var(--type-family-utility);
    font-size: var(--type-sm);
    line-height: 1;
}

.reel__text { display: grid; gap: var(--space-2); min-width: 0; }

.reel__name {
    font-family: var(--type-family-display);
    font-size: var(--type-md);
    font-weight: var(--type-weight-regular);
    line-height: 1.25;
    color: var(--text);
}

.reel__body {
    font-size: var(--type-sm);
    line-height: 1.65;
    color: var(--text-dim);
    max-width: 46ch;
}

/* ── DA 900px: DUE COLONNE, ALTERNATE ────────────────────────────────────
   Immagine e testo si scambiano di lato a ogni passo. Non è vezzo: quattro
   blocchi identici uno sotto l'altro si leggono come un elenco e l'occhio li
   salta; alternandoli, ognuno chiede di essere guardato. */
@media (min-width: 900px) {
    .reel { gap: var(--space-24); }

    .reel__figure {
        grid-template-columns: 1.15fr 1fr;
        align-items: center;
        gap: var(--space-12);
    }

    .reel__item:nth-child(even) .reel__img { order: 2; }

    .reel__caption { align-items: flex-start; }
    .reel__name { font-size: var(--type-lg); }
    .reel__body { font-size: var(--type-base); }
}

@media (max-width: 600px) {
    .home-reel { padding: 0 var(--space-4); margin-bottom: var(--space-16); }
    .home-reel__head { margin-bottom: var(--space-8); }
    .reel { gap: var(--space-8); }
    .reel__figure { gap: var(--space-4); }
    .reel__caption { gap: var(--space-3); }
    .reel__step { width: 28px; height: 28px; font-size: var(--type-xs); }
}

@media (prefers-reduced-motion: no-preference) {
    /* L'immagine entra quando la si raggiunge: senza, quattro scene luminose
       già tutte lì si annullano a vicenda. `view-timeline` non è supportato
       ovunque e non serve — basta una comparsa alla prima vista, e dove non è
       supportata l'immagine è semplicemente già visibile. */
    @supports (animation-timeline: view()) {
        .reel__figure {
            animation: reel-in linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }

        @keyframes reel-in {
            from { opacity: 0; transform: translateY(28px); }
            to   { opacity: 1; transform: none; }
        }
    }
}

/* ==========================================================================
   LE SEZIONI DI TESTO

   Erano paragrafi larghi quanto la colonna, uno dopo l'altro, senza respiro
   fra loro: si leggevano come un documento. Ora ognuna ha la sua misura di
   lettura e un titolo che la apre.
   ========================================================================== */

.home-section {
    max-width: 640px;
    margin: 0 auto var(--space-24);
    padding: 0 var(--space-6);
}

.home-section h2 {
    font-family: var(--type-family-display);
    font-size: clamp(1.4rem, 4.5vw, var(--type-xl));
    font-weight: var(--type-weight-light);
    line-height: 1.2;
    letter-spacing: var(--type-tracking-tight);
    margin: 0 0 var(--space-5);
    color: var(--text);
}

/* Un filo d'accento sopra il titolo: apre la sezione senza aggiungere una
   parola, e dice che ne comincia una nuova. */
.home-section h2::before {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    margin-bottom: var(--space-5);
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--accent), transparent);
}

.home-section p {
    margin: 0 0 var(--space-4);
    font-size: var(--type-base);
    line-height: 1.75;
    color: var(--text-dim);
}

.home-section p:last-child { margin-bottom: 0; }

/* ── I TRE PASSI ─────────────────────────────────────────────────────────
   Erano una lista numerata in colonna. Su schermo largo diventano tre card
   affiancate: si vedono tutti insieme, e «sono solo tre cose» è
   un'informazione che si legge dalla forma prima che dal testo. */
#how { max-width: 1000px; }

.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-5);
}

.steps li {
    position: relative;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    border: 1px solid var(--edge, var(--border-strong));
    background:
        linear-gradient(180deg, rgba(212, 169, 74, 0.05), transparent 46%),
        var(--panel, var(--surface));
}

.step-number {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    font-family: var(--type-family-utility);
    font-size: var(--type-sm);
    line-height: 1;
}

.step-title {
    margin: 0 0 var(--space-2);
    font-family: var(--type-family-display);
    font-size: var(--type-md);
    color: var(--text);
    line-height: 1.25;
}

.step-body {
    margin: 0;
    font-size: var(--type-sm);
    line-height: 1.65;
    color: var(--text-dim);
}

@media (min-width: 820px) {
    .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

/* ── COSA RICEVI ─────────────────────────────────────────────────────────
   La riga dell'esperienza è il cuore dell'offerta e stava in fila con le
   altre voci: qui si stacca e le altre le fanno da contorno. */
.receive-hero {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.receive-hero__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--void, #0a0a0f);
}

.receive-hero__text {
    font-family: var(--type-family-display);
    font-size: var(--type-md);
    line-height: 1.35;
    color: var(--text);
}

.feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

.feature-list li {
    position: relative;
    padding-left: var(--space-6);
    font-size: var(--type-sm);
    line-height: 1.6;
    color: var(--text-dim);
}

.feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--accent) 70%, transparent);
}

@media (max-width: 600px) {
    .home-section { margin-bottom: var(--space-16); padding: 0 var(--space-4); }
    .receive-hero { padding: var(--space-5); gap: var(--space-3); }
    .receive-hero__text { font-size: var(--type-base); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   IL PANNELLO D'ACQUISTO
   ═══════════════════════════════════════════════════════════════════════════

   Sostituisce `.buy-choice`, che offriva due strade — conto o ospite — e
   compariva dopo un giro sul server. Qui ci sono le tre opzioni vere e si apre
   al clic.

   Sta in home.css e non in un foglio suo perché il frammento è condiviso con
   la pagina dei tarocchi, e quella carica già 'home': un foglio in più
   sarebbe una richiesta in più per una manciata di regole. */

.acquisto {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    transition: opacity .22s ease;
}

.acquisto[data-state='open'] { opacity: 1; }
.acquisto[hidden] { display: none; }

.acquisto__fondo {
    position: absolute;
    inset: 0;
    background: rgba(4, 4, 12, 0.72);
    backdrop-filter: blur(3px);
}

.acquisto__card {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    padding: var(--space-6) var(--space-5) var(--space-5);
    text-align: center;
}

.acquisto__titolo {
    font-family: var(--type-family-display);
    font-size: 1.35rem;
    margin: 0 0 var(--space-5);
}

/* Tre scelte affiancate dove c'è spazio, in colonna su un telefono. `auto-fit`
   invece di tre colonne fisse: se un giorno i tagli diventano due o quattro,
   qui non si tocca niente. */
.acquisto__scelte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.acquisto__scelta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease;
}

.acquisto__scelta:hover:not(:disabled),
.acquisto__scelta:focus-visible {
    border-color: var(--accent-dim);
    transform: translateY(-2px);
}

.acquisto__scelta:disabled { opacity: .55; cursor: progress; }

.acquisto__moneta { width: 44px; height: 44px; }

/* La pila del pacchetto: tre monete sovrapposte, a suggerire che sono più
   d'una senza doverlo scrivere. */
.acquisto__pila { position: relative; height: 44px; width: 60px; }

.acquisto__pila .acquisto__moneta { position: absolute; top: 0; }
.acquisto__moneta--a { left: 0; }
.acquisto__moneta--b { left: 8px; }
.acquisto__moneta--c { left: 16px; }

.acquisto__nome { font-weight: 600; }
.acquisto__prezzo { color: var(--accent); }

.acquisto__nota {
    font-size: 0.78rem;
    color: var(--text-faint);
    line-height: 1.35;
}

.acquisto__forma { display: contents; }

.acquisto__conto { margin: 0 0 var(--space-3); font-size: 0.9rem; }

.acquisto__annulla {
    background: none;
    border: none;
    color: var(--text-faint);
    font: inherit;
    cursor: pointer;
    padding: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
    .acquisto, .acquisto__scelta { transition: none; }
    .acquisto__scelta:hover, .acquisto__scelta:focus-visible { transform: none; }
}

/* ══ LE LINGUE DELLA MACCHINA ══════════════════════════════════════════════
   Non sono le lingue del sito: la macchina 1 è doppiata anche in francese, la
   2 no. Chi arriva sui tarocchi in francese viene mandato in inglese dal
   controller, e senza dirlo quel cambio sembra un errore.

   Discreto: è un'informazione, non un invito. Sta sotto il sottotitolo, dove
   chi sta ancora decidendo la incontra prima di cliccare. */
.lingue-macchina {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: var(--space-4) 0 0;
    font-family: var(--type-family-utility);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lingue-macchina__eti {
    margin-right: 0.2rem;
    color: var(--text-faint, var(--text-dim));
    letter-spacing: 0.1em;
}

.lingue-macchina__voce {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    padding: 0.18rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.3rem;
    color: var(--text-dim);
}

/* La bandierina sta alta quanto la sigla che le sta accanto, con un filo di
   bordo perche' il bianco dell'Italia e della Francia non si perda sul fondo
   scuro. Non e' un'immagine da scaricare: e' disegnata nel markup. */
.lingue-macchina__bandiera {
    flex: none;
    display: block;
    height: 0.72em;
    width: auto;
    border-radius: 1px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

/* La lingua in cui si sta guardando porta il contorno: chi legge in italiano
   vuole sapere se ITALIANO c'è, non leggere tre sigle uguali. */
/* ── LA LINGUA IN CUI SI STA GUARDANDO ────────────────────────────────────
   Aveva un contorno color oro e il testo in accento: sembrava un pulsante
   premuto, cioe' una cosa su cui si puo' cliccare. Ma questa riga non e' un
   selettore: dice soltanto quali lingue la macchina parla, e chi la leggeva
   provava a toccarla.

   Resta una distinzione, ma di sola INTENSITA': la lingua corrente col testo
   pieno, le altre smorzate. Si capisce quale sia senza che sembri un
   comando. */
.lingue-macchina__voce.is-tua {
    color: var(--text);
}

/* ── LE RECENSIONI ─────────────────────────────────────────────────────────
   In fondo, dove sono una prova e non una promessa: chi arriva vuole prima
   capire cosa si compra, e le parole di altri servono dopo. */
.recensioni {
    /* `--space-9` NON ESISTE: la scala salta da 8 a 10. Una variabile assente
       dentro una scorciatoia non lascia gli altri valori al loro posto, manda
       a monte l'INTERA dichiarazione — quindi la sezione restava senza alcun
       margine, incollata alla riga sopra e a cio' che viene dopo.

       E' il tipo di errore che non compare da nessuna parte: nessun avviso,
       nessuna console, solo una pagina che sembra fatta male. */
    padding: var(--space-8) 0 var(--space-10);
    border-top: 1px solid var(--border);
}

.recensioni__titolo {
    margin: 0 0 var(--space-6);
    text-align: center;
    font-family: var(--type-family-display);
    font-size: var(--type-lg);
    font-weight: 400;
    color: var(--text-dim);
}

/* ── LA PISTA ──────────────────────────────────────────────────────────────
   Scorre davvero, non è un'animazione: così il dito la trascina, la rotella la
   muove e il tab ci entra. Un nastro animato in CSS non si può toccare, e chi
   vuole rileggere una frase deve aspettare che torni.

   Le barre si nascondono perché il movimento continuo le farebbe lampeggiare,
   ma lo scorrimento resta: nasconderle non è disattivarle. */
.recensioni__pista {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-inline: var(--space-4);

    /* Le sfuma ai bordi invece di tagliarle di netto: una scheda tronca a metà
       dice «continua», una tagliata dal bordo dello schermo dice «è rotto». */
    mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}

.recensioni__pista::-webkit-scrollbar { display: none }

.recensioni__nastro {
    display: flex;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    flex: none;
}

.recensione {
    /* Posizionata: dentro c'è un `.visually-hidden`, che è `position: absolute`
       e senza un riferimento andrebbe a incollarsi al primo antenato
       posizionato, che potrebbe essere molto lontano. */
    position: relative;
    flex: none;
    width: min(20rem, 78vw);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    background: color-mix(in srgb, var(--bg-deep) 55%, transparent);
}

.recensione__stelle { display: flex; gap: 3px; margin: 0 }

/* Disegnate e non scritte: il carattere stella cambia forma su ogni sistema, e
   su qualcuno diventa un'emoji colorata in mezzo a una pagina che non ne ha. */
/* `--accent-bright` e non `--tr-oroVivo`: quest'ultimo vive in
   `films/tarot-01.css`, che nessuna delle due insegne carica. Sarebbe stato
   sempre e solo il colore di ripiego, cioe' una variabile che finge di
   seguire un tema e non segue niente. I due valori coincidono, ma questo e'
   nei token e vale su tutto il sito. */
.recensione__stelle svg { width: 15px; height: 15px; fill: var(--accent-bright) }

.recensione__testo {
    margin: 0;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--text);
}

.recensione__nome {
    margin: 0;
    font-family: var(--type-family-utility);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

/* Per chi ha chiesto meno movimento il nastro sta fermo. Non è solo gusto: per
   qualcuno il movimento continuo ai bordi dello sguardo è nausea. Le schede
   restano tutte lì, scorribili a mano. */
@media (prefers-reduced-motion: reduce) {
    .recensioni__pista { scroll-behavior: auto }
}

/* Durante il film sparisce con tutto il resto. */
body[data-machine] .recensioni { display: none }