/* Le pillole nel titolo */
:root {
  --carta: #EEF1E8;
  --inchiostro: #1F2A1C;
  --tenue: #5A6655;
  --margine: clamp(18px, 4vw, 56px);
  --scorre: cubic-bezier(0.23, 1, 0.32, 1);
  --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;
}

.pagina {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--alto);
  padding: calc(var(--margine) * 2.4) var(--margine) var(--margine);
}
.nota {
  position: absolute;
  top: var(--margine);
  left: var(--margine);
  max-width: 36ch;
  margin: 0;
  color: var(--tenue);
  font-size: clamp(0.92rem, 0.84rem + 0.3vw, 1.08rem);
  font-weight: 460;
  line-height: 1.38;
}
.titolo {
  max-width: 15ch;
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(2.8rem, 1.2rem + 6.2vw, 7.2rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.04;
  text-align: center;
}

/* ---- la pillola: parte larga zero, si apre e spinge le parole ---- */
.pillola {
  --largo: 1.45em;
  position: relative;
  display: inline-block;
  width: 0;
  height: 0.8em;
  margin: 0;
  overflow: hidden;
  border-radius: 999px;
  color: var(--inchiostro);
  text-decoration: none;
  vertical-align: -0.08em;
  transition: width 1200ms var(--scorre), margin 1200ms var(--scorre), transform 160ms var(--scorre);
  transition-delay: calc(var(--i, 0) * 180ms);
  -webkit-tap-highlight-color: transparent;
}
.titolo--aperto .pillola {
  width: var(--largo);
  margin: 0 0.12em;
}
.pillola__quadro {
  position: absolute;
  inset: 0;
}
.pillola__quadro svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(1.12);
}
/* il velo: un pastello che schiarisce la scena, e il nome sopra */
.pillola::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--velo);
  mix-blend-mode: lighten;
  opacity: 0;
  transition: opacity 300ms ease;
}
.pillola__nome {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  /* un sesto del titolo, ma mai sotto gli 11 pixel: sul telefono resta leggibile */
  font-size: max(11px, 0.16em);
  font-weight: 620;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity 300ms ease, transform 400ms var(--scorre);
}
.pillola:focus-visible {
  outline: 2px solid var(--inchiostro);
  outline-offset: 3px;
}
.pillola:active {
  transform: scale(0.96);
}
/* al passaggio: più larga, schiarita, col suo nome (la transizione non aspetta più il ritardo d’apertura) */
.pillola--sopra {
  --largo: 2.3em;
  transition-delay: 0ms;
}
.pillola--sopra::after {
  opacity: 0.84;
}
.pillola--sopra .pillola__nome {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* movimento ridotto: le pillole sono già aperte e cambiano sul posto */
.titolo--ridotto .pillola {
  width: var(--largo);
  margin: 0 0.12em;
  transition: none;
}
.titolo--ridotto .pillola--sopra {
  --largo: 1.45em;
}
.titolo--ridotto .pillola::after,
.titolo--ridotto .pillola__nome {
  transition-duration: 120ms;
}