/* ═══════════════════════════════════════════════════════
   AstronautLoop v3 — Cosmic Sentinel Three.js
   Casco 3D que reacciona al usuario y al swarm
   ═══════════════════════════════════════════════════════ */

/* ── Stage container ─────────────────────────────────── */
.astro-stage {
  position: relative;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* ── Mount para canvas WebGL ──────────────────────────── */
.astro-three-mount {
  position: relative;
  width: min(420px, 90%);
  height: min(420px, 55vh);
  pointer-events: none;
  filter: drop-shadow(0 0 32px rgba(80, 110, 220, 0.18))
          drop-shadow(0 0 64px rgba(143, 126, 233, 0.12));
  transition: filter 0.6s cubic-bezier(0.32, 0.72, 0, 1),
              transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}

.astro-stage.is-active .astro-three-mount {
  filter: drop-shadow(0 0 48px rgba(120, 140, 255, 0.38))
          drop-shadow(0 0 100px rgba(167, 139, 250, 0.30))
          drop-shadow(0 0 160px rgba(74, 222, 200, 0.12));
  transform: translateY(-8px);
}

/* ── Corona / aura ambiental (CSS, complementa drop-shadow) ─── */
.astro-corona {
  position: absolute;
  inset: 50% 50% 50% 50%;
  width: 700px;
  height: 700px;
  transform: translate(-50%, -50%);
  margin: 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(143, 126, 233, 0.05) 0%,
    rgba(80, 110, 220, 0.025) 35%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
  animation: astro-corona-breathe 6s ease-in-out infinite;
  transition: background 0.8s cubic-bezier(0.32, 0.72, 0, 1);
}

.astro-stage.is-active .astro-corona {
  background: radial-gradient(
    ellipse at center,
    rgba(167, 139, 250, 0.18) 0%,
    rgba(74, 222, 200, 0.10) 25%,
    rgba(80, 110, 220, 0.05) 55%,
    transparent 75%
  );
  animation: astro-corona-pulse 2.2s ease-in-out infinite;
}

@keyframes astro-corona-breathe {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.9; transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes astro-corona-pulse {
  0%, 100% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
  }
}

/* ── Campo de estrellas — fondo del stage ────────────── */
.astro-stars-field {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 20%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 12%,  rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 42% 8%,  rgba(200,180,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 35%,  rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 8%  55%,  rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 92% 60%, rgba(180,200,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 88%,  rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 75%,  rgba(220,200,255,0.4) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 65% 30%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 45%,  rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1.4px 1.4px at 12% 78%, rgba(199, 210, 254, 0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 70%,  rgba(255,255,255,0.45) 0%, transparent 100%);
  animation: astro-stars-twinkle 6s ease-in-out infinite;
}

.astro-stage.is-active .astro-stars-field {
  animation-duration: 3s;
}

@keyframes astro-stars-twinkle {
  0%, 100% { opacity: 0.55; }
  33%      { opacity: 0.9; }
  66%      { opacity: 0.45; }
}

/* ── Canvas WebGL (within mount) ─────────────────────── */
.astro-three-mount canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
  .astro-three-mount {
    width: 100%;
    height: 50vh;
  }
  .astro-corona {
    width: 480px;
    height: 480px;
  }
}