/* =========================================================================
   three-scene.css  —  Hero 3D centerpiece (Three.js mounts into #hero-3d).
   The <canvas> + wrapper are created at runtime by three-scene.js and appended
   INTO #hero-3d (right side of the hero). A CSS fallback orb shows on mobile /
   when WebGL is unavailable so the slot is never empty.
   ========================================================================= */

/* The dedicated centerpiece box on the right of the hero. */
#hero-3d {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Subtle CSS fallback orb — visible behind a transparent canvas and as the
   sole visual on mobile / no-WebGL. Cheap (static gradient + blur). */
.hero-3d-fallback {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    color-mix(in srgb, var(--secondary-color) 70%, transparent),
    color-mix(in srgb, var(--primary-color) 55%, transparent) 55%,
    transparent 72%);
  filter: blur(6px);
  opacity: 0.45;
  animation: heroOrbFloat 9s ease-in-out infinite;
}
@keyframes heroOrbFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-10px) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-3d-fallback { animation: none; }
}

/* The WebGL canvas wrapper fills the centerpiece box. */
.three-hero-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;          /* never block clicks */
  overflow: hidden;
  opacity: 0;
  transition: opacity 1s ease;
  mix-blend-mode: screen;        /* glow against the dark hero */
}
.three-hero-layer.is-ready { opacity: 1; }

.three-hero-layer canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
}

/* Light theme: screen blend can wash out — soften. */
[data-theme="light"] .three-hero-layer,
:root:not([data-theme="dark"]) .three-hero-layer {
  mix-blend-mode: normal;
  opacity: 0;
}
[data-theme="light"] .three-hero-layer.is-ready,
:root:not([data-theme="dark"]) .three-hero-layer.is-ready { opacity: 0.92; }

@media (prefers-reduced-motion: reduce) {
  .three-hero-layer { transition: none; }
}

/* Mobile: the 3D now renders at a lighter quality tier — keep the canvas
   visible (the CSS orb still shows behind the transparent canvas as fallback
   when WebGL is genuinely unavailable). Just tighten the centerpiece sizing. */
@media (max-width: 768px) {
  #hero-3d { min-height: 220px; max-width: 300px; }
}