/* Le onde d'interferenza allo scroll: un nero quasi puro, le creste delle onde di due sorgenti in un grigio caldo
   sottile e un solo accento vermiglio, quello delle onde della terza sorgente, il puntatore. Sopra, le frasi di uno
   studio di acustica inventato (Antinode) in Geist. */
:root {
  --notte: #0a0a0b;                        /* il fondo */
  --chiaro: #efece6;                       /* le frasi */
  --tenue: #8a867f;                        /* le scritte piccole */
  --linea: rgb(239, 236, 230);             /* le creste delle onde */
  --accento: #ff5232;                      /* le onde del puntatore */
  --velo: rgba(10, 10, 11, 0.86);          /* il velo morbido dietro alla frase */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  background: var(--notte);
  color: var(--chiaro);
  font-family: 'Geist Variable', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

/* ---------------------------------------------------------------- la corsa e il palco */
.corsa {
  position: relative;
  height: 420lvh;
}

.palco {
  --margine: clamp(16px, 4.4vw, 60px);
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100lvh;
  padding: clamp(16px, 3vw, 34px) var(--margine);
  overflow: hidden;
  isolation: isolate;
  cursor: crosshair;
}

.onde {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.testa,
.piede {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.02em;
}

.marchio {
  margin: 0;
  font-weight: 620;
  letter-spacing: 0.01em;
}

.testa__nota,
.piede__nota {
  margin: 0;
  color: var(--tenue);
}

/* ---------------------------------------------------------------- le frasi */
.frasi {
  position: relative;
  display: grid;
  place-items: center;
}

.frase {
  grid-area: 1 / 1;
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1.4vh, 14px);
  margin: 0;
  padding: clamp(14px, 3vh, 30px) clamp(18px, 4vw, 44px);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  background: radial-gradient(closest-side, var(--velo) 0%, var(--velo) 55%, transparent 100%);
}

.frase__occhio {
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tenue);
}

.frase__testo {
  display: block;
  max-width: 14ch;
  font-size: clamp(28px, min(6.2vw, 8.4vh), 76px);
  font-weight: 380;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* ---------------------------------------------------------------- la lettura */
.piede__lettura {
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: var(--tenue);
}

.lettura__valore {
  min-width: 2.6em;
  text-align: right;
  color: var(--chiaro);
}

.lettura__fase {
  margin-left: 0.9em;
  transition: color 0.4s ease;
}

.lettura__fase.opposta {
  color: var(--accento);
}

@media (max-width: 560px) {
  .testa__nota,
  .piede__nota {
    display: none;
  }

  .piede {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lettura__fase {
    transition: none;
  }
}