/* La lettera che cade */
:root {
  --carta: #E4E6EA;
  --inchiostro: #16181D;
  --tenue: #565B65;
  --blu: #2B45FF;
  --blu-scuro: #1A31D6;
  --su-blu: #F4F5F8;
  --margine: clamp(18px, 4vw, 56px);
  --alto: 100vh;
}
@supports (height: 100svh) {
  :root { --alto: 100svh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
}
body {
  background: var(--carta);
  color: var(--inchiostro);
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
}
.nascosto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- la scena: resta ferma mentre la parola si ripete e la lettera cade ---- */
.scena {
  position: relative;
  height: var(--alto);
  overflow: hidden;
}
.cenno {
  position: absolute;
  z-index: 2;
  top: var(--margine);
  left: var(--margine);
  max-width: 30ch;
  margin: 0;
  color: var(--tenue);
  font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.15rem);
  font-weight: 520;
  line-height: 1.35;
}

/* la parola: la misura dà il posto, le copie ci stanno sopra una dopo l'altra */
.eco {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  font-family: 'Big Shoulders Variable', 'Mona Sans Variable', sans-serif;
  font-size: 20vw;
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.eco__misura {
  visibility: hidden;
}
.l {
  display: inline-block;
}
.copia {
  position: absolute;
  inset: 0;
  isolation: isolate;
  transform-origin: 50% 100%;
}
/* la lastra ha il colore della pagina: copre le copie dietro, così di loro resta solo la cima */
.copia__lastra {
  position: absolute;
  z-index: -1;
  top: -9%;
  right: -3%;
  bottom: -8%;
  left: -3%;
  background: var(--carta);
}
.eco--pronta .copia--davanti [data-i] {
  visibility: hidden;
}
.copia__base {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: baseline;
}

/* ---- la I: una barra d'inchiostro al posto della lettera, che cadendo diventa un bottone ---- */
.goccia {
  position: absolute;
  display: block;
  color: var(--su-blu);
  text-decoration: none;
  pointer-events: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.goccia--giu {
  pointer-events: auto;
  cursor: pointer;
}
.goccia__premi {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.goccia--giu:active .goccia__premi {
  transform: scale(0.96);
}
.goccia__corpo {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--inchiostro);
  /* quando tocca terra si schiaccia dal lato che guarda in basso */
  transform-origin: 100% 50%;
  transition: background-color 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.goccia--giu .goccia__corpo {
  background: var(--blu);
}
@media (hover: hover) and (pointer: fine) {
  .goccia--giu:hover .goccia__corpo {
    background: var(--blu-scuro);
  }
}
.goccia:focus-visible .goccia__corpo {
  box-shadow: 0 0 0 3px var(--carta), 0 0 0 6px var(--blu);
}
/* il testo è girato al contrario della barra: quando la barra è a terra, si legge dritto */
.goccia__testo {
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  font-size: var(--etichetta, 16px);
  font-weight: 720;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-90deg);
}

/* ---- dove porta il bottone ---- */
.coda {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1rem;
  min-height: calc(var(--alto) * 0.72);
  padding: var(--margine);
}
.coda__titolo {
  margin: 0;
  font-family: 'Big Shoulders Variable', sans-serif;
  font-size: clamp(3.4rem, 13vw, 10rem);
  font-weight: 900;
  line-height: 0.82;
  text-transform: uppercase;
}
.coda__testo {
  max-width: 34ch;
  margin: 0;
  color: var(--tenue);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  line-height: 1.45;
}