/* L’anello delle sfere */
:root {
  --notte: #0F1220;
  --luna: #EDEBF5;
  --tenue: #A3A6C0;
  --margine: clamp(18px, 4vw, 56px);
  --alto: 100vh;
  /* il diametro di una sfera prima di arrivare all’anello */
  --d: clamp(112px, 30vmin, 320px);
}
@supports (height: 100svh) {
  :root { --alto: 100svh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
}
body {
  background: var(--notte);
  color: var(--luna);
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
}

.scena {
  position: relative;
  height: var(--alto);
  overflow: hidden;
}
.nota {
  position: absolute;
  z-index: 3;
  top: var(--margine);
  left: var(--margine);
  max-width: 32ch;
  margin: 0;
  color: var(--tenue);
  font-size: clamp(0.92rem, 0.84rem + 0.3vw, 1.08rem);
  font-weight: 460;
  line-height: 1.38;
}
.titolo {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(92vw, 16ch);
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(2.6rem, 1.4rem + 5vw, 6.2rem);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  /* un’ombra scura e larga: il titolo si legge anche dove passa sopra il bordo di una sfera */
  text-shadow: 0 2px 32px rgba(15, 18, 32, 0.7);
  transform: translate(-50%, -50%);
  will-change: filter, transform;
}

/* ---- l’anello: un filo sottile con una parola al centro ---- */
.anello {
  position: absolute;
  z-index: 0;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(237, 235, 245, 0.32);
  border-radius: 50%;
  opacity: 0;
}
.anello__centro {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  font-style: italic;
}

/* ---- una sfera: un corpo sfumato, un lucido che gira dentro, un alone e il nome dritto ---- */
.sfera {
  --c1: #FFE0C7;
  --c2: #F29E6B;
  --c3: #B5552E;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  will-change: transform;
}
.sfera--glicine {
  --c1: #ECE8FF;
  --c2: #8F8CF2;
  --c3: #4B48B8;
}
.sfera--menta {
  --c1: #DDF7EC;
  --c2: #5CC6A7;
  --c3: #25806A;
}
.sfera::before {
  content: '';
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c2) 55%, transparent) 0%, transparent 68%);
  filter: blur(26px);
}
.sfera__corpo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, var(--c1) 17%, var(--c2) 56%, var(--c3) 100%);
  filter: blur(1.2px);
}
.sfera__lucido {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 14%, rgba(255, 255, 255, 0.5) 22%, transparent 32% 56%, rgba(255, 255, 255, 0.32) 66%, transparent 78%);
  filter: blur(12px);
  mix-blend-mode: soft-light;
}
.sfera__nome {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.7rem);
  color: #FFFFFF;
  text-shadow: 0 0 22px rgba(15, 18, 32, 0.55);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%);
}

/* ---- dopo la scena ---- */
.coda {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1rem;
  min-height: calc(var(--alto) * 0.8);
  padding: var(--margine);
  text-align: center;
}
.coda__titolo {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(2rem, 1.2rem + 3vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
}
.coda__testo {
  max-width: 40ch;
  margin: 0;
  color: var(--tenue);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  line-height: 1.5;
}

/* movimento ridotto: la scena è già alla fine, col titolo sopra l’anello */
.scena--ferma .titolo {
  top: 17%;
  width: min(92vw, 22ch);
  font-size: clamp(1.8rem, 1rem + 2.6vw, 3.6rem);
}