/* ═══════════════════════════════════════════════════════════════════════════
   L'ATRIO — DUE MACCHINE SU UN CIELO NOTTURNO
   ═══════════════════════════════════════════════════════════════════════════

   ── PERCHÉ IL CIELO È IN CSS E NON UN'IMMAGINE ─────────────────────────────
   Perché un cielo stellato di sfondo è qualche punto luminoso su un fondo
   scuro, e un'immagine per farlo peserebbe centinaia di chilobyte per dire una
   cosa che tre gradienti dicono in mezzo chilobyte. E si adatta a qualunque
   schermo senza sgranarsi né ripetersi visibilmente.

   Le stelle sono tre strati con passi diversi — 223, 311 e 173 pixel, tutti primi — scelti
   perché non hanno divisori in comune: sovrapposti non tornano mai in fase, e
   l'occhio non riconosce lo schema. Con passi multipli fra loro si vedrebbe la
   griglia. */

body.atrio-cielo {
    background:
        /* Le stelle: piccole e rade nei primi due strati, un po' più grandi e
           più rare nel terzo, che dà profondità. */
        radial-gradient(1px 1px at 18% 12%,  rgba(255,255,255,0.85), transparent 100%),
        radial-gradient(1px 1px at 74% 26%,  rgba(255,255,255,0.70), transparent 100%),
        radial-gradient(1px 1px at 41% 63%,  rgba(255,255,255,0.60), transparent 100%),
        radial-gradient(1px 1px at 88% 78%,  rgba(255,255,255,0.75), transparent 100%),
        radial-gradient(1.4px 1.4px at 33% 88%, rgba(214,232,255,0.65), transparent 100%),
        radial-gradient(1.4px 1.4px at 62% 8%,  rgba(214,232,255,0.55), transparent 100%),

        /* Il fondo: lo stesso blu di notte profonda che il film usa per il suo
           cielo (`PALETTE.fondo`, 0x060d20). Passando dall'atrio alla
           cinematica il colore non cambia. */
        linear-gradient(180deg, #070f24 0%, #060d20 60%, #04091a 100%);

    background-size:
        223px 223px, 223px 223px,
        311px 311px, 311px 311px,
        173px 173px, 173px 173px,
        100% 100%;

    background-attachment: fixed;
}

.atrio {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--space-9) var(--space-5) var(--space-10);
}

.atrio__lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    /* `auto-fit` invece di due colonne fisse: il numero di macchine cambia, e
       su un telefono vanno in colonna senza che nessuno lo scriva. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-7);
}

.atrio__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-lg);
    overflow: hidden;
    /* Appena più chiaro del cielo, non un riquadro netto: la scheda deve
       sembrare appoggiata sulla notte, non ritagliata dentro. */
    background: rgba(12, 20, 44, 0.62);
    border: 1px solid rgba(150, 180, 255, 0.14);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    transition: border-color 260ms ease, transform 260ms ease, box-shadow 260ms ease;
}

.atrio__card:hover,
.atrio__card:focus-visible {
    border-color: rgba(190, 210, 255, 0.38);
    transform: translateY(-4px);
    box-shadow: 0 26px 64px rgba(0, 0, 0, 0.55);
}

/* Il mobile è alto e stretto: si mostra intero, non ritagliato. Tagliarlo in
   altezza gli toglierebbe l'insegna o la base, che sono ciò che lo distingue
   dall'altra macchina. */
.atrio__cornice { position: relative; display: block; }

.atrio__foto {
    width: 100%;
    height: auto;
    display: block;
}

/* ── LA SFUMATURA IN BASSO ────────────────────────────────────────────────
   Le immagini portano in basso la firma dello strumento con cui sono state
   generate. Ritagliarla via toglierebbe anche la base del mobile, che è parte
   della macchina; coprirla con una banda piena si vedrebbe come una banda.

   Una sfumatura verso il colore della scheda fa sparire la scritta e sembra
   che il mobile si appoggi sul fondo invece di finire di netto.

   ── I NUMERI ─────────────────────────────────────────────────────────────
   La scritta occupa l'ultimo 8,4% dell'altezza: righe 938-965 su 1024,
   misurate cercando i pixel chiari nella fascia bassa.

   La sfumatura copre l'ultimo 18% e diventa piena al 62% del suo percorso,
   piena a y=953, mentre la scritta comincia a 938. Per questo
   e' gia' al 94% di opacita' al 46%, che cade a y=924 — quattordici pixel
   PRIMA che la scritta cominci. Coprendo solo l'8,4% esatto, la sfumatura
   sarebbe stata trasparente proprio dove serviva.

   Il colore d'arrivo e' il fondo effettivo della scheda: rgba(12,20,44,0.62)
   sopra il cielo da' circa rgb(10,17,39). Sfumando verso il colore dichiarato
   invece che verso quello che si vede, in fondo si noterebbe uno scalino. */
.atrio__cornice::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;          /* -1: evita una riga chiara sul bordo, per arrotondamento */
    height: 18%;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(10, 17, 39, 0)    0%,
        rgba(10, 17, 39, 0.55) 26%,
        rgba(10, 17, 39, 0.94) 46%,
        rgb(10, 17, 39)        62%,
        rgb(10, 17, 39)       100%
    );
}

.atrio__testo { padding: var(--space-5) var(--space-5) var(--space-4); flex: 1; }

.atrio__nome {
    font-family: var(--type-family-display);
    font-size: 1.5rem;
    margin: 0 0 var(--space-2);
}

.atrio__claim {
    color: var(--text-dim);
    margin: 0;
    line-height: 1.55;
}

.atrio__lingua {
    margin: var(--space-3) 0 0;
    font-size: 0.85rem;
    color: var(--text-faint);
}

.atrio__entra {
    display: block;
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid rgba(150, 180, 255, 0.14);
    font-variant: small-caps;
    letter-spacing: 0.09em;
    color: var(--accent);
}

/* Il movimento non è decorazione, ma nemmeno indispensabile. */
@media (prefers-reduced-motion: reduce) {
    .atrio__card { transition: none; }
    .atrio__card:hover, .atrio__card:focus-visible { transform: none; }
}

/* ══ IL VENTAGLIO E LO SLOGAN ══════════════════════════════════════════════
   Il poster di una macchina è un oggetto scuro in una vetrina scura: da
   lontano le due schede si somigliano. Quattro carte aperte davanti al mobile
   dicono in un colpo d'occhio che dentro ci sono i tarocchi, e la frase sopra
   dice perché entrarci.

   Sta dentro `.atrio__cornice`, che è già `position: relative` per la sua
   sfumatura: niente contenitori nuovi. */
.atrio__ventaglio {
    position: absolute;
    left: 50%;
    bottom: 8%;
    z-index: 2;
    display: block;
    width: 78%;
    height: 34%;
    transform: translateX(-50%);
    pointer-events: none;
}

/* Le carte ruotano attorno a un perno SOTTO di loro, come le tiene una mano:
   le cime divaricano e le basi convergono. Ruotandole sul proprio centro si
   ottengono quattro rettangoli inclinati, che non è un ventaglio. */
.atrio__ventaglio img {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 30%;
    height: auto;
    border-radius: 0.3rem;
    transform-origin: 50% 190%;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.7);
    transition: transform 420ms cubic-bezier(0.22, 0.68, 0.24, 1);
}

.atrio__ventaglio img:nth-child(1) { transform: translateX(-50%) rotate(-21deg); }
.atrio__ventaglio img:nth-child(2) { transform: translateX(-50%) rotate(-7deg); }
.atrio__ventaglio img:nth-child(3) { transform: translateX(-50%) rotate(7deg); }
.atrio__ventaglio img:nth-child(4) { transform: translateX(-50%) rotate(21deg); }

/* Al passaggio il ventaglio si apre di un soffio: è la scheda che risponde,
   non un'animazione che parte da sola. */
.atrio__card:hover .atrio__ventaglio img:nth-child(1),
.atrio__card:focus-visible .atrio__ventaglio img:nth-child(1) { transform: translateX(-50%) rotate(-29deg); }
.atrio__card:hover .atrio__ventaglio img:nth-child(2),
.atrio__card:focus-visible .atrio__ventaglio img:nth-child(2) { transform: translateX(-50%) rotate(-10deg); }
.atrio__card:hover .atrio__ventaglio img:nth-child(3),
.atrio__card:focus-visible .atrio__ventaglio img:nth-child(3) { transform: translateX(-50%) rotate(10deg); }
.atrio__card:hover .atrio__ventaglio img:nth-child(4),
.atrio__card:focus-visible .atrio__ventaglio img:nth-child(4) { transform: translateX(-50%) rotate(29deg); }

/* ── Lo slogan ─────────────────────────────────────────────────────────────
   Sopra le carte, non sotto: sotto finirebbe nella sfumatura che chiude la
   cornice, e un testo su una sfumatura si legge male qualunque colore abbia.
   L'ombra è netta e stretta perché deve staccarlo da un fondo che cambia da
   una carta all'altra. */
.atrio__slogan {
    position: absolute;
    left: 50%;
    bottom: 44%;
    z-index: 3;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
    pointer-events: none;

    font-family: var(--type-family-display);
    font-size: clamp(1.05rem, 2.6vw, 1.5rem);
    line-height: 1.15;
    letter-spacing: 0.02em;
    color: #f3e2b8;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.95),
        0 0 18px rgba(0, 0, 0, 0.8),
        0 0 34px rgba(224, 165, 60, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .atrio__ventaglio img { transition: none; }
}