/* L'orologio che conta i minuti */
:root {
  --giallo: #f5dc3a;
  --inchiostro: #161616;
  --carta: #f2f2ee;
  --margine: clamp(16px, 3vw, 44px);
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  color: var(--inchiostro);
  background: var(--inchiostro);
  overflow: hidden;
}
.scene {
  position: absolute;
  width: 0;
  height: 0;
}

/* ------------------------------------------------------------------ i capitoli */
/* ogni pagina è un livello a sé: così quella che arriva può passare sopra la scheda */
.pagina {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--margine);
  padding: var(--margine);
  visibility: hidden;
}
.pagina.attiva {
  visibility: visible;
}
.pagina--giallo { background: var(--giallo); color: var(--inchiostro); }
.pagina--carta { background: var(--carta); color: var(--inchiostro); }
.pagina--inchiostro { background: var(--inchiostro); color: var(--carta); }
.pagina--inchiostro .pagina__titolo { color: var(--giallo); }
.pagina__testo {
  align-self: end;
  display: grid;
  gap: 18px;
  padding-bottom: 64px;
}
.pagina__quando {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 620;
}
.pagina__titolo {
  margin: 0;
  font-size: clamp(3rem, 1rem + 7vw, 9.5rem);
  font-weight: 900;
  font-stretch: 75%;
  line-height: 0.84;
  text-transform: uppercase;
}
/* rientro della prima riga al posto dello spazio fra i paragrafi, come in una rivista */
.pagina__corpo {
  max-width: 34ch;
  margin: 0;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.35rem);
  line-height: 1.35;
  text-indent: 2.2em;
}
.pagina__foto {
  position: relative;
  margin: 0;
  overflow: hidden;
}
/* la foto è più larga della cornice: all'arrivo della pagina scorre dentro di lei */
.pagina__foto-dentro {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -7%;
  width: 114%;
}
.pagina__foto svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------------ la scheda con l'orologio */
.scheda {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: var(--inchiostro);
  color: var(--carta);
  visibility: hidden;
}
.scheda__titolo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--giallo);
  font-weight: 900;
  font-stretch: 75%;
  line-height: 0.8;
  text-transform: uppercase;
  white-space: nowrap;
}
.scheda__parola {
  display: block;
  padding-top: 0.06em;
}
.scheda__orologio {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: var(--margine);
  text-align: center;
}
.scheda__giorno,
.scheda__sotto {
  margin: 0;
  overflow: clip;
}
.scheda__giorno {
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.25rem);
  font-weight: 620;
}
.scheda__giorno span {
  display: block;
}
.scheda__ora {
  display: flex;
  margin: 0;
  color: var(--giallo);
  font-size: min(40vw, 56vh);
  font-weight: 900;
  font-stretch: 75%;
  line-height: 0.82;
}
/* ogni cifra nella sua casella di larghezza fissa: l'orologio non balla mentre conta.
   (le cifre tabellari di Mona Sans hanno lo zero barrato) */
.cifra {
  display: inline-block;
  width: 0.5em;
  text-align: center;
}
/* i due punti lampeggiano come in un orologio da cruscotto */
.due-punti {
  animation: lampeggia 0.8s step-end infinite;
}
@keyframes lampeggia {
  50% { visibility: hidden; }
}
.scheda__sotto {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.3em;
  max-width: 32ch;
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.5rem);
  line-height: 1.25;
}
.parola {
  display: inline-block;
  overflow: clip;
  padding-bottom: 0.08em;
}
.parola span {
  display: inline-block;
}

/* ------------------------------------------------------------------ comandi */
.avanti {
  position: fixed;
  right: var(--margine);
  bottom: var(--margine);
  z-index: 30;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--inchiostro);
  color: var(--carta);
  box-shadow: 0 0 0 1.5px rgba(242, 242, 238, 0.35);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.avanti:active {
  transform: scale(0.97);
}
.avanti:focus-visible {
  outline: 2px solid var(--giallo);
  outline-offset: 3px;
}
.annuncio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .pagina {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .pagina__foto {
    order: -1;
  }
  .pagina__testo {
    padding-bottom: 72px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .due-punti {
    animation: none;
  }
}