/* Parole che si fondono */
:root {
  --sfondo: #eef3ef;
  --testo: #07201f;
}

html,
body {
  margin: 0;
}
body {
  background: var(--sfondo);
  color: var(--testo);
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.filtri {
  position: absolute;
  width: 0;
  height: 0;
}

.corsa {
  height: 420vh;               /* più è alta, più lenta è ogni fusione */
}
.palco {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3vh;
  overflow: hidden;
}
@supports (height: 100svh) {
  .palco { height: 100svh; }
}
.sopra {
  margin: 0;
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 560;
  font-stretch: 106%;
  opacity: 0.7;
}

/* tutte le parole occupano la stessa cella: una svanisce mentre l'altra compare */
.parole {
  margin: 0;
  display: grid;
  place-items: center;
  filter: url(#goo);
  font-weight: 880;
  font-size: clamp(76px, 19vw, 280px);
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.parola {
  grid-area: 1 / 1;
  color: var(--c);
  font-stretch: calc(var(--w, 100) * 1%);
  opacity: 0;
  white-space: nowrap;
  padding: 0.1em 0.12em;
}
.sr + .parola {
  opacity: 1;
}

/* movimento ridotto: le parole una accanto all'altra, già tutte leggibili */
.fermo .corsa {
  height: auto;
}
.fermo .palco {
  position: relative;
  height: auto;
  min-height: 100vh;
  padding: 10vh 6vw;
}
.fermo .parole {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.3em;
  filter: none;
  font-size: clamp(48px, 9vw, 140px);
}
.fermo .parola {
  grid-area: auto;
  opacity: 1;
}