/* Il globo di copertine */
:root {
  --carta: #eef3ef;
  --inchiostro: #07201f;
  --tenue: #5b706d;
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
}
body {
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  color: var(--inchiostro);
  background: var(--carta);
}
.sopra {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 620;
  color: var(--tenue);
}
.grande {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(26px, 3.6vw, 52px);
  font-weight: 640;
  font-stretch: 96%;
  line-height: 1.02;
  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 corsa è lunga, il palco resta fermo mentre si scorre */
.corsa {
  height: 340vh;
}
.palco {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  display: grid;
  place-items: center;
  padding: 0 clamp(18px, 5vw, 72px);
}
.titolo {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0.35em;
  width: 100%;
  margin: 0;
  font-size: clamp(40px, 8vw, 132px);
  font-weight: 700;
  font-stretch: 92%;
  letter-spacing: -0.05em;
  line-height: 1;
  pointer-events: none;
}
.parola {
  display: block;
  will-change: transform;
}

/* il globo: una sfera di copertine in 3D con i trasformati del CSS */
.globo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1500px;
  pointer-events: none;
}
.globo__scala {
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.sfera {
  position: relative;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}
.copertina {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--l);
  height: calc(var(--l) * 1.28);
  margin: calc(var(--l) * -0.64) 0 0 calc(var(--l) * -0.5);
  border-radius: 6px;
  backface-visibility: hidden;
  box-shadow: 0 0 0 1px rgba(7, 32, 31, 0.08);
}

/* le copertine: composizioni in CSS, al posto di immagini vere */
.c1 { background: radial-gradient(circle at 50% 38%, #ffb27a 0 22%, transparent 23%), linear-gradient(#0b3b39 0 70%, #07201f 70%); }
.c2 { background: repeating-linear-gradient(-35deg, #146662 0 10px, #86cfc4 10px 20px, #eef3ef 20px 23px); }
.c3 { background: linear-gradient(135deg, #ff8a3d 0 50%, #07201f 50%); }
.c4 { background: repeating-radial-gradient(circle at 50% 120%, #ff8a3d 0 8px, #ffb27a 8px 16px, #07201f 16px 19px); }
.c5 { background: linear-gradient(#cfebe5 0 55%, #3aa39b 55% 62%, #0f4f4c 62%); }
.c6 { background: conic-gradient(from 45deg at 50% 50%, #07201f 0 25%, #ff8a3d 0 50%, #07201f 0 75%, #86cfc4 0); }
.c7 { background: radial-gradient(ellipse at 50% 100%, #d9602a 0 30%, #ffb27a 31% 45%, #f6f7f3 46%); }
.c8 { background: linear-gradient(90deg, #07201f 0 20%, #f6f7f3 20% 40%, #0f4f4c 40% 60%, #f6f7f3 60% 80%, #ff8a3d 80%); }

.tutti {
  position: absolute;
  left: 50%;
  bottom: 12vh;
  z-index: 3;
  translate: -50% 0;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--inchiostro);
  color: var(--carta);
  font-weight: 640;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.16s ease-out;
}
.tutti:active {
  transform: scale(0.97);
}

/* movimento ridotto: parole ai lati, globo fermo */
.fermo .corsa {
  height: auto;
}
.fermo .palco {
  position: relative;
}
.fermo .tutti {
  opacity: 1;
  visibility: visible;
}