/* ═══════════════════════════════════════════════════════════════════════
   FUNNEL BIGLIETTO · 5º STRATO — index-biglietto.html

   Si carica DOPO style.css, light.css, blue.css e blue-2.css, e non
   tocca niente di loro: il tema è esattamente quello di
   index-blue-2.html (carta azzurrata, inchiostro navy, Google Sans,
   frasi chiave su piastra blu piena). Questo foglio aggiunge soltanto
   le tre cose che in quel funnel non esistevano, perché lì il modulo
   stava dentro una modale e non c'era niente da estrarre:

   01 · LA PIASTRA DEL MODULO IN PAGINA. L'opt-in non è più una lastra
        di vetro sopra la pagina: è una card bianca attaccata sotto al
        titolo. I campi di .signup--modal restano dov'erano — qui c'è un
        blocco suo, .signup--inline, che non li eredita.
   02 · IL ROTORE. Tre cilindri blu, una cifra per cilindro, che girano
        e si fermano sul numero assegnato. È l'unica animazione nuova
        della pagina, e con prefers-reduced-motion non gira: si posa.
   03 · IL BIGLIETTO. La card con il numero, il tagliando perforato e
        la riga da portarsi via.

   Struttura: numerazione propria, non quella di style.css — questo
   foglio non riscrive sezioni esistenti, ne aggiunge.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   01 · LA MISURA DELLA PAGINA
   Il funnel lungo aveva quattro colonne e §12 di blue-2.css le ha
   portate a una, 780px, ma solo da 768px in su e solo per i blocchi
   dell'hero. Qui la pagina È l'hero: titolo, modulo e biglietto stanno
   sulla stessa colonna a QUALUNQUE larghezza, e il valore sta scritto
   una volta. Sul telefono il margine lo fa .wrap, come sempre.
   ═══════════════════════════════════════════════════════════════════════ */

.page-ticket {
    --ticket-measure: 780px;
}

.page-ticket .hero__title,
.page-ticket .hero__sub,
.page-ticket .optin-card,
.page-ticket .ticket-stage,
.page-ticket .ticket-recall {
    max-width: var(--ticket-measure);
    margin-inline: auto;
}

/* La pagina è corta: l'hero non deve lasciare sotto di sé gli 80px di
   stacco fra due sezioni che qui non ci sono. */
.page-ticket .hero {
    padding-bottom: var(--spacing-48);
}

/* Il titolo attacca il modulo: fra la chiusa del titolo e la piastra
   del form ci stanno 32px, non i 24 del titolo più i 40 della griglia
   dell'hero. Sono due pezzi della stessa cosa — la domanda e il campo
   dove si risponde — e vanno letti di fila. */
.page-ticket .hero__title {
    margin-bottom: var(--spacing-24);
}

.page-ticket .hero__sub {
    margin-bottom: var(--spacing-32);
}

/* Nel funnel lungo fra una piastra e la riga con la faccia blu passa
   sempre un raccordo a metà scala. Qui il titolo è fatto di due righe
   sole e sono ATTACCATE: la piastra sborda sotto il suo box (blue-2.css
   §03, inset -0.125em in basso) e si mangiava lo stacco, con il filo
   blu che arrivava a toccare le maiuscole della riga sotto. Un decimo
   di em glielo restituisce — in em, così resta lo stesso stacco a
   qualunque corpo js/main.js assegni alle due righe. */
.page-ticket .hero__title-big:not(.hero__title-big--em) + .hero__title-big--em {
    margin-top: 0.1em;
}


/* ═══════════════════════════════════════════════════════════════════════
   02 · IL CONTATORE DEI POSTI
   Una pastiglia mono, come la striscia annuncio: è un'etichetta
   tecnica, non una frase. Il numero dentro prende il blu di lavoro,
   perché è l'unica cosa che cambia.
   ═══════════════════════════════════════════════════════════════════════ */

.seats {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
    background: var(--surface-nav-ink);
    border: 1px solid var(--color-wire-gray);
    border-radius: var(--radius-pill);
    padding: 6px var(--spacing-12);
    font-family: var(--font-geistmono);
    font-size: var(--text-body-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-aurora-peach);
    margin: 0 0 var(--spacing-16);
}

.seats__num {
    font-weight: var(--font-weight-semibold);
    color: var(--color-aurora-violet);
    font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════════════════
   03 · LA PIASTRA DEL MODULO
   Card bianca su carta azzurrata — il rapporto bianco-su-azzurro del
   tema blu — con la lama dello spettro in testa, come le card chiave
   del funnel lungo. Niente vetro e niente sfocatura: quelle sono della
   modale, e qui non c'è niente sotto da velare.
   ═══════════════════════════════════════════════════════════════════════ */

.optin-card {
    position: relative;
    overflow: hidden;
    background: var(--surface-recess-black);
    border: 1px solid var(--color-wire-gray);
    border-radius: var(--radius-xl);
    padding: var(--spacing-32) var(--spacing-24) var(--spacing-24);
    box-shadow:
        0 20px 48px -30px rgba(16, 32, 70, 0.4),
        var(--shadow-subtle);
}

.optin-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-aurora-spectrum);
}

.optin-card[hidden] {
    display: none;
}

/* Il titolo del modulo è lo stesso oggetto della modale (.signup__title,
   due scale e maiuscolo), ma qui la colonna è larga 780 e non 420: il
   tetto del calcolo può salire. */
.signup--inline .signup__title {
    margin-bottom: var(--spacing-24);
}

.signup--inline .signup__title .title-em {
    --fit-max: 58px;
    --fit-min: 16px;
}

/* ─── La griglia dei campi ────────────────────────────────────────────
   Su una colonna da 780px tre campi impilati lasciano la card tutta
   aria e nessuna densità: nome ed email vanno appaiati, il cellulare
   tiene la riga sua (il prefisso internazionale ha già una colonna
   dentro) e il bottone chiude a tutta larghezza.
   Sotto i 640px torna tutto in colonna unica senza altre regole: è
   l'impostazione di .optin-form in style.css. */
@media (min-width: 640px) {
    .optin-form--inline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .optin-form--inline .field--phone,
    .optin-form--inline .optin-form__wide {
        grid-column: 1 / -1;
    }
}

/* I campi dentro la piastra bianca: un incavo appena azzurro, o un
   bianco su bianco si vedrebbe solo dal filo. Al fuoco diventano
   bianchi pieni — il contrario di quello che fa il vetro della modale,
   e per lo stesso motivo: il campo attivo deve essere il punto più
   chiaro della card. */
.signup--inline .field__box {
    background: #f6f9fd;
    border-color: #d8dfec;
}

.signup--inline .field__box:focus-within {
    background: #ffffff;
    border-color: var(--color-aurora-violet);
    box-shadow:
        0 0 0 3px rgba(0, 84, 190, 0.16),
        inset 0 1px 2px rgba(16, 32, 70, 0.04);
}

/* La CTA in pagina può tenere la freccia e il corpo pieno: qui lo
   spazio c'è. Resta su una riga sola. */
.signup--inline .btn--block {
    white-space: nowrap;
    font-size: clamp(15px, 4.2vw, var(--text-read));
}

/* Le due righe di chiusura sono una cosa sola, come nella modale: il
   gap della griglia più il margine del <p> facevano 28px fra due righe
   che si leggono di fila. */
.optin-form--inline .cta-note {
    margin-top: calc(var(--spacing-4) - var(--spacing-16));
}


/* ═══════════════════════════════════════════════════════════════════════
   04 · IL RICHIAMO DEL COOKIE
   Se in questo browser un biglietto è già stato assegnato, la pagina lo
   dice prima del modulo: la riga sta sopra la card, non dentro, perché
   non è un campo — è una scorciatoia.
   ═══════════════════════════════════════════════════════════════════════ */

.ticket-recall {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-12);
    background: var(--surface-nav-ink);
    border: 1px solid var(--color-wire-gray);
    border-radius: var(--radius-xl);
    padding: var(--spacing-12) var(--spacing-16);
    margin-bottom: var(--spacing-16);
    font-size: var(--text-body);
    color: var(--color-off-white);
}

.ticket-recall[hidden] {
    display: none;
}

.ticket-recall__num {
    font-family: var(--font-geistmono);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--color-aurora-peach);
}

.ticket-recall__btn {
    margin-left: auto;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: var(--font-weight-semibold);
    color: var(--color-aurora-violet);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════════════════
   05 · IL ROTORE
   Tre cilindri, una cifra per cilindro: 999 posti sono esattamente tre
   cifre, e il rotore è la forma di quel numero — non una decorazione
   che gli gira intorno.

   Come funziona: dentro ogni cilindro js/ticket.js impila una striscia
   di celle (più giri di 0→9, e in fondo la cifra che deve uscire), poi
   la trasla in su di un numero esatto di celle. La finestra è
   overflow:hidden, quindi si vede una cella alla volta e la corsa si
   legge come una rotazione. L'altezza della cella è UN token
   (--reel-cell): la finestra, il corpo della cifra e la corsa si
   misurano tutti da lì, così il rotore scala di un pezzo solo.
   ═══════════════════════════════════════════════════════════════════════ */

.ticket-stage[hidden] {
    display: none;
}

.ticket-stage__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
    font-family: var(--font-geistmono);
    font-size: var(--text-body-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-aurora-pink);
    margin: 0 0 var(--spacing-16);
}

.reels {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
    margin: 0;
}

.reel {
    --reel-cell: clamp(68px, 17vw, 112px);
    position: relative;
    overflow: hidden;
    width: calc(var(--reel-cell) * 0.8);
    height: var(--reel-cell);
    border-radius: 10px;
    background: var(--gradient-cta-blue);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 1px 2px rgba(10, 24, 60, 0.16),
        0 10px 26px rgba(10, 24, 60, 0.18);
}

/* Il vetro del cilindro: ombra in cima e al piede, luce in mezzo. È
   quello che fa leggere la cella come la faccia di un rullo invece che
   come un quadrato blu con un numero dentro. Decorazione pura, sta
   sopra la cifra e non intercetta niente. */
.reel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(to bottom,
            rgba(5, 16, 48, 0.42) 0%,
            rgba(5, 16, 48, 0.06) 26%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(5, 16, 48, 0.08) 74%,
            rgba(5, 16, 48, 0.42) 100%);
}

.reel__strip {
    display: block;
    will-change: transform;
}

.reel__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--reel-cell);
    font-family: var(--font-display-heavy);
    font-weight: 800;
    font-size: calc(var(--reel-cell) * 0.62);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
}

/* La corsa. Una curva che parte già veloce e si spegne lunga: il
   rotore deve sembrare lanciato e poi frenato, non interpolato.
   La durata e il ritardo li scrive js/ticket.js cilindro per cilindro
   (i tre non si fermano insieme, o il numero arriverebbe tutto in una
   volta e non ci sarebbe niente da guardare). */
.reel.is-spinning .reel__strip {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.1, 0.72, 0.1, 1);
}

@media (prefers-reduced-motion: reduce) {

    /* Niente corsa: la cifra è già al suo posto, il rotore si posa. */
    .reel.is-spinning .reel__strip {
        transition: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   06 · IL BIGLIETTO
   Card bianca, il rotore in mezzo, e sotto il tagliando: una perforata
   tratteggiata con due tacche sui fianchi. Le tacche sono due cerchi
   del colore della carta, non due buchi: la card sta su un fondo noto
   (#eef4fc dell'hero), quindi si possono dipingere.
   ═══════════════════════════════════════════════════════════════════════ */

.ticket {
    position: relative;
    background: var(--surface-recess-black);
    border: 1px solid var(--color-wire-gray);
    border-radius: var(--radius-xl);
    padding: var(--spacing-32) var(--spacing-24) var(--spacing-24);
    text-align: center;
    box-shadow:
        0 20px 48px -30px rgba(16, 32, 70, 0.4),
        var(--shadow-subtle);
}

.ticket::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-aurora-spectrum);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.ticket__label {
    font-family: var(--font-geistmono);
    font-size: var(--text-body-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-mute-gray);
    margin: 0 0 var(--spacing-16);
}

.ticket__num {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
    margin: 0 0 var(--spacing-24);
}

/* Il "N." davanti al numero: sta alla scala della cifra ma non al suo
   peso — è l'unità di misura, non il valore. */
.ticket__hash {
    font-family: var(--font-geistmono);
    font-size: clamp(20px, 5vw, 30px);
    color: var(--color-aurora-peach);
    align-self: center;
}

.ticket__name {
    font-size: var(--text-read);
    font-weight: var(--font-weight-semibold);
    color: var(--color-bone-white);
    margin: 0;
}

/* ─── Il tagliando ────────────────────────────────────────────────────
   La perforata è il bordo superiore di questo blocco. Il padding
   laterale negativo lo stende per tutta la card: la riga tratteggiata
   deve arrivare ai due fianchi, o non legge come uno strappo. */
.ticket__stub {
    position: relative;
    margin: var(--spacing-24) calc(var(--spacing-24) * -1) 0;
    padding: var(--spacing-24) var(--spacing-24) 0;
    border-top: 1px dashed #c3cde0;
}

/* Le due tacche: mezzi cerchi del colore della carta dell'hero,
   centrati sulla perforata e mangiati dal bordo della card. */
.ticket__stub::before,
.ticket__stub::after {
    content: "";
    position: absolute;
    top: -9px;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-pill);
    background: #eef4fc;
    border: 1px solid var(--color-wire-gray);
}

.ticket__stub::before {
    left: -10px;
    clip-path: inset(0 0 0 50%);
}

.ticket__stub::after {
    right: -10px;
    clip-path: inset(0 50% 0 0);
}

.ticket__note {
    font-size: var(--text-body);
    line-height: 1.55;
    color: var(--color-off-white);
    margin: 0;
}

.ticket__note strong {
    font-weight: var(--font-weight-semibold);
    color: var(--color-bone-white);
}

.ticket__meta {
    font-family: var(--font-geistmono);
    font-size: 13px;
    letter-spacing: 0;
    color: var(--color-mute-gray);
    margin: var(--spacing-12) 0 0;
}

/* La riga sotto il biglietto: come ricontrollare il numero. Non è una
   CTA, è una nota — mono, piccola, centrata. */
.ticket-after {
    text-align: center;
    font-size: var(--text-body);
    color: var(--color-off-white);
    margin: var(--spacing-24) 0 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   07 · POSTI ESAURITI
   Il 999º biglietto è l'ultimo: dopo, il modulo non ha più niente da
   assegnare e la pagina lo dice invece di girare a vuoto. Rosso, che
   nel tema blu è uno dei due soli colori di STATO.
   ═══════════════════════════════════════════════════════════════════════ */

.sold-out[hidden] {
    display: none;
}

.sold-out {
    background: #fff5f5;
    border: 1px solid #f3c9cd;
    border-radius: var(--radius-xl);
    padding: var(--spacing-24);
    text-align: center;
}

.sold-out__title {
    font-size: var(--text-subheading);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    color: #b0202d;
    margin: 0 0 var(--spacing-8);
}

.sold-out__line {
    font-size: var(--text-body);
    color: var(--color-off-white);
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   08 · TELEFONO
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .optin-card,
    .ticket {
        padding: var(--spacing-24) var(--spacing-16) var(--spacing-16);
    }

    .ticket__stub {
        margin-inline: calc(var(--spacing-16) * -1);
        padding-inline: var(--spacing-16);
    }

    .reels {
        gap: 6px;
    }
}