/* ============================================================
   BASE.CSS — AstroEdu Brasil
   Gerado por tools/split-css.js
   Não editar manualmente — edite a fonte ou reorganize os slots.
   ============================================================ */
/* ================================================================
   AstroEdu Brasil — Design System v2
   Premium space-themed UI · Mobile-first · Glassmorphism
   ================================================================ */

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ===== TOKENS ===== */
:root {
  --bg:         #050510;
  --surface:    rgba(255,255,255,0.03);
  --surface-2:  rgba(255,255,255,0.055);
  --border:     rgba(255,255,255,0.06);
  --border-h:   rgba(255,255,255,0.12);
  --text:       rgba(255,255,255,0.90);
  --text-2:     rgba(255,255,255,0.55);
  --text-3:     rgba(255,255,255,0.35);
  --accent:     #00d4ff;
  --accent-2:   #7c3aed;
  --gold:       #f1c40f;
  --green:      #10b981;
  --red:        #ef4444;
  --radius:     12px;
  --radius-sm:  8px;
  --radius-lg:  18px;
  --font-h:     'Orbitron', sans-serif;
  --font-b:     'Nunito', sans-serif;
  --max-w:      1100px;
  --header-h:   56px;
  --ease:       cubic-bezier(.4,0,.2,1);

  /* level palette */
  --n1: #10b981; --n2: #06b6d4; --n3: #8b5cf6; --n4: #ef4444;

  /* legacy compat */
  --azul-espaco: #050510;
  --azul-profundo: #0d1b4b;
  --roxo-nebula: #1a0533;
  --azul-brilhante: #00d4ff;
  --roxo-brilhante: #9b59b6;
  --amarelo-estrela: #f1c40f;
  --laranja-sol: #e67e22;
  --verde-neon: #2ecc71;
  --vermelho-marte: #e74c3c;
  --branco: #ffffff;
  --cinza-claro: #ecf0f1;
  --fonte-titulo: var(--font-h);
  --fonte-corpo: var(--font-b);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  font-size: 1rem;
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Com fundo cósmico a imagem fica exposta; o véu + stars-layer cuidam do contraste */
body.has-cosmic-bg { background: transparent; }
body.has-cosmic-bg header,
body.has-cosmic-bg main,
body.has-cosmic-bg footer { position: relative; z-index: 2; }
body.has-cosmic-bg .fab-group { z-index: 9000; }

a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }

/* ===== FUNDO CÓSMICO ===== */
.stars-layer {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(12,25,60,0.5), transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(50,15,70,0.3), transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(8,35,55,0.35), transparent 45%),
    linear-gradient(180deg, #050510, #08122a 50%, #070710 100%);
}

/* Camadas de fundo cósmico (duas empilhadas para cross-fade suave) */
.cosmic-bg-image {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  filter: brightness(0.55) saturate(1.15);
  transition: opacity 2.2s ease-in-out;
  will-change: opacity;
}
.cosmic-bg-image.visible { opacity: 0.55; }

/* Véu escuro por cima (em um único nó compartilhado para não duplicar) */
body.has-cosmic-bg::before {
  content: '';
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(5,5,16,0.20), rgba(5,5,16,0.55) 85%),
    linear-gradient(180deg, rgba(5,5,16,0.35), rgba(5,5,16,0.55));
}
/* Quando a imagem cósmica estiver ativa, o .stars-layer vira um overlay semitransparente
   (sem o gradiente linear sólido) para a imagem aparecer por trás das estrelas */
body.has-cosmic-bg .stars-layer {
  background:
    radial-gradient(ellipse at 15% 50%, rgba(12,25,60,0.25), transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(50,15,70,0.20), transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(8,35,55,0.20), transparent 45%);
  z-index: 1;
}

.stars-layer::before,
.stars-layer::after {
  content: '';
  position: absolute; inset: 0;
  animation: twinkle 5s ease-in-out infinite alternate;
}

.stars-layer::before {
  background-image:
    radial-gradient(1px 1px at 5% 12%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.5px 1.5px at 18% 35%, rgba(170,220,255,0.7), transparent),
    radial-gradient(1px 1px at 32% 8%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 45% 58%, rgba(255,238,170,0.5), transparent),
    radial-gradient(1.5px 1.5px at 62% 22%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 78% 72%, rgba(170,220,255,0.6), transparent),
    radial-gradient(1px 1px at 88% 45%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 10% 80%, rgba(255,238,170,0.6), transparent),
    radial-gradient(1px 1px at 55% 92%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 72% 5%, rgba(170,220,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 25% 60%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 40% 38%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 92% 88%, rgba(255,238,170,0.5), transparent),
    radial-gradient(1.5px 1.5px at 65% 48%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 8% 55%, rgba(170,220,255,0.5), transparent);
}

.stars-layer::after {
  background-image:
    radial-gradient(1px 1px at 12% 28%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 35% 78%, rgba(255,238,170,0.5), transparent),
    radial-gradient(1.5px 1.5px at 52% 15%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 70% 62%, rgba(170,220,255,0.6), transparent),
    radial-gradient(1px 1px at 90% 32%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 22% 48%, rgba(255,238,170,0.5), transparent),
    radial-gradient(1px 1px at 42% 88%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 60% 38%, rgba(170,220,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 82% 8%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 15% 95%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 48% 68%, rgba(255,238,170,0.5), transparent),
    radial-gradient(1.5px 1.5px at 75% 85%, rgba(170,220,255,0.5), transparent),
    radial-gradient(1px 1px at 95% 55%, rgba(255,255,255,0.5), transparent);
  animation-delay: 2.5s;
}

@keyframes twinkle { 0% { opacity: 0.3; } 100% { opacity: 1; } }

.comet {
  position: fixed;
  pointer-events: none;
  z-index: 1;
  width: 2px; height: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 0 4px 1px rgba(200,220,255,0.9),
    -30px 0 15px 0 rgba(200,220,255,0.25),
    -60px 0 30px 0 rgba(200,220,255,0.08);
  animation: cometFly var(--dur,4s) linear forwards;
  opacity: 0;
}

@keyframes cometFly {
  0%   { transform: translate(0,0) rotate(var(--angle,-35deg)); opacity: 0; }
  8%   { opacity: 1; }
  80%  { opacity: 0.5; }
  100% { transform: translate(var(--dx,-120vw), var(--dy,120vh)) rotate(var(--angle,-35deg)); opacity: 0; }
}

.asteroid {
  position: fixed;
  pointer-events: none;
  z-index: 1;
  border-radius: 40% 55% 45% 50%;
  background: radial-gradient(ellipse at 30% 30%, #7a6e5e, #3d352a);
  box-shadow: inset -1px -1px 3px rgba(0,0,0,0.7);
  animation: asteroidDrift var(--dur,25s) linear infinite;
  opacity: 0.35;
}

@keyframes asteroidDrift {
  0%   { transform: translate(0,0) rotate(0deg); }
  100% { transform: translate(var(--dx,-50vw), var(--dy,30vh)) rotate(360deg); }
}

/* Meteoro — risco curto e brilhante */
.meteor {
  position: fixed;
  pointer-events: none;
  z-index: 1;
  width: 120px; height: 2px;
  background: linear-gradient(270deg, rgba(255,255,255,0.95), rgba(180,220,255,0.6) 40%, transparent);
  border-radius: 999px;
  filter: drop-shadow(0 0 6px rgba(200,220,255,0.9));
  transform: rotate(var(--angle,-35deg));
  animation: meteorFly var(--dur,1.6s) ease-out forwards;
  opacity: 0;
}
@keyframes meteorFly {
  0%   { transform: translate(0,0) rotate(var(--angle,-35deg)); opacity: 0; }
  15%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(var(--dx,-40vw), var(--dy,40vh)) rotate(var(--angle,-35deg)); opacity: 0; }
}

/* Pulsar — ponto brilhante com onda expandindo */
.pulsar {
  position: fixed;
  pointer-events: none;
  z-index: 1;
  width: 4px; height: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 8px 2px rgba(180,220,255,0.8);
  animation: pulsarPulse 3s ease-out forwards;
  opacity: 0;
}
.pulsar::before {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(180,220,255,0.8);
  animation: pulsarRing 3s ease-out forwards;
}
@keyframes pulsarPulse {
  0%   { opacity: 0; transform: scale(0.5); }
  20%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.2); }
}
@keyframes pulsarRing {
  0%   { transform: scale(0.5); opacity: 0; border-width: 2px; }
  20%  { opacity: 0.8; }
  100% { transform: scale(6); opacity: 0; border-width: 1px; }
}

.stars-bg { display: none; }

/* ===== CLIQUE: RIPPLE ===== */
.btn, button:not(.ligue-select):not(.gloss-item):not(.fab-trigger) {
  position: relative;
  overflow: hidden;
}
.btn.no-ripple, button.no-ripple { overflow: visible; }
.click-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,255,0.45) 0%, rgba(0,212,255,0.15) 40%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: clickRipple 0.55s ease-out forwards;
  z-index: 1;
}
@keyframes clickRipple {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/* ===== RESPOSTA: CELEBRAÇÃO E ERRO ===== */
.celebrate-shake { animation: celebrateShake 0.5s ease-in-out; }
@keyframes celebrateShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px) rotate(-1deg); }
  40% { transform: translateX(6px) rotate(1deg); }
  60% { transform: translateX(-4px) rotate(-0.5deg); }
  80% { transform: translateX(4px) rotate(0.5deg); }
}
.celebrate-bounce { animation: celebrateBounce 0.6s cubic-bezier(0.4, 0, 0.2, 1.6); }
@keyframes celebrateBounce {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.08); }
  50%  { transform: scale(0.96); }
  75%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* Confete */
.confetti-burst {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  width: 0; height: 0;
}
.confetti-piece {
  position: absolute;
  width: 8px; height: 12px;
  border-radius: 2px;
  animation: confettiFall var(--dur, 1.4s) cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
  opacity: 0.95;
}
@keyframes confettiFall {
  0%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot, 720deg)); opacity: 0; }
}

/* Erro: flash vermelho pulsante */
.wrong-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: radial-gradient(circle at 50% 50%, rgba(231,76,60,0.25), transparent 70%);
  animation: wrongFlash 0.55s ease-out forwards;
}
@keyframes wrongFlash {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== LAYOUT ===== */
main {
  position: relative;
  z-index: 10;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.content-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  nav ul {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: rgba(5,5,16,0.95);
    backdrop-filter: blur(24px);
    flex-direction: column;
    padding: 0.5rem;
    gap: 0.15rem;
    border-bottom: 1px solid var(--border);
  }
  nav ul.open { display: flex; }
  nav ul li a { padding: 0.7rem 1rem; border-radius: var(--radius-sm); }
  .hamburger { display: flex; }

  .hero { padding: 3rem 0 2rem; }
  .hero h1 { font-size: clamp(1.8rem, 8vw, 2.5rem); }

  .cards-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .card { padding: 1.25rem 1rem; }
  .card-icon { font-size: 2rem; }

  .level-card { grid-template-columns: auto 1fr; gap: 1rem; padding: 1rem 1.25rem; }
  .level-card-arrow { display: none; }

  .stat-bar { grid-template-columns: repeat(2, 1fr); }

  .steps-grid { grid-template-columns: 1fr; }

  .promo-banner { flex-direction: column; text-align: center; gap: 1rem; padding: 1.25rem; }

  .topic-hero { padding: 2rem 1rem; }
  .facts-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  main { padding: 1rem; }
  .hero-buttons { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .cards-grid { grid-template-columns: 1fr; }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fadeInUp 0.5s var(--ease) forwards; }

.fade-in-delay-1,
.fade-in-delay-2,
.fade-in-delay-3,
.fade-in-delay-4,
.fade-in-delay-5,
.fade-in-delay-6 {
  animation: fadeInUp 0.5s var(--ease) forwards;
  opacity: 0;
}
.fade-in-delay-1 { animation-delay: 0.05s; }
.fade-in-delay-2 { animation-delay: 0.1s; }
.fade-in-delay-3 { animation-delay: 0.15s; }
.fade-in-delay-4 { animation-delay: 0.2s; }
.fade-in-delay-5 { animation-delay: 0.25s; }
.fade-in-delay-6 { animation-delay: 0.3s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  nav ul { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(6,11,30,0.95); backdrop-filter: blur(20px); flex-direction: column; padding: 0.75rem; gap: 0.25rem; border-bottom: 1px solid rgba(0,212,255,0.1); }
  nav ul.open { display: flex; }
  nav ul li a { padding: 0.75rem 1rem; border-radius: 10px; }
  .hamburger { display: flex; }
  .options-grid { grid-template-columns: 1fr; }
  .facts-row { grid-template-columns: repeat(2, 1fr); }
  .hero-planet { font-size: 4rem; }
  .hero { padding: 3rem 1rem 2rem; }
  .medals-grid { grid-template-columns: 1fr; }
  .topic-hero { padding: 2rem 1rem; }
  .cards-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .card { padding: 1.25rem 1rem; }
  .card-icon { font-size: 2.2rem; }
}

@media (max-width: 480px) {
  .nav-container { padding: 0 1rem; }
  .hero-buttons { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .cards-grid { grid-template-columns: 1fr; }
}

/* ===== ANIMAÇÕES DE ENTRADA ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeInUp 0.6s ease forwards;
}

.fade-in-delay-1,
.fade-in-delay-2,
.fade-in-delay-3,
.fade-in-delay-4,
.fade-in-delay-5,
.fade-in-delay-6 {
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
}
.fade-in-delay-1 { animation-delay: 0.1s; }
.fade-in-delay-2 { animation-delay: 0.2s; }
.fade-in-delay-3 { animation-delay: 0.3s; }
.fade-in-delay-4 { animation-delay: 0.4s; }
.fade-in-delay-5 { animation-delay: 0.5s; }
.fade-in-delay-6 { animation-delay: 0.6s; }


/* ===== UTILS ===== */
.text-center { text-align: center; }
.mb-2 { margin-bottom: 2rem; }
.mt-2 { margin-top: 2rem; }
.glow-text { text-shadow: 0 0 20px rgba(0,212,255,0.5); }