/*
  Compito:   le poche cose che aggiungiamo noi alla landing di st26
  Grecale
  ON

  Grecale v0.0.1-R00 - 2026-08-06 - 16:20 - Creato

  ═══ PERCHÉ UN FILE A PARTE, E PERCHÉ DEVE RESTARE CORTO ════════════════════
  `land.css` è una COPIA di st26: il giorno che là dentro cambia qualcosa, si
  ricopia e basta. Se ci scrivessimo dentro anche una riga nostra, ricopiarlo
  vorrebbe dire perderla — e non ricopiarlo vorrebbe dire due file che
  divergono senza che nessuno lo decida.

  Quindi quello che è nostro sta qui, e si vede a colpo d'occhio quanto è.
  Il giorno che questo file diventa lungo, non è più una copia con qualche
  aggiunta: è una forchetta, e va detto.
*/

/*
  ═══ LA STESSA OMBRA DELLA PILLOLA ══════════════════════════════════════════
  Il form di «ti aspettavo» è una pillola che sporge dal fondo: filo di luce
  sopra, e un'ombra lunga e morbida sotto. Il bottone che invia e i tondi dei
  social stavano invece piatti sulla pagina — tre cose che si toccano, con due
  comportamenti diversi.

  Adesso hanno la stessa, identica: quello che si tocca si comporta allo stesso
  modo, e non c'è bisogno di impararlo due volte.

      inset 0 1px 0 rgba(255,255,255,.6)      il filo di luce in cima
      0 16px 32px -18px rgba(0,12,28,.8)      l'ombra che stacca dal fondo
*/
/*
  E il bordo se ne va: `land.css` mette `border:1px solid transparent` sui
  tondi, che serviva a tenere il posto per l'anello del `segnato`. Adesso che
  c'è il filo di luce dell'ombra, quel bordo è un secondo contorno sullo stesso
  millimetro — e due contorni sulla stessa forma la fanno sembrare stampata due
  volte. Il posto per l'anello lo tiene il `box-shadow`, che non occupa spazio.
*/
.oa-t { border: 0; }

.pillola button,
.oa-t {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .6),
        0 16px 32px -18px rgba(0, 12, 28, .8);
}

/*
  Premuto, l'ombra rientra: un tasto vero, schiacciandosi, si avvicina al piano
  e l'ombra si accorcia. Senza questo il bottone si rimpicciolisce ma resta
  sospeso, e si vede che è un disegno.
*/
.pillola button:active,
.oa-t:active {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .35),
        0 6px 14px -10px rgba(0, 12, 28, .8);
}

/* Il segnato tiene il suo anello d'oro, e ci aggiunge l'ombra: l'anello dice
   «è questo», l'ombra dice «si tocca». Sono due cose diverse. */
.oa-t.segnato {
    box-shadow:
        0 0 0 2px var(--gold),
        inset 0 1px 0 rgba(255, 255, 255, .6),
        0 16px 32px -18px rgba(0, 12, 28, .8);
}

/*
  ═══ IL TONDO DI GOOGLE È ROSSO ═════════════════════════════════════════════
  In st26 è bianco con la G rossa. Accanto a Facebook (blu pieno) e Apple (nero
  pieno) restava l'unico vuoto: tre tondi in fila, due che sono un colore e uno
  che è un buco.

  Adesso è pieno anche lui, e la G diventa bianca — lo stesso rosso di prima,
  girato: `#ea4335` è il rosso della G di Google, non un rosso a caso.
*/
.oa-t.oa-google {
    background: #ea4335;
    color: #fff;
}

/*
  ═══ NIENTE ANELLO GIALLO, E IL TONDO SI PREME ══════════════════════════════
  L'anello d'oro (`.segnato`) diceva «ho preso nota che lo vuoi» quando un
  accesso non era ancora pronto. Adesso sono tutti pronti: quell'anello non ha
  più niente da dire, e un segno che resta acceso senza significare niente
  insegna a non guardarlo.

  Al suo posto la cosa che serve davvero: il tondo SI PREME di due pixel. È il
  segno che il tocco è arrivato — e senza, uno preme e non succede niente per
  un quarto di secondo, che è il tempo in cui il dito ripete.
*/
.oa-t.segnato {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .6),
        0 16px 32px -18px rgba(0, 12, 28, .8);
    filter: none;
    opacity: 1;
}

.oa-t:active,
.oa-t.premuto {
    /* Due pixel, e l'ombra rientra: un tasto vero, schiacciandosi, si avvicina
       al piano. Senza il secondo pezzo il tondo scende ma resta sospeso, e si
       vede che è un disegno. */
    transform: translateY(2px) scale(.96);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .35),
        0 6px 14px -10px rgba(0, 12, 28, .8);
}

/*
  ═══ LA SCRITTA SOTTO SI SCUOTE ═════════════════════════════════════════════
  Mezzo secondo, e poi ferma. Serve perché quella riga cambia SENZA muoversi:
  se stai guardando i tondi non ti accorgi che sotto è comparso del testo, e
  quello che non si nota non è stato detto.

  Tre scossoni corti e stretti — quattro pixel, non venti: deve dire «guarda
  qui», non «è successo un disastro». Uno scuotimento largo è un allarme, e un
  allarme per una riga di informazione insegna a spegnere gli allarmi.
*/
.oa-nota.scossa {
    animation: scossa .5s cubic-bezier(.36, .07, .19, .97);
}

@keyframes scossa {
    0%, 100%      { transform: translateX(0); }
    12%, 44%, 76% { transform: translateX(-4px); }
    28%, 60%, 92% { transform: translateX(4px); }
}

/* Chi ha chiesto meno movimento non la vede muoversi — ma la legge lo stesso:
   il testo cambia comunque, cambia solo il modo di farlo notare. */
@media (prefers-reduced-motion: reduce) {
    .oa-nota.scossa { animation: none; }
    .oa-t:active, .oa-t.premuto { transform: none; }
}

/*
  ═══ «OPPURE» STA IN MEZZO DAVVERO ══════════════════════════════════════════
  `.oa-sep` ha già `margin:1.1rem auto`, quindi sopra e sotto sarebbero uguali.
  Ma fra il form e lui c'è `.msg`, la riga dei messaggi: VUOTA occupa comunque
  1,2em di altezza più 1rem di margine. Risultato: sopra ~3,3rem, sotto 1,1.

  In st26 quello spazio è tenuto apposta, perché quando compare un messaggio la
  pagina non salti. È un buon motivo — ma il prezzo si paga sempre, e il salto
  solo dopo aver premuto invio, cioè quando stai già guardando lì.

  Quindi: da vuota non occupa niente, e «oppure» sta in mezzo alle due strade.
*/
.msg:empty {
    min-height: 0;
    margin-top: 0;
}

/*
  E poi sopra ne vuole di più: 2,5rem contro 1,1 — poco più del doppio.
  Non è una simmetria mancata — è che sopra c'è il form, che è la strada
  principale, e sotto ci sono i tondi, che sono la scorciatoia. Staccare di più
  da quello che conta lo lascia respirare; staccare uguale li metterebbe alla
  pari, e non lo sono.
*/
.oa-sep { margin-top: 2.5rem; }

/*
  ═══ IL FILO DI LUCE SI VEDE SU QUELLO SU CUI CADE ══════════════════════════
  Lo stesso bianco al 60% è una luce netta sul rosso di Google e un'ombra di
  niente sul nero di Apple. Non è un problema del filo: è che una luce si vede
  per DIFFERENZA da quello che c'è sotto, e sotto ci sono tre fondi diversi.

  Quindi non lo stesso valore per tutti: lo stesso EFFETTO per tutti.

  ═══ E SU APPLE UN TERZO IN MENO ════════════════════════════════════════════
  Da .95 a .62 — un 35% di trasparenza in più. Quasi pieno era troppo: su un
  fondo nero un filo bianco pieno non legge come luce, legge come un BORDO
  disegnato, e il tondo sembrava ritagliato invece che illuminato.
  Il filo da premuto scende in proporzione (.6 → .39), sennò premendo la luce
  sarebbe cresciuta invece di calare.
*/
.oa-t.oa-apple {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .62),
        0 16px 32px -18px rgba(0, 12, 28, .8);
}

.oa-t.oa-facebook {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .75),
        0 16px 32px -18px rgba(0, 12, 28, .8);
}

/* Premuti, il filo cala insieme agli altri — ma partendo da più in alto,
   altrimenti su Apple sparirebbe del tutto e il tondo sembrerebbe spento. */
.oa-t.oa-apple:active,
.oa-t.oa-apple.premuto {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .39),
        0 6px 14px -10px rgba(0, 12, 28, .8);
}

.oa-t.oa-facebook:active,
.oa-t.oa-facebook.premuto {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .5),
        0 6px 14px -10px rgba(0, 12, 28, .8);
}

/*
  ═══ IL «NO» SI FA CON LA TESTA ═════════════════════════════════════════════
  Facebook e Apple non hanno ancora dove portare. Toccandoli il tondo scuote,
  come si scuote la testa: è il gesto che vuol dire no in mezzo mondo, e non ha
  bisogno di nessuna parola.

  Veloce e stretto — cinque pixel, quattro andate e ritorni in un terzo di
  secondo. Lento e largo sarebbe un allarme; qui non è successo niente di
  grave, semplicemente quella porta non c'è ancora.

  E si distingue dalla scossa della scritta sotto, che è più lenta e più
  ampia: quella dice «guarda qui», questa dice «no». Due movimenti diversi per
  due cose diverse — se fossero uguali, non direbbero niente né l'uno né
  l'altro.
*/
.oa-t.no {
    animation: nega .34s cubic-bezier(.36, .07, .19, .97);
}

@keyframes nega {
    0%, 100%           { transform: translateX(0); }
    15%, 45%, 75%      { transform: translateX(-5px); }
    30%, 60%, 90%      { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .oa-t.no { animation: none; opacity: .5; }
}

/*
  ═══ L'INDIRIZZO SBAGLIATO LO DICE LA PILLOLA, NON UNA SCRITTA ══════════════
  Prima compariva una riga rossa sotto: «indirizzo non valido». Ma quella riga
  è sotto, e chi ha appena scritto sta guardando il campo — quindi la legge un
  istante dopo, e nel frattempo ha già ripremuto.

  La pillola che scuote lo dice DOVE stai guardando, e nel momento in cui
  succede. Non serve nessuna parola: la cosa che ha sbagliato si muove, e si
  capisce da sola.

  Stessa scossa dei tondi che dicono no — perché è lo stesso «no», e due
  movimenti diversi per la stessa cosa insegnerebbero a non guardarne nessuno.
*/
.pillola.no {
    animation: nega .34s cubic-bezier(.36, .07, .19, .97);
}

@media (prefers-reduced-motion: reduce) {
    .pillola.no { animation: none; box-shadow: 0 0 0 3px rgba(234, 67, 53, .5); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA CPU — quello che costa a ogni fotogramma, non quello che si scarica
   ═════════════════════════════════════════════════════════════════════════ */

/*
  ═══ IL SOLE NON SI SFOCA PIÙ ═══════════════════════════════════════════════
  `.sun` è largo `min(120vw,1100px)` — più di un milione di pixel — ha un
  `filter:blur(2px)` e PULSA in scala. Scalare uno strato sfocato non è come
  spostarlo: il browser deve RICALCOLARE la sfocatura alla nuova misura, sessanta
  volte al secondo, su tutta quella superficie.

  E quei due pixel non si vedono: il gradiente sfuma già a trasparente al 64%,
  cioè il bordo era già morbido da solo. Si paga un ri-calcolo continuo per un
  effetto che il gradiente faceva gratis.
*/
.sun { filter: none; }

/*
  ═══ E QUANDO NON LA GUARDI, NON SI MUOVE ═══════════════════════════════════
  La scena è `position:fixed`: resta lì anche quando la pagina è scorsa in
  fondo, e continua a girare dietro il contenuto che stai leggendo. Con la
  scheda in secondo piano peggio ancora — anche se il browser rallenta, non
  ferma.

  Ferma vuol dire ferma: rallentare consuma uguale.
*/
.nascosta .sun,
.nascosta .sea b,
.nascosta #stars i,
.nascosta .rstar,
.nascosta .citylight { animation-play-state: paused; }

/*
  ═══ I PALLINI DELLE CATEGORIE, UN QUINTO PIÙ GRANDI ════════════════════════
  Da 50 a 60 pixel. Sotto i 48 un bersaglio col pollice si sbaglia; a 50 si
  prende ma resta un bersaglio, non un invito. A 60 diventa una cosa che chiede
  di essere toccata — ed è la fila che manda avanti tutta la sezione, quindi è
  il posto dove conviene spendere spazio.

  L'icona cresce con lui: 1.15 → 1.38rem, cioè lo stesso quinto. Lasciandola
  ferma il pallino sarebbe cresciuto INTORNO all'icona, e sarebbe diventato un
  cerchio con dentro una cosa piccola invece di un pallino più grande.

  L'anello del timer è a `inset:-4px` sul pallino: cresce da solo, non si tocca.
*/
.sp-band .icon-pill { width: 60px; height: 60px; }
.sp-band .icon-pill i { font-size: 1.66rem; }

/*
  ═══ LE MASCHERE IN TESTA, ALLA MISURA DELL'HAMBURGER ═══════════════════════
  A sinistra tre righe da 22 pixel, a destra le maschere a 1.2rem — che con la
  sagoma larga fanno circa 18 di larghezza. Quattro pixel di differenza su due
  cose alla stessa altezza si vedono: la testa risultava sbilanciata a sinistra
  senza che si capisse perché.

  1.5rem porta le maschere a ~22 di larghezza, cioè esattamente quanto le righe.
  Non è un numero scelto perché è tondo: è quello che pareggia i due lati.

  Nota per il futuro: se cambia la larghezza dell'hamburger, questo va rifatto.
  Sono due misure legate che stanno in due punti diversi — e due misure legate
  che stanno in due punti diversi, prima o poi, si slegano.
*/
/* Le misure delle due icone della barra NON stanno più qui: stavano anche in
   `land.css` e in `sito.css`, e ogni pagina ne caricava due su tre — le stesse
   due icone cambiavano misura da una pagina all'altra. Adesso stanno solo in
   `land.css`, che c'è dappertutto. Il ragionamento che le lega — le maschere
   larghe quanto i tre trattini — è scritto lì, accanto ai numeri. */

/*
  ═══ LA NOTA DELLA MUSICA, DUE QUINTI PIÙ GRANDE ════════════════════════════
  Da 1 a 1.4rem. Il bottone resta 42: la nota ci sta larga, e un'icona che
  riempie meglio il suo cerchio si legge da lontano — questo sta in basso a
  sinistra, dove lo si guarda di sfuggita mentre si scorre.

  Il cerchio non cresce perché non è un bersaglio che si cerca: è uno che si
  trova. 42 sono già sopra la misura del pollice.
*/
.music-btn { font-size: 1.4rem; }

/*
  ═══ ALL'ALBA LA CITTÀ È SPENTA ═════════════════════════════════════════════
  Era a .4: luci sull'orizzonte e auto in transito mentre il cielo schiarisce.
  Ma all'alba i lampioni si sono appena spenti — è il momento della giornata in
  cui la costa è più buia di quanto sia stata tutta la notte.

  `--city-op` è un numero solo per tutte e due le cose: `.city` (le luci) e
  `.road` (le auto) ci stanno appese. E `sky.js` legge LA STESSA variabile prima
  di lanciare un'auto — `cityVis()`, riga 497 — quindi portarla a zero non
  nasconde il traffico: lo ferma. Nessuna auto viene creata, e il mezzo di
  soccorso non parte perché chiede `cityVis() > 0.05`.

  È il motivo per cui si tocca la variabile e non l'opacità dei due strati:
  spegnere l'apparenza avrebbe lasciato il JavaScript a creare e distruggere
  elementi invisibili per tutta l'alba.
*/
body[data-phase="alba"] { --city-op: 0; }

/*
  ═══ E LE LUCI CHE LAMPEGGIANO NON LAMPEGGIANO PIÙ ══════════════════════════
  Una parte delle luci ha `animation:cblink` addosso. Sotto `opacity:0`
  l'animazione continua a girare: il browser la calcola comunque, per una cosa
  che nessuno vede.

  Vale anche per l'ora dorata, che era già a zero e pagava lo stesso.
  Nascosto non è spento.
*/
body[data-phase="alba"] .citylight.blink,
body[data-phase="golden"] .citylight.blink { animation: none; }

/* ═══ VIA IL TONDO CHE GALLEGGIA ═════════════════════════════════════════════
   È il bottone della musica: lo attacca `music.js` al corpo della pagina, ed è
   l'unica cosa che galleggia sulla landing.

   Nascosto e basta non sarebbe bastato — l'audio avrebbe continuato a stare lì
   pronto — ma il bottone è anche l'unico modo di far partire la musica: senza,
   `music.js` non parte, perché aspetta un tocco che non arriverà mai.
   Quindi togliendo il bottone si spegne anche il resto, che è quello che serve.

   Si rimette cancellando queste due righe. */
.music-btn { display: none !important; }