.sections-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  z-index: 10;

  background:
    radial-gradient(circle at 50% 34%, rgba(152, 59, 217, 0.16), transparent 24%),
    radial-gradient(circle at 30% 72%, rgba(76, 177, 255, 0.09), transparent 20%),
    radial-gradient(circle at 78% 64%, rgba(255, 40, 149, 0.10), transparent 18%),
    linear-gradient(180deg, #04060b 0%, #020307 100%);
}

.section {
  position: absolute;
  inset: 0;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 60px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.02);
  filter: blur(12px);
  transition:
    opacity 520ms ease,
    transform 820ms cubic-bezier(.22,1,.36,1),
    filter 820ms cubic-bezier(.22,1,.36,1),
    visibility 0s linear 820ms;
}
.section.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
  filter: blur(0);
  transition:
    opacity 520ms ease,
    transform 820ms cubic-bezier(.22,1,.36,1),
    filter 820ms cubic-bezier(.22,1,.36,1),
    visibility 0s linear 0s;
}

/* PERFORMANCE: pausa tutte le animazioni nelle sezioni NON attive (fuori schermo).
   Le sezioni inattive restano nel DOM (opacity:0/visibility:hidden) per il cross-fade,
   quindi senza questa regola le loro animazioni decorative girerebbero sempre.
   La sezione uscente si congela mentre sfuma: impercettibile. */
.section:not(.is-active),
.section:not(.is-active) * {
  animation-play-state: paused !important;
}

.section__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,0.04), transparent 18%),
    radial-gradient(circle at 18% 28%, rgba(221,114,255,0.12), transparent 18%),
    radial-gradient(circle at 82% 72%, rgba(98,195,255,0.09), transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}

.section__backdrop::before,
.section__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.section__backdrop::before {
  background:
    radial-gradient(circle at 10% 15%, rgba(255,104,204,0.2) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 23%, rgba(221,114,255,0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 32% 73%, rgba(98,195,255,0.18) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 64%, rgba(255,104,204,0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 56% 40%, rgba(98,195,255,0.14) 0 1px, transparent 3px);
  opacity: 0.85;
}

.section__backdrop::after {
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), transparent 48%);
  mix-blend-mode: screen;
}

.section__backdrop--home {
  background:
    radial-gradient(circle at 50% 32%, rgba(194, 79, 255, 0.24), transparent 22%),
    radial-gradient(circle at 50% 75%, rgba(69, 89, 255, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}

.section__backdrop--how { background: radial-gradient(circle at 24% 33%, rgba(255,104,204,0.2), transparent 18%), linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); }
.section__backdrop--economy { background: radial-gradient(circle at 68% 30%, rgba(116,255,120,0.18), transparent 18%), linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); }
.section__backdrop--tokenomic { background: radial-gradient(circle at 50% 24%, rgba(221,114,255,0.2), transparent 16%), linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); }
.section__backdrop--assets { background: radial-gradient(circle at 34% 64%, rgba(98,195,255,0.18), transparent 18%), linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); }
.section__backdrop--games { background: radial-gradient(circle at 74% 58%, rgba(255,104,204,0.18), transparent 18%), linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); }
.section__backdrop--roadmap { background: radial-gradient(circle at 50% 44%, rgba(116,255,120,0.15), transparent 22%), linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); }

/* ==========================================================================
   MOBILE (≤768px) — modello sezione scrollabile in verticale.
   Le card impilate superano il viewport fisso: la sezione attiva diventa
   scrollabile (navigazione resta a bottoni HUD, niente wheel su mobile).
   ========================================================================== */
@media (max-width: 768px) {
  /* Niente scroll di PAGINA su mobile: la navigazione è coi pulsanti HUD (lo scroll
     serve solo al wheel desktop). Il reserve 180vh, scrollato col dito, faceva
     comparire/sparire la barra del browser cambiando la viewport-height → le card
     parallax (dimensionate sull'altezza della sezione) si ridimensionavano.
     Le singole sezioni mantengono comunque lo scroll INTERNO (regola sotto). */
  html,
  body {
    overflow: hidden !important;
    height: 100%;
    max-height: 100%;
    overscroll-behavior: none;
  }
  .page-scroll-reserve {
    display: none !important;
  }

  .section.is-active {
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* i wrapper di contenuto crescono con le card impilate (non più altezza fissa) */
  .section__content,
  .section__content--howto,
  .section__content--economy,
  .section__content--assets,
  .section__content--games {
    height: auto;
    min-height: 100%;
  }
}