/**
 * Temas por cena — Cinematic Space Romance
 * Gradientes vivos, glow radial, atmosfera etérea
 */

.planet-bg {
  background: var(--planet-bg, #0B0F1A) !important;
}

.planet-text { color: var(--planet-text, #F9FAFB) !important; }
.planet-muted { color: var(--planet-muted, #B8B8C2) !important; }

.text-planet-muted { color: var(--planet-muted, #B8B8C2); }

/* Ornamentos */
.ornament-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--planet-muted), transparent);
  opacity: 0.3;
}

.decorative-dots {
  background-image: radial-gradient(circle at 2px 2px, currentColor 1px, transparent 0);
  background-size: 24px 24px;
  opacity: 0.06;
}

/* Splash — Abertura cinematográfica */
[data-planet="splash"] {
  --planet-bg: linear-gradient(180deg, #0B0F1A 0%, #111827 40%, #1A1F2E 100%);
  --planet-glow: rgba(124, 58, 237, 0.12);
  --planet-text: #F9FAFB;
  --planet-muted: #B8B8C2;
}

/* Universe — Espaço profundo */
[data-planet="universe"] {
  --planet-bg: linear-gradient(180deg, #0B0F1A 0%, #111827 100%);
  --planet-glow: rgba(56, 189, 248, 0.08);
  --planet-text: #F9FAFB;
  --planet-muted: #A8A8B8;
}

/* Intro Pequeno Príncipe — fundo mais escuro */
[data-planet="principe-intro"] {
  --planet-bg: linear-gradient(180deg, #08060a 0%, #0B0F1A 50%, #0a0810 100%);
  --planet-glow: rgba(124, 58, 237, 0.08);
  --planet-text: #F9FAFB;
  --planet-muted: #B8B8C2;
}

.principe-intro-bg {
  background: var(--planet-bg, #08060a) !important;
}

.principe-intro-glow {
  background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(124, 58, 237, 0.15), transparent 60%);
  pointer-events: none;
  animation: intro-glow-breathe 6s ease-in-out infinite;
}

@keyframes intro-glow-breathe {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* Intro genérico para planetas */
[data-planet="planet-intro"] {
  --planet-bg: linear-gradient(180deg, #08060a 0%, #0B0F1A 50%, #0a0810 100%);
  --planet-glow: rgba(124, 58, 237, 0.08);
  --planet-text: #F9FAFB;
  --planet-muted: #B8B8C2;
}

.planet-intro-bg {
  background: var(--planet-bg, #08060a) !important;
}

.planet-intro-glow {
  background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(124, 58, 237, 0.15), transparent 60%);
  pointer-events: none;
  animation: intro-glow-breathe 6s ease-in-out infinite;
}

/* Pequeno Príncipe — Asteroide B-612 */
[data-planet="pequeno-principe"] {
  --planet-bg: linear-gradient(180deg, #1A1510 0%, #0f0d0a 50%, #151210 100%);
  --planet-glow: rgba(251, 191, 36, 0.1);
  --planet-text: #F5E6D3;
  --planet-muted: #C4A882;
}

[data-planet="pequeno-principe"] .principe-card {
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(196, 168, 130, 0.12),
    0 0 24px rgba(251, 191, 36, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  background: linear-gradient(165deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%) !important;
}

[data-planet="pequeno-principe"] .principe-card::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(196, 168, 130, 0.1);
  border-radius: 1.25rem;
  pointer-events: none;
}

[data-planet="pequeno-principe"] .principe-quote {
  font-size: 1.5rem;
  opacity: 0.35;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

/* Cena sagrada do luar — glow vermelho quente */
.principe-luar-overlay {
  background: linear-gradient(180deg, #0B0F1A 0%, #111827 30%, #1A0A0F 60%, #0B0508 100%);
}

.principe-luar-glow {
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.08) 30%, rgba(127, 29, 29, 0.03) 60%, transparent 100%);
  animation: principe-luar-glow-pulse 4s ease-in-out infinite;
}

@keyframes principe-luar-glow-pulse {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .principe-luar-glow { animation: none; }
}

[data-planet="pequeno-principe"] .principe-moon,
[data-planet="pequeno-principe"] [data-principe-moon] {
  background: radial-gradient(circle at 30% 30%, #FCA5A5, #EF4444 40%, #7F1D1D 100%);
  box-shadow: 0 0 60px rgba(239, 68, 68, 0.4), 0 0 120px rgba(220, 38, 38, 0.2), inset -10px -10px 30px rgba(0, 0, 0, 0.2);
}

[data-planet="pequeno-principe"] .principe-card-luar {
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(20, 8, 10, 0.7);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(239, 68, 68, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

[data-planet="pequeno-principe"] .principe-card-luar p,
[data-planet="pequeno-principe"] .principe-phrase-luar {
  color: #FCA5A5 !important;
  text-shadow: 0 0 12px rgba(239, 68, 68, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Casais — Planeta do amor */
[data-planet="casais"] {
  --planet-bg: linear-gradient(180deg, #150f18 0%, #0d0a12 50%, #120e18 100%);
  --planet-glow: rgba(244, 114, 182, 0.15);
  --planet-text: #F8E8F0;
  --planet-muted: #C8A8B8;
}

[data-planet="casais"] .casais-card {
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(200, 168, 184, 0.12),
    0 0 24px rgba(244, 114, 182, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  background: linear-gradient(165deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%) !important;
}

[data-planet="casais"] .casais-card::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(200, 168, 184, 0.1);
  border-radius: 1.25rem;
  pointer-events: none;
}

[data-planet="casais"] .casais-times {
  font-family: var(--font-display, inherit);
  font-weight: 400;
  letter-spacing: 0.15em;
  opacity: 0.5;
  font-size: 0.85em;
}

[data-planet="casais"] .casais-couple-last {
  background: linear-gradient(135deg, #F8E8F0 0%, #F472B6 50%, #F8E8F0 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(244, 114, 182, 0.3)) drop-shadow(0 0 32px rgba(124, 58, 237, 0.2));
  animation: casais-last-glow 3s ease-in-out infinite;
}

@keyframes casais-last-glow {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(244, 114, 182, 0.3)) drop-shadow(0 0 32px rgba(124, 58, 237, 0.2)); }
  50% { filter: drop-shadow(0 0 24px rgba(244, 114, 182, 0.45)) drop-shadow(0 0 40px rgba(124, 58, 237, 0.3)); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-glow-breathe,
  .principe-intro-glow,
  .planet-intro-glow { animation: none; }
}

/* LightTravel */
[data-planet="light-travel"] {
  --planet-bg: linear-gradient(180deg, #050508 0%, #0a0a12 100%);
  --planet-glow: rgba(56, 189, 248, 0.12);
  --planet-text: #F9FAFB;
  --planet-muted: #A8A8B8;
}

/* NameReveal — Planeta dourado */
[data-planet="name-reveal"] {
  --planet-bg: linear-gradient(180deg, #141008 0%, #0c0a06 50%, #100d08 100%);
  --planet-glow: rgba(251, 191, 36, 0.15);
  --planet-text: #FAF5EB;
  --planet-muted: #D4C4A8;
}

/* Elephant */
[data-planet="elephant"] {
  --planet-bg: linear-gradient(180deg, #080a08 0%, #050705 100%);
  --planet-glow: rgba(56, 189, 248, 0.06);
  --planet-text: #E8F0E8;
  --planet-muted: #A8B8A8;
}

/* Vignettes */
[data-planet="vignettes"] {
  --planet-bg: linear-gradient(180deg, #0e0c12 0%, #0a0810 100%);
  --planet-glow: rgba(124, 58, 237, 0.1);
  --planet-text: #F2EEF2;
  --planet-muted: #B8A8B8;
}

[data-planet="vignettes"] .vignette-card {
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(184, 168, 184, 0.12),
    0 0 24px rgba(124, 58, 237, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  background: linear-gradient(165deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%) !important;
}

[data-planet="vignettes"] .vignette-card::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(184, 168, 184, 0.08);
  border-radius: 1.25rem;
  pointer-events: none;
}

[data-planet="vignettes"] .vignette-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
}

[data-planet="vignettes"] .vignette-slide-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  font-size: 0.65rem;
  opacity: 0.45;
  text-align: center;
}

[data-planet="vignettes"] .vignette-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
}

[data-planet="vignettes"] .vignette-icon-wrap::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(184, 168, 184, 0.2);
  background: radial-gradient(circle, rgba(124, 58, 237, 0.06) 0%, transparent 70%);
}

[data-planet="vignettes"] [data-vignette-icon] i {
  filter: drop-shadow(0 0 12px rgba(124, 58, 237, 0.25));
  transition: filter 0.3s ease;
}

[data-planet="vignettes"] .vignette-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(184, 168, 184, 0.25) 20%, rgba(184, 168, 184, 0.4) 50%, rgba(184, 168, 184, 0.25) 80%, transparent 100%);
  margin: 0 auto;
}

[data-planet="vignettes"] .vignette-dot {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Momento especial do emoji ✨ */
.vignette-emoji-wrap {
  display: inline-block;
  position: relative;
}

.vignette-emoji-special {
  display: inline-block;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5)) drop-shadow(0 0 16px rgba(251, 191, 36, 0.3));
  animation: vignette-emoji-glow 2.5s ease-in-out infinite;
}

@keyframes vignette-emoji-glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5)) drop-shadow(0 0 16px rgba(251, 191, 36, 0.3)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.7)) drop-shadow(0 0 24px rgba(251, 191, 36, 0.4)); transform: scale(1.05); }
}

.vignette-emoji-particle {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  font-size: 0.5em;
  color: #FBBF24;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .vignette-emoji-special { animation: none; }
}

/* Memories */
[data-planet="memories"] {
  --planet-bg: linear-gradient(180deg, #0B0F1A 0%, #111827 100%);
  --planet-glow: rgba(124, 58, 237, 0.08);
  --planet-text: #F9FAFB;
  --planet-muted: #B8B8C2;
}

/* Final — Bloom dourado, catarse */
[data-planet="final"] {
  --planet-bg: linear-gradient(180deg, #0f0a0d 0%, #0a0709 50%, #0d080b 100%);
  --planet-glow: rgba(251, 191, 36, 0.15);
  --planet-text: #FAF5EB;
  --planet-muted: #D4C4A8;
}

/* Video */
[data-planet="video"] {
  --planet-bg: linear-gradient(180deg, #0a0508 0%, #080508 50%, #0d080a 100%);
  --planet-glow: rgba(244, 114, 182, 0.12);
  --planet-text: #F8E8EC;
  --planet-muted: #C8A8B0;
}

/* Luar — Cena sagrada, glow vermelho */
[data-planet="luar"] {
  --planet-bg: linear-gradient(180deg, #0B0F1A 0%, #111827 25%, #1A0A0F 50%, #0B0508 100%);
  --planet-glow: rgba(239, 68, 68, 0.15);
  --planet-text: #FCA5A5;
  --planet-muted: #D4A8A8;
}

.luar-bg {
  background: linear-gradient(180deg, #0B0F1A 0%, #111827 25%, #1A0A0F 50%, #0B0508 100%) !important;
}

.luar-stars {
  background-image: radial-gradient(circle at 2px 2px, rgba(252,165,165,0.5) 1px, transparent 0);
  background-size: 36px 36px;
  opacity: 0.03;
}

.luar-glow {
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.08) 30%, rgba(127, 29, 29, 0.03) 60%, transparent 100%);
  animation: principe-luar-glow-pulse 4s ease-in-out infinite;
  pointer-events: none;
}

.luar-moon {
  background: radial-gradient(circle at 30% 30%, #FCA5A5, #EF4444 40%, #7F1D1D 100%);
  box-shadow: 0 0 60px rgba(239, 68, 68, 0.4), 0 0 120px rgba(220, 38, 38, 0.2), inset -10px -10px 30px rgba(0, 0, 0, 0.2);
}

.luar-card {
  border: 1px solid rgba(239, 68, 68, 0.15);
  background: rgba(20, 8, 10, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(239, 68, 68, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.luar-phrase {
  color: #FCA5A5 !important;
  text-shadow: 0 0 12px rgba(239, 68, 68, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5);
}

.luar-hint-text {
  color: #FCA5A5;
}

/* Pandora — Avatar bioluminescente */
[data-planet="pandora"] {
  --planet-bg: linear-gradient(180deg, #001428 0%, #002040 30%, #001830 60%, #000a18 100%);
  --planet-glow: rgba(56, 189, 248, 0.15);
  --planet-text: #7DD3FC;
  --planet-muted: #38BDF8;
}

.pandora-bg {
  background: linear-gradient(180deg, #001428 0%, #002040 30%, #001830 60%, #000a18 100%) !important;
}

.pandora-glow {
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0, 120, 255, 0.12), rgba(56, 189, 248, 0.06) 40%, transparent 70%);
  pointer-events: none;
  animation: pandora-glow-pulse 4s ease-in-out infinite;
}

.pandora-stars {
  background-image: radial-gradient(circle at 2px 2px, rgba(100, 200, 255, 0.6) 1px, transparent 0);
  background-size: 40px 40px;
  opacity: 0.03;
  animation: pandora-stars-twinkle 6s ease-in-out infinite;
}

.pandora-title {
  font-size: clamp(2.5rem, 12vw, 4.5rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #7DD3FC;
  text-shadow:
    0 0 40px rgba(56, 189, 248, 0.5),
    0 0 80px rgba(56, 189, 248, 0.3),
    0 0 120px rgba(0, 100, 255, 0.2);
  animation: pandora-text-glow 3s ease-in-out infinite;
}

@keyframes pandora-glow-pulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}

@keyframes pandora-stars-twinkle {
  0%, 100% { opacity: 0.03; }
  50% { opacity: 0.06; }
}

@keyframes pandora-text-glow {
  0%, 100% {
    text-shadow: 0 0 40px rgba(56, 189, 248, 0.5), 0 0 80px rgba(56, 189, 248, 0.3), 0 0 120px rgba(0, 100, 255, 0.2);
  }
  50% {
    text-shadow: 0 0 60px rgba(56, 189, 248, 0.7), 0 0 100px rgba(56, 189, 248, 0.4), 0 0 160px rgba(0, 100, 255, 0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pandora-glow,
  .pandora-title,
  .pandora-stars { animation: none; }
}

/* Elephant — fundo decorado, fill cinza, animação de fundo */
.elephant-animated-bg {
  background:
    linear-gradient(165deg, #0a0c0a 0%, #060806 25%, #080a08 50%, #050705 75%, #070907 100%) !important;
  background-size: 100% 100%;
}

/* Padrão sutil de pontos no fundo */
.elephant-bg-mesh {
  background-image: radial-gradient(circle at 1px 1px, rgba(168, 184, 168, 0.06) 1px, transparent 0);
  background-size: 28px 28px;
  animation: elephant-mesh-shift 20s linear infinite;
}

/* Gradiente que “flutua” para animação de fundo */
.elephant-bg-drift {
  background: linear-gradient(
    135deg,
    rgba(100, 110, 100, 0.06) 0%,
    transparent 25%,
    rgba(80, 90, 85, 0.05) 50%,
    transparent 75%,
    rgba(90, 100, 95, 0.04) 100%
  );
  background-size: 200% 200%;
  animation: elephant-drift 12s ease-in-out infinite;
}

.elephant-ambient-glow {
  background: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(168, 184, 168, 0.09) 0%, rgba(80, 90, 80, 0.05) 45%, transparent 70%);
  animation: elephant-ambient-pulse 5s ease-in-out infinite;
}

/* Gradiente de preenchimento em cinza */
.elephant-fill-gradient {
  background: linear-gradient(
    0deg,
    rgba(75, 80, 85, 0.5) 0%,
    rgba(90, 95, 100, 0.28) 25%,
    rgba(100, 105, 110, 0.15) 55%,
    rgba(110, 115, 120, 0.06) 80%,
    transparent 100%
  );
  backdrop-filter: blur(3px);
}

@keyframes elephant-mesh-shift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(28px, 28px); }
}

@keyframes elephant-drift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes elephant-ambient-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1.15; }
}

@media (prefers-reduced-motion: reduce) {
  .elephant-ambient-glow,
  .elephant-bg-mesh,
  .elephant-bg-drift { animation: none; }
}