/* Crybu — "Spazio" (2026-11-13): il canvas 3D fisso dietro la home.
   ⚠️ Copia identica in dist/static/spazio.css (sorgente + dist). */
#spazio {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;            /* sopra il fondo del body, sotto tutto il contenuto */
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}
html.spazio-vivo #spazio { opacity: 1; }
/* con la scena viva il vecchio bagliore e gli orbs si attenuano: il colore lo da' la nebulosa */
html.spazio-vivo .hero-glow { opacity: .07; animation: none; }
html.spazio-vivo .orb { opacity: .45; }
/* le schede (moduli, passi, statistiche) restano piene: il testo non cade mai sulle stelle */
html.spazio-vivo .card,
html.spazio-vivo .step,
html.spazio-vivo .stat { background: color-mix(in srgb, var(--bg-2) 88%, transparent); backdrop-filter: blur(6px); }
/* un'ombra morbida dietro il blocco di testo della hero: il nucleo resta visibile ai bordi, il testo vince al centro */
html.spazio-vivo .hero-content::before {
  content: "";
  position: absolute;
  inset: -8% -12%;
  z-index: -1;
  background: radial-gradient(ellipse 60% 55% at 50% 48%, rgba(10, 10, 11, .62), rgba(10, 10, 11, .25) 55%, transparent 78%);
  pointer-events: none;
}
/* titolo con un velo di luce: lo spazio e' dietro, il testo deve vincere */
html.spazio-vivo .hero h1 { text-shadow: 0 0 40px rgba(10, 10, 11, .8), 0 2px 18px rgba(10, 10, 11, .9); }
html.spazio-vivo .hero-sub { color: #c9c3bd; text-shadow: 0 1px 12px rgba(10, 10, 11, .9); }
/* ---- "Orbita": i 10 Sistemi come sistema solare (scripts/orbita.js) ---- */
#orbita { display: block; width: 100%; height: clamp(360px, 52vw, 560px); max-width: 1200px; margin: -8px auto 0; }
.sistemi-band.orbita-viva .sys-marquee-wrap { display: none; }  /* la fila dei nomi resta per chi non ha JS o canvas */
.sistemi-band.orbita-viva { background: transparent; border-block-color: rgba(255,255,255,.06); }
.sistemi-band.orbita-viva .sistemi-inner { padding-bottom: 8px; }
@media (max-width: 700px) { #orbita { height: clamp(300px, 90vw, 420px); } }
/* ---- CTA finale: un portale di luce che gira intorno al bottone ---- */
/* l'angolo e' una proprieta' registrata: si anima il gradiente, non l'elemento, cosi' l'anello segue la forma del bottone
   (una rotazione di transform faceva girare il rettangolo e diventava una striscia) */
@property --portal-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.portal { position: relative; display: inline-block; isolation: isolate; border-radius: 16px; }
.portal::before {
  content: "";
  position: absolute;
  inset: -12px -14px;
  z-index: -1;
  border-radius: 24px;
  --portal-a: 0deg;
  background: conic-gradient(from var(--portal-a), transparent 0 18%, rgba(247,60,28,.95) 32%, rgba(255,170,100,1) 42%, transparent 58%, rgba(110,140,255,.85) 78%, transparent 100%);
  filter: blur(10px);
  opacity: .9;
}
.portal::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 16px;
  background: var(--bg);
}
/* alone esterno fermo, cosi' anche senza @property (vecchi browser) il bottone ha la sua luce */
.portal .btn { box-shadow: 0 0 40px rgba(247,60,28,.35), 0 0 90px rgba(247,60,28,.18); }
@media (prefers-reduced-motion: no-preference) {
  .portal::before { animation: portal-giro 5s linear infinite; }
}
@keyframes portal-giro { to { --portal-a: 360deg; } }
/* tema chiaro: niente spazio (il canvas e' pensato per il buio) */
html[data-theme="light"] #spazio { display: none; }
html[data-theme="light"] #orbita { display: none; }
html[data-theme="light"] .sistemi-band.orbita-viva .sys-marquee-wrap { display: block; }
@media (prefers-reduced-motion: reduce) {
  #spazio { transition: none; }
}