/* ═══════════════════════════════════════════════════════════════════════════
   BASE — la cornice: nastro, palco, chrome, sipari, ingresso.
   Qui vive la sfrontatezza grafica. Il mondo dentro la
   cornice resta serio; è la cornice che fa rumore.
   ═════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--osso);
  color: var(--inchiostro);
  font-family: var(--serif);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background var(--lastra);
}
body.tappa-ambra   { background: var(--ambra); }
body.tappa-cobalto { background: var(--cobalto); }
body.tappa-nero    { background: var(--nero); }

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

/* Visibile solo ai lettori di schermo. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip-path: inset(50%); white-space: nowrap; }

/* ── NASTRO ──────────────────────────────────────────────────────────────── */
.nastro {
  position: relative; overflow: hidden;
  border-bottom: 1px solid #14100C22;
  padding: .55rem 0;
}
.nastro__pista { display: flex; width: max-content; animation: scorri 38s linear infinite; }
.nastro span {
  font-family: var(--brand-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  padding-right: 2.5rem; color: currentColor; opacity: .72;
}
.nastro b { color: var(--brand-accento); font-weight: 500; opacity: 1; }
@keyframes scorri { to { transform: translateX(-50%); } }

body.tappa-ambra .nastro,
body.tappa-cobalto .nastro,
body.tappa-nero .nastro { color: var(--carta); border-bottom-color: #FFFFFF26; }

/* ── PALCO ───────────────────────────────────────────────────────────────── */
/* L'app riempie la finestra e la scena resta centrata: la scrivania non deve
   mai galleggiare in alto con una fascia vuota sotto. */
#app { display: flex; flex-direction: column; height: 100%; }
.palco {
  flex: 1; min-height: 0;
  display: grid; place-items: center;
  padding: clamp(.75rem, 2.2vw, 1.8rem);
}

/* ── CHROME ──────────────────────────────────────────────────────────────── */
.chrome {
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
  padding: .5rem clamp(.75rem, 2.2vw, 1.8rem);
  font-family: var(--brand-mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
}
/* la barra è discreta; il logo di chi presenta la demo no: resta pieno */
.chrome > :not(.chrome__logo) { opacity: .62; }
.chrome__logo { display: inline-flex; align-items: center; }
.chrome__logo img { display: block; height: 34px; width: auto; }
.chrome__logo--su-scuro { display: none !important; }
body.tappa-ambra .chrome__logo--su-chiaro,
body.tappa-cobalto .chrome__logo--su-chiaro,
body.tappa-nero .chrome__logo--su-chiaro { display: none !important; }
body.tappa-ambra .chrome__logo--su-scuro,
body.tappa-cobalto .chrome__logo--su-scuro,
body.tappa-nero .chrome__logo--su-scuro { display: block !important; }
body.tappa-ambra .chrome,
body.tappa-cobalto .chrome,
body.tappa-nero .chrome { color: var(--carta); }

.chrome__marchio {
  font-family: var(--brand-display); font-weight: 800; font-size: .82rem;
  letter-spacing: .02em; text-transform: none; opacity: 1;
}
.chrome__marchio i { color: var(--brand-accento); font-style: normal; }
.chrome button:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.chrome__tappe { display: flex; gap: .45rem; margin-left: auto; }
.chrome__tappe b {
  width: 26px; height: 20px; display: grid; place-items: center; border-radius: 2px;
  background: #14100C14; font-weight: 500; font-size: .58rem;
}
.chrome__tappe b.attiva { background: var(--brand-nero); color: var(--carta); }
body.tappa-ambra .chrome__tappe b:not(.attiva),
body.tappa-cobalto .chrome__tappe b:not(.attiva),
body.tappa-nero .chrome__tappe b:not(.attiva) { background: #FFFFFF1f; }
body.tappa-ambra .chrome__tappe b.attiva,
body.tappa-cobalto .chrome__tappe b.attiva { background: var(--carta); color: var(--brand-nero); }
body.tappa-nero .chrome__tappe b.attiva { background: var(--brand-accento); color: #140A00; }

/* ── BOTTONE A BIGLIETTO ─────────────────────────────────────────────────── */
.biglietto {
  --tacca: 9px;
  background: var(--brand-nero); color: var(--carta);
  font-family: var(--brand-display); font-weight: 700; font-size: .82rem;
  letter-spacing: .16em; text-transform: uppercase; padding: .9rem 1.8rem;
  transition: transform var(--presa), filter var(--presa);
  -webkit-mask: radial-gradient(var(--tacca) at 0 50%, #0000 98%, #000) left/51% 100% no-repeat,
                radial-gradient(var(--tacca) at 100% 50%, #0000 98%, #000) right/51% 100% no-repeat;
          mask: radial-gradient(var(--tacca) at 0 50%, #0000 98%, #000) left/51% 100% no-repeat,
                radial-gradient(var(--tacca) at 100% 50%, #0000 98%, #000) right/51% 100% no-repeat;
}
.biglietto:hover { transform: translateY(-1px); filter: brightness(1.15); }
.biglietto:active { transform: translateY(1px); }
.biglietto--acc { background: var(--brand-accento); color: #140A00; }
.biglietto[disabled] { opacity: .35; cursor: not-allowed; transform: none; }

/* ── INGRESSO ────────────────────────────────────────────────────────────── */
.ingresso {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: safe center; padding: 2rem;
  background: var(--osso);
  overflow-y: auto;   /* su schermi bassi, con l'avviso, si scorre invece di tagliare */
}
.ingresso__box { width: min(100%, 560px); }
/* il marchio di chi presenta la demo (caso.presentatoDa) */
.ingresso__logo { display: block; height: clamp(64px, 11vh, 96px); width: auto; margin: 0 0 1.6rem; }
.ingresso__logo[hidden] { display: none; }
.ingresso__occhiello {
  font-family: var(--brand-mono); font-size: .66rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--inchiostro-lieve); margin: 0 0 1.2rem;
}
.ingresso__titolo {
  font-family: var(--brand-display); font-weight: 800;
  font-size: clamp(3rem, 9vw, 6rem); line-height: .86; letter-spacing: -.035em;
  text-transform: uppercase; margin: 0 0 1.4rem;
}
.ingresso__testo { font-size: 1.05rem; line-height: 1.6; max-width: 46ch; margin: 0 0 2.2rem; }
/* l'avviso che è una demo: fra il nome e il pulsante, largo quanto il campo */
.ingresso__avviso {
  margin: 0 0 1.6rem; padding: .85rem 1rem;
  border-left: 3px solid var(--brand-accento); background: #14100C0A;
  font-size: .92rem; line-height: 1.5;
}
.ingresso__avviso b {
  display: block; margin-bottom: .35rem; font-family: var(--brand-mono); font-size: .64rem;
  font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}
.ingresso__avviso p { margin: 0; }

.campo { display: block; margin-bottom: 1.6rem; }
.campo span {
  display: block; font-family: var(--brand-mono); font-size: .6rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--inchiostro-lieve); margin-bottom: .55rem;
}
.campo input {
  width: 100%; font-family: var(--brand-display); font-weight: 700; font-size: 1.5rem;
  padding: .6rem 0; background: none; border: 0;
  border-bottom: 2px solid var(--inchiostro); color: var(--inchiostro);
}
.campo input:focus { outline: none; border-bottom-color: var(--brand-accento); }
.campo small {
  display: block; margin-top: .55rem; font-family: var(--brand-mono);
  font-size: .58rem; letter-spacing: .06em; color: var(--inchiostro-lieve);
}

/* ── SIPARO ──────────────────────────────────────────────────────────────── */
/* Una lastra che spazza lo schermo e lascia il titolo della tappa. */
.siparo {
  position: fixed; inset: 0; z-index: 70;
  display: grid; align-content: center; padding: clamp(2rem, 7vw, 6rem);
  transform: translateY(100%);
  pointer-events: none;
}
.siparo.entra  { animation: siparoEntra var(--lastra) forwards; pointer-events: auto; }
.siparo.esce   { animation: siparoEsce  var(--lastra) forwards; }
@keyframes siparoEntra { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes siparoEsce  { from { transform: translateY(0); }    to { transform: translateY(-100%); } }

.siparo__n {
  font-family: var(--brand-mono); font-size: .72rem; letter-spacing: .3em;
  text-transform: uppercase; opacity: .6; margin-bottom: 1rem;
}
.siparo__titolo {
  font-family: var(--brand-display); font-weight: 800;
  font-size: clamp(2.6rem, 11vw, 9rem); line-height: .86; letter-spacing: -.035em;
  text-transform: uppercase; margin: 0; white-space: pre-line;
}
.siparo--osso    { background: var(--osso);    color: var(--inchiostro); }
.siparo--ambra   { background: var(--ambra);   color: #FFEBD1; }
.siparo--cobalto { background: var(--cobalto); color: #CBD9F5; }
.siparo--nero    { background: var(--nero);    color: var(--brand-accento); }

/* ── INGRESSO: mentre si scrive il nome, lo studio si prepara dietro ─────── */
.ingresso { transition: opacity 600ms ease; }
.ingresso--via { opacity: 0; pointer-events: none; }
.ingresso__carico {
  margin: 1.1rem 0 0; min-height: 1.2em;
  font-family: var(--brand-mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--inchiostro-lieve);
}
.ingresso__carico::before {
  content: ''; display: inline-block; width: .5em; height: .5em; margin-right: .6em;
  border-radius: 50%; background: currentColor; vertical-align: .1em;
  animation: attesa 1s ease-in-out infinite;
}
.ingresso__carico.pronto { color: #3D7A4A; }
.ingresso__carico.pronto::before { animation: none; }
.ingresso__carico.errore { color: var(--rosso); }
@keyframes attesa { 50% { opacity: .2; } }

.nastro i { font-style: normal; }
.chrome__marchio { text-transform: uppercase; letter-spacing: .14em; font-size: .66rem; }

/* l'interruttore dell'audio: discreto come il resto della barra */
.chrome__audio { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; padding: .2rem .5rem; border-radius: 2px; }
.chrome__audio:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.chrome__audio[aria-pressed="false"] { text-decoration: line-through; }