/* Progetti in fila con l'anello */
:root {
  --notte: #041b1a;
  --testo: #eef3ef;
  --tenue: #86a8a2;
  --accento: #ff8a3d;
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
}
body {
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  color: var(--testo);
  background: var(--notte);
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sopra {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 620;
  color: var(--tenue);
}
.grande {
  margin: 0;
  max-width: 26ch;
  font-size: clamp(26px, 3.4vw, 50px);
  font-weight: 640;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.apertura,
.coda {
  min-height: 70vh;
  padding: 12vh clamp(18px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.coda {
  justify-content: center;
}

/* la scena fissata: alta quanto lo schermo con la barra di Safari ritirata (lvh),
   così quando la barra sparisce sotto non resta una fascia vuota */
.corsa {
  position: relative;
  height: 100vh;
  height: 100lvh;
  overflow: clip;
}
.fondo,
.fondo__strato {
  position: absolute;
  inset: 0;
}
.fondo__strato {
  inset: -10%;
  filter: blur(46px) saturate(1.2);
  opacity: 0;
}
.fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 27, 26, 0.92) 0%, rgba(4, 27, 26, 0.55) 45%, rgba(4, 27, 26, 0.82) 100%);
}

.testi {
  position: absolute;
  left: clamp(18px, 5vw, 72px);
  top: 50%;
  z-index: 3;
  width: min(30vw, 400px);
  translate: 0 -50%;
}
.nome {
  margin: 0 0 16px;
  font-size: clamp(34px, 4.4vw, 70px);
  font-weight: 700;
  font-stretch: 92%;
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.descrizione {
  margin: 0;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.45;
  color: #c9dcd8;
}
.parola {
  display: inline-block;
}

/* la fila: le carte stanno tutte al centro, i trasformati le mettono sopra e sotto */
.fila {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
}
.carta {
  position: absolute;
  left: 58%;
  top: 50%;
  width: min(40vw, 620px);
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  translate: -50% -50%;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(238, 243, 239, 0.1);
  will-change: transform, opacity;
}

/* le copertine dei progetti: composizioni in CSS, al posto delle immagini */
.q1 { background: radial-gradient(circle at 30% 70%, #ffb27a 0 12%, transparent 12.5%), linear-gradient(#86cfc4 0 58%, #146662 58% 70%, #0b3b39 70%); }
.q2 { background: repeating-linear-gradient(90deg, #eef3ef 0 12%, #d9602a 12% 14%), linear-gradient(#eef3ef, #cfebe5); }
.q3 { background: radial-gradient(ellipse at 50% 120%, #ff8a3d 0 38%, #7a2a14 39% 52%, #1c0d0a 53%); }
.q4 { background: conic-gradient(from 200deg at 60% 45%, #146662, #86cfc4, #eef3ef, #3aa39b, #146662); }
.q5 { background: radial-gradient(circle at 50% 38%, #fff4df 0 16%, #ffb27a 17% 30%, transparent 31%), linear-gradient(#ff8a3d, #a8440c); }

/* l'anello: si riempie mentre scorri verso il progetto dopo */
.anello {
  position: absolute;
  right: clamp(18px, 5vw, 72px);
  /* sopra la barra di Safari anche quando è aperta */
  bottom: calc(clamp(24px, 6vh, 60px) + (100lvh - 100svh));
  z-index: 3;
  width: clamp(60px, 6vw, 84px);
}
.anello svg {
  display: block;
  width: 100%;
  overflow: visible;
}
.anello circle {
  fill: none;
  stroke-width: 2.5;
}
.anello__base {
  stroke: rgba(238, 243, 239, 0.18);
}
.anello__pieno {
  stroke: var(--accento);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 40px 40px;
}
.anello__freccia {
  fill: none;
  stroke: var(--testo);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 800px) {
  .testi {
    top: 8vh;
    width: auto;
    right: clamp(18px, 5vw, 72px);
    translate: none;
  }
  .carta {
    left: 50%;
    top: 62%;
    width: 78vw;
  }
}