/* L'ora che copre la foto */
:root {
  --giallo: #f5dc3a;
  --inchiostro: #161616;
  --carta: #f2f2ee;
  --margine: clamp(16px, 3vw, 44px);
  --schermo: 100vh;
}
@supports (height: 100svh) {
  :root { --schermo: 100svh; }
}

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

/* la striscia è alta quanto serve per scorrere tutto il binario (la misura lo script) */
.striscia {
  position: relative;
}
.striscia__schermo {
  position: sticky;
  top: 0;
  height: var(--schermo);
  overflow: hidden;
}
.binario {
  display: flex;
  width: max-content;
  height: 100%;
}
.lastra {
  position: relative;
  z-index: 1;
  flex: none;
  height: 100%;
  margin: 0;
}
.lastra__contenuto {
  height: 100%;
}
.tema-giallo { background: var(--giallo); color: var(--inchiostro); }
.tema-carta { background: var(--carta); color: var(--inchiostro); }
.tema-inchiostro { background: var(--inchiostro); color: var(--carta); }

/* apertura e fine */
.lastra--apertura,
.lastra--fine {
  width: 100vw;
}
.lastra--apertura .lastra__contenuto,
.lastra--fine .lastra__contenuto {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--margine);
}
.apertura__titolo {
  margin: 0;
  font-size: min(30vw, 38vh);
  font-weight: 900;
  font-stretch: 75%;
  line-height: 0.8;
  text-transform: uppercase;
}
.apertura__testo {
  max-width: 30ch;
  margin: 0;
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.6rem);
  line-height: 1.3;
}
.apertura__scorri {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 650;
}
.apertura__scorri svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.torna {
  align-self: flex-start;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--inchiostro);
  color: var(--carta);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.torna:active {
  transform: scale(0.97);
}
.torna:focus-visible {
  outline: 2px solid var(--inchiostro);
  outline-offset: 3px;
}

/* foto: la cornice è alta quanto conviene allo schermo, la foto dentro è larga il 120% e scorre */
.lastra--foto {
  background: var(--carta);
}
.lastra--foto .lastra__contenuto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 0 clamp(12px, 2vw, 28px);
}
.cornice {
  position: relative;
  height: min(66vh, 104vw);
  aspect-ratio: var(--r, 1.5);
  overflow: hidden;
  background: #2a2a2a;
}
.cornice__dentro {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 120%;
}
.cornice__dentro svg {
  display: block;
  width: 100%;
  height: 100%;
}
.lastra--foto figcaption {
  max-width: 34ch;
  font-size: 0.95rem;
  line-height: 1.35;
}

/* testo */
.lastra--testo {
  width: min(560px, 88vw);
}
.lastra--testo .lastra__contenuto,
.lastra--titolo .lastra__contenuto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: var(--margine);
}
.testo__titolo {
  margin: 0;
  font-size: clamp(2.6rem, 1rem + 5vw, 5.6rem);
  font-weight: 900;
  font-stretch: 75%;
  line-height: 0.86;
  text-transform: uppercase;
}
.riga {
  display: block;
  overflow: clip;
}
.riga span {
  display: block;
}
.testo__corpo {
  max-width: 32ch;
  margin: 0;
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.3rem);
  line-height: 1.4;
  text-indent: 2.2em;
}
/* la lastra che verrà coperta è larga tutto lo schermo: si legge intera prima che arrivi il pannello */
.lastra--piena {
  width: 100vw;
}
.lastra--piena .lastra__contenuto {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  align-items: end;
  align-content: center;
  gap: var(--margine);
}
.lastra--piena .testo__titolo {
  font-size: min(7.6vw, 17vh);
  white-space: nowrap;
}
.testo__corpo--centro {
  align-self: center;
  text-align: center;
  text-indent: 0;
}

/* un titolo con una foto in mezzo: le due parole ai lati, la foto al centro */
.lastra--titolo {
  width: max(100vw, 760px);
}
.titolo-media {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
  margin: 0;
  font-size: min(20vw, 30vh);
  font-weight: 900;
  font-stretch: 75%;
  line-height: 0.8;
  text-transform: uppercase;
}
.titolo-media__foto {
  flex: none;
  width: min(26vh, 30vw);
  height: min(24vh, 26vw);
  overflow: hidden;
  clip-path: inset(100% 0% 0% 0%);
}
.titolo-media__foto svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* il pannello dell'ora: largo tutto lo schermo e sopra la lastra che copre */
.lastra--ora {
  z-index: 2;
  min-width: 100vw;
}
.lastra--ora .lastra__contenuto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.ora {
  display: flex;
  margin: 0;
  font-size: min(38vw, 56vh);
  font-weight: 900;
  font-stretch: 75%;
  line-height: 0.82;
}
.tema-inchiostro .ora {
  color: var(--giallo);
}
.cifra {
  display: inline-block;
  overflow: clip;
  padding-top: 0.04em;
}
.cifra span {
  display: inline-block;
}
.due-punti {
  animation: lampeggia 1.2s step-end infinite;
}
@keyframes lampeggia {
  50% { visibility: hidden; }
}
.ora__sotto {
  margin: 0;
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.5rem);
  font-weight: 560;
}

/* grana di pellicola */
.grana {
  position: fixed;
  inset: -40%;
  z-index: 10;
  pointer-events: none;
  opacity: 0.1;
  background-image: var(--grana);
  animation: grana 0.9s steps(6) infinite;
}
@keyframes grana {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-6%, 4%); }
  40% { transform: translate(5%, -3%); }
  60% { transform: translate(-3%, -6%); }
  80% { transform: translate(6%, 5%); }
  100% { transform: translate(0, 0); }
}

/* senza movimento: niente striscia, le lastre una sotto l'altra */
.ferma .striscia__schermo {
  position: static;
  height: auto;
  overflow: visible;
}
.ferma .binario {
  flex-direction: column;
  width: auto;
}
.ferma .lastra {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 70vh;
}
.ferma .lastra--foto .lastra__contenuto {
  padding: 8vh var(--margine);
}
.ferma .cornice {
  width: min(100%, 900px);
  height: auto;
}
.ferma .titolo-media__foto {
  clip-path: none;
}
.ferma .due-punti,
.ferma .grana {
  animation: none;
}

@media (max-width: 700px) {
  .lastra--piena .lastra__contenuto {
    grid-template-columns: 1fr;
    align-content: center;
  }
  .lastra--piena .testo__titolo {
    font-size: min(12.5vw, 10vh);
  }
  .lastra--foto figcaption {
    max-width: 26ch;
  }
  .cornice {
    height: min(52vh, 92vw);
  }
}