/* =========================================================
   Beerba — Il Muro sulla TV

   Una pagina sola, per la TV del bancone: le foto dei clienti che
   scorrono, e nient'altro. Niente menu, niente ticker, niente drink.
   Si imposta sulla TV e la si dimentica.
   ========================================================= */

:root {
  --ink: #07070a;
  --brick: #140e14;
  --neon: #ff2e93;
  --neon-core: #ffe4f2;
  --cream: #efe7ea;
  --smoke: #8a8188;
  --line: rgba(255, 46, 147, 0.16);
  --line-strong: rgba(255, 46, 147, 0.4);
  --display: "Playfair Display", Georgia, serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  overflow: hidden;              /* sulla TV non si scorre a mano */
}

.schermo {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  background:
    radial-gradient(ellipse 70% 50% at 50% 42%, rgba(255, 46, 147, 0.10) 0%, transparent 72%),
    var(--ink);
}

/* ---------- Testa ---------- */
.testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3vw;
  padding: 2.6vh 3vw;
  border-bottom: 1px solid var(--line);
}

.marchio { display: flex; align-items: center; gap: 1.4vh; text-decoration: none; color: inherit; }
.marchio-b {
  width: 6.4vh; height: 6.4vh;
  min-width: 40px; min-height: 40px;
  border: 2px solid var(--neon);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display);
  font-style: italic; font-weight: 700;
  font-size: 3.4vh;
  color: var(--neon);
  box-shadow: 0 0 2.4vh rgba(255, 46, 147, 0.35);
}
.marchio-nome {
  display: block;
  font-weight: 900; font-size: 3.4vh;
  letter-spacing: 0.1em; line-height: 1.1;
}
.marchio-sub {
  display: block;
  font-size: 1.8vh; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--neon);
  font-weight: 700; margin-top: 0.4vh;
}

.invito {
  font-family: var(--display);
  font-style: italic;
  font-size: 3vh;
  color: rgba(239, 231, 234, 0.85);
  text-align: center;
}

.testa-destra { display: flex; align-items: center; gap: 2vw; }
.conta {
  font-size: 1.8vh; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--neon); font-weight: 700; white-space: nowrap;
}

.fs {
  width: 5vh; height: 5vh;
  min-width: 36px; min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: none;
  color: var(--neon);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.fs svg { width: 52%; height: 52%; }
.fs:hover, .fs:focus-visible { background: var(--neon); color: var(--ink); outline: none; }
.fs .ic-exit { display: none; }
.fs.is-fs .ic-enter { display: none; }
.fs.is-fs .ic-exit { display: block; }

/* ---------- Il nastro ----------
   Stessa lezione imparata sul muro della home: si trasla del passo ESATTO
   di una serie (--passo, in pixel, misurato dal JS) e non di una
   percentuale della pista, che comprende il padding e manda il nastro a
   girare a vuoto. Le copie sono quante ne servono a coprire lo schermo. */
.nastro {
  overflow: hidden;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.pista {
  display: flex;
  flex-wrap: nowrap;
  gap: 2vw;
  width: max-content;
  padding-inline: 2vw;
  animation: scorri var(--durata, 60s) linear infinite;
  will-change: transform;
}
@keyframes scorri {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--passo)), 0, 0); }
}

/* Le foto sono grandi: su una TV si devono riconoscere le facce da lontano. */
.foto {
  flex: 0 0 auto;
  width: clamp(16rem, 26vw, 34rem);
  display: grid;
  gap: 1.4vh;
  padding: 1.2vh;
  border-radius: 1vh;
  background: linear-gradient(160deg, rgba(255, 46, 147, 0.28), rgba(255, 46, 147, 0.06));
  box-shadow: 0 0 0 1px rgba(255, 46, 147, 0.4), 0 0 4vh rgba(255, 46, 147, 0.16);
}
.foto img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0.7vh;
  background: var(--brick);
}
.foto figcaption {
  text-align: center;
  font-size: 2vh;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--neon-core);
  font-weight: 700;
  padding-bottom: 0.4vh;
}

/* poche foto: stanno tutte in riga, ferme e centrate */
.nastro.fermo { mask-image: none; -webkit-mask-image: none; }
.nastro.fermo .pista { animation: none; width: auto; margin: 0 auto; }

/* ---------- Quando non c'è ancora niente ---------- */
.attesa {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2.4vh;
  text-align: center;
  padding: 6vw;
  background: var(--ink);
  z-index: 5;
}
.attesa[hidden] { display: none; }
.attesa-b {
  width: 12vh; height: 12vh;
  border: 3px solid var(--neon);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display);
  font-style: italic; font-weight: 700;
  font-size: 6vh;
  color: var(--neon);
  box-shadow: 0 0 5vh rgba(255, 46, 147, 0.35);
}
.attesa h1 {
  font-family: var(--display);
  font-size: 7vh;
  font-weight: 400;
  line-height: 1.05;
}
.attesa h1 .em { color: var(--neon); font-style: italic; }
.attesa p { font-size: 2.6vh; color: var(--smoke); max-width: 30ch; }

@media (prefers-reduced-motion: reduce) {
  /* fermare il nastro nasconderebbe le foto oltre il bordo: si rallenta */
  .pista { animation-duration: calc(var(--durata, 60s) * 3); }
}