/* Stasera · sito. Palette "Ora blu" e caratteri del marchio (src/stasera/theme.ts).
   Solo il modulo e il piede, sopra il timelapse della giornata disegnato da
   cielo.js. Il modulo sta su un foglio blu notte, leggibile a ogni ora; marchio e
   piede sono blu notte di giorno e crema dalla sera (classe .giorno su <html>). */

@font-face { font-family: "Bodoni Moda"; src: url("fonts/BodoniModa.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("fonts/BodoniModa-Italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --notte: #141b2e;
  --blu: #24345a;
  --oro: #f2b247;
  --luna: #eee9df;
  --ink: var(--luna);
  --ink-2: #c9cbd3;
  --m: clamp(16px, 2.2vw, 32px);
  /* cinque misure di testo */
  --t-xl: clamp(88px, 17vw, 300px);
  --t-l: clamp(34px, 4vw, 60px);
  --t-m: clamp(22px, 2.2vw, 30px);
  --t-b: 18px;
  --t-s: 15px;
  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --esce: cubic-bezier(0.22, 1, 0.36, 1);
}
.testa, .piede { color: var(--ink); transition: color 0.8s ease; }
html.giorno .testa, html.giorno .piede { --ink: var(--notte); }
html[lang="it"] body [lang="en"],
html[lang="en"] body [lang="it"] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--notte); color: var(--ink); font: 400 var(--t-b) / 1.55 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, p { margin: 0; }
a { color: inherit; }
::selection { background: var(--oro); color: var(--notte); }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }

#cielo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
main, .testa, .piede, .documento { position: relative; z-index: 1; }

.punto { display: inline-block; width: 0.14em; height: 0.14em; margin-left: 0.06em; border-radius: 50%; background: var(--oro); }
.titolo-sezione { font: italic 500 var(--t-l) / 1.04 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }

/* testata: marchio e lingua */
.testa { display: flex; align-items: center; justify-content: flex-end; gap: 24px; padding: 20px var(--m); font-size: var(--t-s); }
.marchio { font: italic 500 var(--t-m) / 1 var(--serif); text-decoration: none; letter-spacing: -0.02em; }
.lingue { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: rgba(20, 27, 46, 0.88); }
.lingue::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--oro); transition: transform 0.35s var(--esce); }
html[lang="en"] .lingue::before { transform: translateX(100%); }
.lingue button { position: relative; z-index: 1; min-width: 46px; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--luna); font: 600 var(--t-s) / 1 var(--sans); cursor: pointer; transition: color 0.3s; }
.lingue button[aria-pressed="true"] { color: var(--notte); }
@media (prefers-reduced-motion: reduce) { .lingue::before { transition: none; } }

.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--oro); color: var(--notte); font: 600 17px / 1 var(--sans); text-decoration: none; cursor: pointer;
  transition: transform 0.18s var(--esce), background-color 0.18s;
}
.bottone:hover { transform: translateY(-2px); background: #f6c46c; }
.bottone:active { transform: translateY(0) scale(0.97); }
.bottone:disabled { opacity: 0.6; cursor: progress; }
.collegamento { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--oro); transition: color 0.2s; }
.collegamento:hover { color: var(--oro); }

/* ---------- il modulo, su un foglio blu notte sopra il cielo ---------- */
.scriveteci { display: grid; place-items: start center; padding: 2svh var(--m) 0; }
.modulo {
  width: min(100%, 720px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  padding: clamp(24px, 4vw, 48px);
  border-radius: clamp(20px, 2.4vw, 32px);
  background: rgba(20, 27, 46, 0.92); color: var(--luna);
}
.modulo-testa { grid-column: 1 / -1; display: grid; gap: 14px; margin-bottom: 6px; }
.campo { grid-column: 1 / -1; display: grid; gap: 8px; }
.campo.mezzo { grid-column: span 1; }
.campo label { font-size: var(--t-s); color: var(--ink-2); }
.campo input,
.campo textarea {
  width: 100%; padding: 12px 14px; border: 0; border-bottom: 2px solid rgba(238, 233, 223, 0.55); border-radius: 0;
  background: rgba(238, 233, 223, 0.08); color: var(--luna); font: 400 var(--t-b) / 1.4 var(--sans);
  color-scheme: dark; transition: border-color 0.2s, background-color 0.2s;
}
.campo input:focus,
.campo textarea:focus { outline: none; border-bottom-color: var(--oro); background: rgba(238, 233, 223, 0.14); }
.campo textarea { resize: vertical; min-height: 96px; }
.tramonto { grid-column: 1 / -1; font: italic 500 var(--t-m) / 1.3 var(--serif); color: var(--oro); }
.tramonto:empty { display: none; }
.consenso { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-s); }
.consenso input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--oro); flex: none; }
.invio { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.esito { grid-column: 1 / -1; }
.esito:empty { display: none; }
.modulo.inviato .campo,
.modulo.inviato .consenso,
.modulo.inviato .tramonto,
.modulo.inviato .invio { display: none; }
.modulo.inviato .esito { font: italic 500 var(--t-m) / 1.3 var(--serif); }
.nascosto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: campo trappola per i bot */


/* entrate: il foglio del modulo sale all'apertura, il piede quando arriva (solo con lo script) */
@keyframes sale { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.js .modulo { animation: sale 0.9s var(--esce) 0.15s both; }
.js .entra { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--esce), transform 0.8s var(--esce); transition-delay: calc(var(--i, 0) * 90ms); }
.js .entra.dentro { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .modulo { animation: none; }
  .js .entra { transform: none; transition: opacity 0.4s; }
}

/* ---------- piede: logo e WhatsApp centrati sotto il modulo, poi il borgo ---------- */
.piede { min-height: 72svh; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 56px var(--m) 0; text-align: center; }
/* il logo del marchio: la parola in Bodoni corsivo e la dicitura tra due filetti */
.logo { display: inline-flex; flex-direction: column; align-items: center; }
.logo-parola { font: italic 500 clamp(52px, 6vw, 76px) / 1 var(--serif); letter-spacing: -0.02em; }
.logo-dicitura { display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 400 clamp(10px, 0.9vw, 12px) / 1 var(--serif); letter-spacing: 0.42em; text-transform: uppercase; }
.logo-dicitura span { margin-right: -0.42em; }
.logo-dicitura i { display: block; width: 28px; height: 2px; background: currentColor; opacity: 0.75; } /* taste-skill-ignore: i filetti del logo */
.wa-piccolo {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px 0 14px;
  border-radius: 999px; background: var(--luna); color: var(--notte);
  font: 600 var(--t-s) / 1 var(--sans); text-decoration: none; transition: transform 0.18s var(--esce);
}
.wa-piccolo svg { width: 20px; height: 20px; flex: none; }
.wa-piccolo:hover { transform: translateY(-2px); }
.wa-piccolo:active { transform: scale(0.97); }
/* email e telefono incolonnati */
.piede-righe { display: grid; justify-items: center; gap: 10px; font-size: var(--t-s); }
.piede-righe a { white-space: nowrap; }
/* la riga legale chiude la pagina su una fascia blu notte: leggibile a ogni ora */
.legale { align-self: stretch; margin: auto calc(-1 * var(--m)) 0; padding: 14px var(--m) calc(14px + env(safe-area-inset-bottom)); background: rgba(20, 27, 46, 0.9); font-size: var(--t-s); color: var(--luna); }
.legale p + p { margin-top: 4px; }
.legale a { text-decoration: none; }
.legale .firma { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--oro); }
.legale a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- pagine di testo: privacy e grazie ---------- */
.documento { max-width: 68ch; padding: 48px var(--m) 96px; }
.documento .titolo-sezione { margin-bottom: 24px; }
.documento h2 { font: italic 500 var(--t-m) / 1.2 var(--serif); margin: 40px 0 10px; }
.documento p + p { margin-top: 16px; }
.documento .indietro { margin-top: 48px; }
body.pagina-testo .testa { color: var(--luna); }

@media (max-width: 720px) {
  :root { --t-b: 17px; }
  .modulo { grid-template-columns: 1fr; }
  .campo.mezzo { grid-column: 1 / -1; }
}