/**
 * L'apertura: il primo mezzo secondo di Sicily Travel.
 *
 * Misure, colori e tempi presi dall'eroe del landing di grecale — non
 * reinventati: se lì la trinacria è 97px e le gambe girano in 26 secondi,
 * qui deve essere uguale, o le due cose si somigliano e basta.
 *
 * Sta in un foglio suo e non in app.css perché la vede chi arriva UNA volta
 * per sessione: caricarla su ogni altra pagina sarebbe peso pagato per niente.
 */

/**
 * Il carattere del claim.
 *
 * `optional` e non `swap`: se non è pronto in un istante, il browser usa il
 * monospazio di sistema e NON cambia più. Meglio un carattere di sistema
 * decente che una riga che cambia faccia sotto gli occhi mentre la leggi.
 * Dalla seconda visita ce l'ha già e usa quello vero.
 *
 * Il marchio invece non ha nessun carattere: è un disegno.
 */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/assets/caratteri/jetbrains-mono-500.woff2') format('woff2');
    font-weight: 500;
    font-display: optional;
}

:root {
    --notte: #082138;   /* il fondo del landing */
    --fondo: #0b2a47;
    --cupo:  #123f6e;
    --oro:   #ffd98a;
}

/**
 * LA BANDA IN FONDO — già successa quattro volte, non deve succedere più.
 *
 * `svh` è la finestra CON la barra del browser visibile. Quando la barra si
 * ritrae la finestra cresce, e sotto il corpo resta una striscia che nessuno
 * dipinge: su Safari si vede il grigio di sistema.
 *
 * Il rimedio è una riga sola, ma va presa giusta: all'html va il colore in cui
 * il gradiente FINISCE, non quello da cui parte. Col colore di partenza la
 * striscia c'è lo stesso, solo di un altro colore.
 *
 * E niente `overflow:hidden` sul body: su Safari rompe la propagazione del
 * fondo e riporta indietro il problema.
 */
html {
    height: 100%;
    background: var(--cupo);   /* dove ARRIVA il gradiente, non da dove parte */
}

body.benvenuto {
    height: 100%;
    margin: 0;
    background: var(--cupo);
    color: #eaf4fb;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------ l'header */

/**
 * Posizioni identiche all'header del landing di grecale: 54px di altezza,
 * i segni larghi 46px, a .35rem da sinistra e .5rem da destra.
 * Non misurate a occhio — lette dal suo land.css.
 *
 * Quello che NON si porta dietro: fondo, bordo sotto, scritta in mezzo e
 * il nascondersi scorrendo. Qui è solo lo stato iniziale su una pagina
 * che non scorre.
 */
.testa-benvenuto {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;

    min-height: 54px;
    padding-top: env(safe-area-inset-top, 0px);
}

/**
 * I due segni stanno ai lati in modo ASSOLUTO, non con uno spazio-fra:
 * così la loro distanza dal bordo è quella e basta, e non cambia con
 * quello che c'è in mezzo — che oggi è niente e domani chissà.
 */
.testa-benvenuto button {
    position: absolute;
    top: env(safe-area-inset-top, 0px);
    bottom: 0;
    width: 46px;

    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    color: #fff;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    /**
     * `:active` da solo NON BASTA: un tocco vero dura pochi millesimi e la
     * pigiata sparisce prima che l'occhio la registri. Il copione mette anche
     * una classe e la tiene finché il dito sta giù, con un minimo di 130
     * millesimi. `:active` resta come rete.
     *
     * `scale(.92)` è quello che usa grecale su .ln-profile.
     */
    transition: transform .07s ease-out;
}

.testa-benvenuto button:active,
.testa-benvenuto button.pigiato {
    transform: scale(.92);
}

/**
 * Le distanze dal bordo sono UGUALI a destra e a sinistra.
 * Nel landing di grecale erano .35rem e .5rem — probabilmente perché
 * l'icona di FontAwesome aveva un suo margine interno che compensava.
 * Qui l'icona è un disegno nostro, quindi il conto lo facciamo noi.
 */
.ti-righe {
    left: .4rem;
    flex-direction: column;
    gap: 5px;
}

.ti-righe span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #fff;

    /* si legge anche sul cielo chiaro, come nel landing */
    box-shadow: 0 1px 2px rgba(0, 10, 25, .35);
}

.ti-maschere {
    right: .4rem;
}

/**
 * 1.38rem e non 1.2: il disegno delle maschere è più largo che alto
 * (119,9 x 100), quindi dentro un riquadro quadrato resta alto 16px e largo
 * altrettanto. Portandolo a 1.38rem diventa largo 22px come le righe —
 * e i due segni pesano uguale invece che sembrare uno più piccolo dell'altro.
 */
.ti-maschere svg {
    width: 1.38rem;
    height: 1.38rem;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0, 10, 25, .35));
}

/* ---------------------------------------------------------------- l'eroe */

.apertura {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3.4rem 1.3rem 3rem;
    text-decoration: none;
    color: inherit;

    /**
     * L'alone qui sotto è largo più dello schermo e sporge sotto: senza
     * questo la pagina scorre di lato e in giù, su una pagina che non ha
     * niente da scorrere.
     *
     * E va messo QUI, non sul body: sul body romperebbe il modo in cui il
     * fondo si propaga, e tornerebbe la banda grigia in fondo su Safari.
     * Sono due problemi diversi che si curano in due posti diversi.
     */
    overflow: hidden;

    background: linear-gradient(to bottom,
        #061a2e 0%,
        var(--notte) 38%,
        var(--fondo) 72%,
        var(--cupo) 100%);
}

/* La luce dal basso: un alone che respira, sotto tutto il resto. */
.apertura::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -26vh;
    width: min(170vw, 1200px);
    aspect-ratio: 2 / 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(150, 220, 235, .38) 0%,
        rgba(31, 143, 176, .20) 38%,
        rgba(8, 33, 56, 0) 70%);
    filter: blur(20px);
    pointer-events: none;
    animation: respiro 6s ease-in-out infinite;
}

.apertura-centro {
    position: relative;   /* sopra la luce */
    z-index: 1;
    display: block;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

/* -------------------------------------------------------------- il marchio */

/**
 * Misure identiche al landing di grecale, distanza compresa: 97px, e
 * 1.2rem fra il marchio e la scritta. Niente scostamenti: provati sia
 * la misura in proporzione allo schermo sia la distanza raddoppiata,
 * e in tutti e due i casi sembrava un'altra cosa.
 */
.marchio {
    position: relative;
    width: 97px;
    height: 97px;
    margin: 0 auto 1.2rem;   /* come nel landing */
    filter:
        drop-shadow(0 0 22px rgba(255, 214, 140, .45))
        drop-shadow(0 10px 22px rgba(0, 20, 40, .5));
}

.marchio-gambe,
.marchio-testa {
    position: absolute;
    inset: 0;
    background-color: #fff;             /* il colore è QUESTO, non l'SVG */
    -webkit-mask-size: contain;         mask-size: contain;
    -webkit-mask-position: center;      mask-position: center;
    -webkit-mask-repeat: no-repeat;     mask-repeat: no-repeat;
}

.marchio-gambe {
    -webkit-mask-image: url('/assets/marchio/trinacria-gambe.svg');
            mask-image: url('/assets/marchio/trinacria-gambe.svg');
    animation: gira 26s linear infinite;
    will-change: transform;
}

.marchio-testa {
    -webkit-mask-image: url('/assets/marchio/trinacria-testa.svg');
            mask-image: url('/assets/marchio/trinacria-testa.svg');
}

/* --------------------------------------------------------------- la scritta */

.marchio-scritta {
    margin: 0;
    line-height: 0;   /* è un disegno, non una riga di testo: niente spazio sotto */
}

/**
 * La misura è quella che aveva il titolo di testo nel landing
 * (clamp(3rem, 12vw, 5.4rem) di altezza), riportata sulla larghezza
 * del disegno: il rapporto della parola è 375 x 100.
 */
.scritta {
    display: block;
    width: clamp(11.2rem, 45vw, 20.2rem);
    height: auto;

    /* un blocco con una larghezza sua non si centra col text-align:
       gli serve il margine automatico, o si appoggia a sinistra */
    margin-inline: auto;
    color: #fff;

    /* l'alone segue la forma delle lettere, non il loro riquadro */
    filter: drop-shadow(0 0 34px rgba(150, 220, 235, .55));
}

/* ------------------------------------------------------------------ il claim */

/**
 * Da terminale: monospazio perché è un sistema operativo, e il cursore
 * che lampeggia perché la frase non è finita — «presto online».
 */
.claim {
    margin: calc(.55rem + 14px) 0 0;
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-weight: 500;
    font-size: clamp(.86rem, 3.5vw, 1.2rem);
    letter-spacing: -.02em;
    line-height: 1.55;
    color: rgba(234, 244, 251, .9);
}

/**
 * In oro le due cose che contano: di chi parla, e che non c'è ancora.
 *
 * L'oro sta su «della Sicilia» e non su «ti semplificano la vita»
 * perché quello è il soggetto.
 *
 * Il possessivo è stato provato e tolto: «ti semplificano» mette già
 * dentro la persona, di nascosto. Dirlo due volte lo indebolisce, e
 * «della Sicilia» senza possessivo è una pretesa più grossa.
 */
.claim .c-sicilia,
.claim .c-presto {
    color: var(--oro);
}

.claim .c-presto {
    letter-spacing: .02em;
}

/**
 * La risposta al tocco: il cursore batte più in fretta per un secondo.
 *
 * Cambia solo la DURATA: è la stessa animazione, accelerata. Non un altro
 * segnale che si aggiunge, ma uno che c'era che cambia ritmo — la differenza
 * fra qualcuno che ti risponde e qualcuno che ti suona un allarme.
 */
.sta-rispondendo .claim .cursore {
    animation-duration: .18s;
}

.claim .cursore {
    display: inline-block;
    width: .5em;
    height: 1.05em;
    margin-left: .18em;
    border-radius: 1px;
    background: var(--oro);
    vertical-align: -.16em;
    box-shadow: 0 0 10px rgba(255, 217, 138, .8);
    animation: lampeggia 1.05s steps(1) infinite;
}

/* ------------------------------------------------------------- i movimenti */

@keyframes lampeggia {
    50% { opacity: 0; }
}

@keyframes gira {
    to { transform: rotate(360deg); }
}

@keyframes respiro {
    0%, 100% { opacity: .78; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;   transform: translateX(-50%) scale(1.05); }
}

/**
 * Chi ha chiesto meno movimento non lo riceve: per qualcuno una cosa
 * che gira è mal di testa, non un effetto. (Come in grecale, dove
 * .legs ha `animation:none!important` nella stessa condizione.)
 */
@media (prefers-reduced-motion: reduce) {
    .marchio-gambe,
    .apertura::after,
    .claim .cursore {
        animation: none !important;
    }
}