/* ============================================================================
   theme.css — DIRETOR VISUAL 3D
   Look premium: tokens, paleta marciana, tipografia, glassmorphism, glow.
   (Layout estrutural fica em base.css — aqui só estética e estados.)
   ========================================================================== */

:root {
  /* espaço profundo */
  --bg-deep: #050208;
  --bg-soft: #0c0614;

  /* Marte: rust / ember / glow */
  --rust: #c1440e;
  --ember: #e07b39;
  --glow: #ff8c5a;
  --sand: #ffd9c0;

  /* texto (contraste AA sobre --bg-deep) */
  --text: #f3ede7;
  --text-2: rgba(243, 237, 231, 0.78);
  --text-3: rgba(243, 237, 231, 0.65);

  /* vidro e linhas */
  --glass: rgba(24, 14, 20, 0.38);
  --glass-hover: rgba(34, 18, 22, 0.5);
  --glass-border: rgba(255, 255, 255, 0.09);
  --line-accent: rgba(255, 140, 90, 0.28);

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

html { color-scheme: dark; }

body {
  background-color: var(--bg-deep);
  color: var(--text);
}

::selection {
  background: var(--rust);
  color: #fff7f2;
}

/* ------------------------------- Tipografia ------------------------------ */

.kicker {
  color: var(--ember);
  font-family: var(--font-body);
  font-weight: 600;
}
.kicker::before {
  content: '';
  display: inline-block;
  width: 2.2rem;
  height: 1px;
  vertical-align: middle;
  margin-right: 0.75rem;
  background: linear-gradient(90deg, var(--ember), transparent);
}

.slide-title {
  color: #ffffff;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-shadow: 0 0 60px rgba(193, 68, 14, 0.25);
}

/* hero: gradient text branco → areia → glow marciano */
.slide-hero .slide-title {
  color: var(--glow); /* fallback sem background-clip */
  background: linear-gradient(115deg, #ffffff 30%, var(--sand) 55%, var(--glow) 82%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lead { color: var(--text-2); }

.body-par { color: var(--text-3); }

/* ------------------------- Stats (glassmorphism) ------------------------- */

.stat {
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.35);
  transition:
    border-color 0.35s ease,
    background-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
}
.stat:hover {
  border-color: rgba(224, 123, 57, 0.45);
  background: var(--glass-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 28px rgba(224, 123, 57, 0.22);
  transform: translateY(-2px);
}

.stat-value {
  color: var(--sand);
  text-shadow: 0 0 18px rgba(255, 140, 90, 0.35);
}
.stat-unit {
  color: var(--ember);
  font-family: var(--font-body);
  font-weight: 400;
}
.stat-label { color: var(--text-3); }

/* ------------------------------- Fact card ------------------------------- */

.fact-card {
  color: var(--text-2);
  background: linear-gradient(
    135deg,
    rgba(193, 68, 14, 0.14),
    rgba(193, 68, 14, 0.05) 60%,
    rgba(255, 255, 255, 0.02)
  );
  border: 1px solid rgba(224, 123, 57, 0.18);
  border-left: 3px solid var(--ember);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* -------------------------------- Nav dots ------------------------------- */

.nav-dot {
  background: rgba(243, 237, 231, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}
.nav-dot:hover {
  background: rgba(255, 140, 90, 0.55);
}
.nav-dot.active {
  background: var(--ember);
  transform: scale(1.45);
  box-shadow:
    0 0 14px rgba(224, 123, 57, 0.75),
    0 0 30px rgba(193, 68, 14, 0.4);
}
.nav-dot:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
}

/* ----------------------------- Progress bar ------------------------------ */

#progress-bar {
  background: linear-gradient(90deg, var(--rust), var(--ember) 55%, var(--glow));
  box-shadow: 0 0 12px rgba(224, 123, 57, 0.55);
}

/* --------------------------------- Loader -------------------------------- */

#loader {
  color: var(--text-3);
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.loader-orb {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #ff9d66, var(--rust) 58%, #3a1206 100%);
  box-shadow:
    0 0 40px rgba(224, 123, 57, 0.5),
    0 0 90px rgba(193, 68, 14, 0.3),
    inset -8px -10px 22px rgba(0, 0, 0, 0.55);
  animation: orb-pulse 2.2s ease-in-out infinite;
}
@keyframes orb-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 40px rgba(224, 123, 57, 0.5),
      0 0 90px rgba(193, 68, 14, 0.3),
      inset -8px -10px 22px rgba(0, 0, 0, 0.55);
  }
  50% {
    transform: scale(1.08);
    box-shadow:
      0 0 60px rgba(224, 123, 57, 0.75),
      0 0 120px rgba(193, 68, 14, 0.45),
      inset -8px -10px 22px rgba(0, 0, 0, 0.55);
  }
}

/* ------------------------------- Scroll hint ----------------------------- */

.scroll-hint { color: var(--text-3); }

.scroll-hint span {
  display: block;
  width: 1px;
  height: 2.2rem;
  background: linear-gradient(180deg, var(--glow), rgba(255, 140, 90, 0));
  transform-origin: top center;
  animation: hint-pulse 2s ease-in-out infinite;
}
@keyframes hint-pulse {
  0%, 100% { transform: scaleY(0.4); opacity: 0.35; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* --------------------------- Fallback sem WebGL --------------------------- */

body.no-webgl {
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(1px 1px at 22% 28%, rgba(255, 255, 255, 0.5), transparent 100%),
    radial-gradient(1px 1px at 68% 64%, rgba(255, 255, 255, 0.35), transparent 100%),
    radial-gradient(1.5px 1.5px at 84% 18%, rgba(255, 217, 192, 0.45), transparent 100%),
    radial-gradient(60rem 40rem at 75% 20%, rgba(193, 68, 14, 0.22), transparent 65%),
    radial-gradient(50rem 50rem at 15% 85%, rgba(80, 40, 120, 0.18), transparent 60%),
    radial-gradient(90rem 60rem at 50% 50%, var(--bg-soft), var(--bg-deep) 75%);
  background-size:
    260px 260px,
    340px 340px,
    420px 420px,
    100% 100%,
    100% 100%,
    100% 100%;
  background-attachment: fixed;
}

/* ----------------------------- Reduced motion ---------------------------- */

@media (prefers-reduced-motion: reduce) {
  .loader-orb,
  .scroll-hint span {
    animation: none;
  }
  .stat,
  .nav-dot {
    transition-duration: 0.01s;
  }
}