/* La torcia sul titolo */
:root {
  --notte: #0F1113;
  --crema: #F4E6C8;
  --lanterna: #F7B24A;
  --tenue: #8E887B;
  --margine: clamp(18px, 4vw, 56px);
  --alto: 100vh;
}
@supports (height: 100svh) {
  :root { --alto: 100svh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
}
body {
  background: var(--notte);
  color: var(--crema);
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
}

.notte {
  position: relative;
}
.palco {
  position: relative;
  display: grid;
  align-content: space-between;
  min-height: var(--alto);
  padding: var(--margine);
  overflow: hidden;
}
/* al telefono la scena è alta più di due schermi e il palco resta fermo mentre la torcia scorre sulle righe */
.notte--scorre {
  height: calc(var(--alto) * 2.3);
}
.notte--scorre .palco {
  position: sticky;
  top: 0;
  height: var(--alto);
  height: 100lvh;
}

/* la pozza di luce della lanterna, dietro al titolo */
.alone {
  position: absolute;
  top: 0;
  left: 0;
  width: 70vmax;
  height: 70vmax;
  margin: -35vmax 0 0 -35vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 178, 74, 0.2) 0%, rgba(247, 178, 74, 0.07) 32%, rgba(247, 178, 74, 0) 62%);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.nota {
  position: relative;
  max-width: 34ch;
  margin: 0;
  color: var(--tenue);
  font-size: clamp(0.92rem, 0.84rem + 0.3vw, 1.08rem);
  font-weight: 460;
  line-height: 1.38;
}
.titolo {
  position: relative;
  max-width: 14ch;
  margin: 0;
  font-size: clamp(3.4rem, 1rem + 9.2vw, 11rem);
  font-weight: 860;
  font-stretch: 75%;
  letter-spacing: -0.01em;
  line-height: 0.9;
  text-transform: uppercase;
}
.titolo .parola {
  display: inline-block;
  white-space: nowrap;
}
/* ogni lettera: colore, scala e alone li scrive lo script a ogni fotogramma */
.titolo .lettera {
  display: inline-block;
  transform-origin: 50% 70%;
  will-change: transform;
}
.sotto {
  position: relative;
  max-width: 34ch;
  margin: 0;
  color: var(--tenue);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  line-height: 1.5;
}

.pagina {
  padding: 22vh var(--margine) 30vh;
}
@media (max-width: 600px) {
  .titolo {
    font-size: 17vw;
  }
}
.pagina__titolo {
  margin: 0 0 1.4rem;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 4.4rem);
  font-weight: 820;
  font-stretch: 80%;
  letter-spacing: -0.01em;
  line-height: 1;
  text-transform: uppercase;
}
.pagina__testo {
  max-width: 52ch;
  margin: 0;
  color: var(--tenue);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  line-height: 1.55;
}