/* Il titolo che si alza dalla linea */
:root {
  --notte: #101010;          /* il fondo */
  --giallo: #f5dc3a;         /* il titolo */
  --carta: #f2f2ee;          /* le didascalie */
  --finestra-l: 16.5rem;     /* la finestrella del proiettore */
  --finestra-a: 11rem;
  --margine: clamp(16px, 2.4vw, 36px);
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  color: var(--carta);
  background: var(--notte);
  overflow: hidden;
}
.scene {
  position: absolute;
  width: 0;
  height: 0;
}

.apertura {
  position: fixed;
  inset: 0;
  --apri: 0;
  --meta: 0px;
}

/* la finestra: un ritaglio (clip-path) che all'inizio lascia vedere solo il rettangolo centrale */
.finestra {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(10, 10, 10, 0.2), rgba(10, 10, 10, 0.72)), var(--notte);
}
.fotogramma {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--finestra-l);
  height: var(--finestra-a);
  transform: translate(-50%, -50%);
}
.fotogramma svg {
  display: block;
  width: 100%;
  height: 100%;
}
.velo {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

/* le didascalie stanno sulla linea di mezzo; --apri le porta sopra e sotto il titolo (--meta è mezzo titolo) */
.didascalia {
  position: absolute;
  top: 50%;
  z-index: 3;
  max-width: min(30ch, 28vw);
  margin: 0;
  overflow: clip;
  font-size: clamp(0.72rem, 0.62rem + 0.3vw, 0.9rem);
  font-weight: 560;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.didascalia span {
  display: block;
}
.didascalia--sx {
  left: var(--margine);
}
.didascalia--dx {
  right: var(--margine);
  text-align: right;
}
.didascalia--su {
  transform: translateY(calc(-100% - 4px - var(--apri) * var(--meta)));
}
.didascalia--giu {
  transform: translateY(calc(4px + var(--apri) * var(--meta)));
}

/* il titolo riempie la larghezza (lo misura lo script) e nasce schiacciato: una riga gialla */
.titolo {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 2;
  margin: 0;
  transform: translateY(-50%);
  color: var(--giallo);
  font-size: 18vw;
  font-weight: 900;
  font-stretch: 75%;
  line-height: 0.8;
  letter-spacing: -0.01em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.titolo__dentro {
  display: inline-block;
  padding-top: 0.06em;
}
.titolo__riga {
  display: inline-block;
}
.titolo--due .titolo__riga {
  display: block;
  width: max-content;
  margin: 0 auto;
}

.rivedi {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  z-index: 5;
  width: max-content;
  min-height: 46px;
  margin: 0 auto;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--giallo);
  color: var(--notte);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.rivedi:active {
  transform: scale(0.97);
}
.rivedi:focus-visible {
  outline: 2px solid var(--carta);
  outline-offset: 3px;
}

/* grana di pellicola sopra a tutto: un quadrato di rumore che si sposta a scatti */
.grana {
  position: fixed;
  inset: -40%;
  z-index: 4;
  pointer-events: none;
  opacity: 0.13;
  background-image: var(--grana);
  animation: grana 0.9s steps(6) infinite;
}
@keyframes grana {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-6%, 4%); }
  40% { transform: translate(5%, -3%); }
  60% { transform: translate(-3%, -6%); }
  80% { transform: translate(6%, 5%); }
  100% { transform: translate(0, 0); }
}

@media (max-width: 700px) {
  :root {
    --finestra-l: 11.5rem;
    --finestra-a: 7.7rem;
  }
  .didascalia {
    max-width: 26vw;
  }
}
@media (prefers-reduced-motion: reduce) {
  .grana {
    animation: none;
  }
}