/* ====================================================================== */
/* SFONDO SPAZIALE 3D GLOBALE (adattato da background/BGV2)                */
/* Unico sfondo per tutte le pagine: cambiando sezione la camera vola in   */
/* un'altra zona dello stesso mondo (parallax 3D). Il parallax del MOUSE   */
/* è solo desktop. Pianeti = webp in assets/bg-planet*.webp.               */
/* Tolto dal mockup: testo descrittivo, contatore, pulsanti nav, card test */
/* (si usa la navigazione del sito).                                       */
/* ====================================================================== */

.space-bg {
  position: fixed;
  inset: 0;
  z-index: -1;                 /* dietro a tutto il contenuto del sito */
  overflow: hidden;
  pointer-events: none;
  perspective: 1100px;
  perspective-origin: 50% 50%;
  --planet-rx: 0deg;
  --planet-ry: 0deg;
  --mx: 0;
  --my: 0;
  background: radial-gradient(120% 90% at 50% 40%, #050813 0%, #02030a 46%, #000105 100%);
}

.sbg-world {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
  /* NIENTE transition permanente: gli update per-frame del parallax del mouse devono
     essere ISTANTANEI (con la transition a 1800ms restavano sempre "in inseguimento"
     → il parallax del mouse sembrava bloccato). La transition del viaggio camera si
     attiva solo durante .sbg-traveling (come i pianeti). */
}
.sbg-traveling .sbg-world {
  transition: transform 1800ms cubic-bezier(.66, 0, .2, 1);
}

/* ogni piano è più grande del viewport (margine per pan) e a profondità diversa */
.sbg-layer {
  position: absolute;
  top: -65%; left: -65%;
  width: 230%; height: 230%;
  transform-style: preserve-3d;
  /* niente will-change qui: con molti layer enormi promossi il compositor su GPU
     integrate andava in saturazione e i transform "si congelavano". */
}
.sbg-layer.l-far  { transform: translate3d(calc(var(--mx) * -14px), calc(var(--my) * -10px), 0) translateZ(-700px) scale(1.85); }
.sbg-layer.l-mid  { transform: translate3d(calc(var(--mx) * -34px), calc(var(--my) * -22px), 0) translateZ(-360px) scale(1.42); }
.sbg-layer.l-near { transform: translate3d(calc(var(--mx) * -58px), calc(var(--my) * -38px), 0) translateZ(-120px) scale(1.12); }
.sbg-layer.l-dust { transform: translate3d(calc(var(--mx) * -92px), calc(var(--my) * -64px), 0) translateZ(60px) scale(0.95); }

/* nebulose */
.sbg-neb {
  position: absolute;
  border-radius: 50%;
  /* niente blur: lo sfondo 3D deve restare nitido (il gradiente radiale è già morbido) */
  opacity: 0.5;
  mix-blend-mode: screen;
  animation: sbgNebDrift 18s ease-in-out infinite alternate;
}
@keyframes sbgNebDrift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(2.5%, -2%) scale(1.08); }
}

/* stelle */
.sbg-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: sbgTwinkle 3.4s ease-in-out infinite;
}
@keyframes sbgTwinkle {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

/* particelle vicine */
.sbg-dust {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%);
  animation: sbgFloaty 9s ease-in-out infinite alternate;
}
@keyframes sbgFloaty {
  from { transform: translateY(0); }
  to   { transform: translateY(-22px); }
}

/* pianeti reali (immagini webp). Compensano la rotazione camera per restare tondi. */
.sbg-planet {
  position: absolute;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  transform: rotateX(var(--planet-rx, 0deg)) rotateY(var(--planet-ry, 0deg));
  transition: transform 180ms ease-out;
}
.sbg-traveling .sbg-planet { transition: transform 1800ms cubic-bezier(.66, 0, .2, 1); }

.sbg-planet-art {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  animation: sbgPlanetRotate 60s linear infinite;
}
@keyframes sbgPlanetRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* pianeti SENZA trasparenza (opacità piena a ogni profondità); resta solo un lieve
   glow di colore per profondità. */
.sbg-d-far  { opacity: 1; filter: drop-shadow(0 0 10px rgba(98,195,255,0.10)); }
.sbg-d-mid  { opacity: 1; filter: drop-shadow(0 0 16px rgba(116,255,120,0.14)); }
.sbg-d-near { opacity: 1; filter: drop-shadow(0 0 20px rgba(221,114,255,0.14)); }

.sbg-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 52%, rgba(0,0,0,0.55) 100%);
}

/* --- il sito mostra il nuovo sfondo: si nascondono i vecchi backdrop animati
       per-sezione e si rende TRASPARENTE lo stage (aveva un gradiente scuro opaco
       che copriva lo sfondo). Le sezioni sono già trasparenti. --- */
.section__backdrop { display: none !important; }
#sectionsStage { background: transparent !important; }