/* mirentia — orb scene canvas + fallbacks. Layered above body bg, below hero copy. */

#orb-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: block;
  opacity: 0.65;
  transition: opacity 0.4s ease;
}

/* Below hero: JS adds .is-faded and we drop to 0 so the orb doesn't sit on every section. */
#orb-canvas.is-faded {
  opacity: 0;
}

/* Hero copy stacks above the fixed canvas without altering its layout. */
.hero-stagger,
.word-stagger,
header.wrap {
  position: relative;
  z-index: 1;
}

/* Dark halo behind text so the gold orb doesn't drown out the copy. */
.hero-stagger,
.word-stagger,
.section .wrap {
  text-shadow: 0 0 24px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.9);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-stagger,
  .word-stagger,
  .section .wrap {
    transition: text-shadow 0.3s ease;
  }
}

/* CTA beam overlay (DOM fallback only — the 3D line is drawn in-scene). */
#orb-cta-fallback {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}
#orb-cta-fallback.is-active { opacity: 1; }

/* Reduced motion: the orb itself stays but without particle drift or bloom churn. */
@media (prefers-reduced-motion: reduce) {
  #orb-canvas { filter: saturate(0.9); }
}

/* Touch / mobile: hide entirely. Cleaner than a tiny top-right version. */
@media (max-width: 767px), (pointer: coarse) {
  #orb-canvas { display: none; }
}

/* WebGL fallback: when JS replaces the canvas with the SVG, keep the wrapper
   visually centered without blocking layout. */
.orb-fallback {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 0;
  pointer-events: none;
}
.orb-fallback svg { width: min(60vmin, 520px); height: auto; }

/* ---- Loading skeleton state (shown while Three.js initializes) ---- */
#orb-canvas.is-loading {
  opacity: 0;
}
#orb-canvas.is-loading::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, #1a1300 0%, #0a0a0a 70%);
  z-index: 0;
  animation: orb-skeleton-pulse 1.4s ease-in-out infinite alternate;
}
@keyframes orb-skeleton-pulse {
  from { opacity: 0.4; }
  to { opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  #orb-canvas.is-loading::after { animation: none; opacity: 0.6; }
}