/*
 * DEAREST — Tema: Eternal
 * Inspiração: editorial italiano, Valentino AW, veludo e ouro.
 * Atmosfera: noite profunda, rosas douradas, cheiro de perfume caro.
 *
 * Animações canvas (particles.js):
 *   - pétalas de rosa caindo em parallax lento
 *   - corações dourados flutuando
 * Ornamentos CSS:
 *   - rosas fine-line em pseudoelementos posicionados absolutamente
 *   - borda com degradê dourado nas seções
 */

[data-theme="eternal"] {
  --theme-bg:     linear-gradient(160deg, #0C0A0F 0%, #1A0D14 50%, #0C0A0F 100%);
  --theme-card:   rgba(26, 13, 20, 0.92);
  --theme-accent: #D4AF37;
  --theme-text:   #FAF7F2;
  --theme-sub:    #B76E79;
  --theme-orb1:   rgba(196, 30, 58, 0.28);
  --theme-orb2:   rgba(183, 110, 121, 0.18);
  --theme-border: rgba(212, 175, 55, 0.15);
}

/* ─── Background e orbs ────────────────────────────── */

[data-theme="eternal"] .page-root,
[data-theme="eternal"] .wizard-root {
  background: var(--theme-bg);
}

[data-theme="eternal"] .orb-primary {
  background: radial-gradient(circle, rgba(196, 30, 58, 0.30) 0%, transparent 70%);
  top: -150px;
  right: -100px;
}

[data-theme="eternal"] .orb-secondary {
  background: radial-gradient(circle, rgba(183, 110, 121, 0.22) 0%, transparent 70%);
  bottom: -100px;
  left: -80px;
}

/* orb terciário — calor âmbar no centro */
[data-theme="eternal"] .orb-tertiary {
  position: absolute;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(60px);
  pointer-events: none;
  animation: orb-drift calc(var(--dur-breath) * 1.3) var(--ease-drift) infinite alternate;
}

/* ─── Tipografia específica ────────────────────────── */

[data-theme="eternal"] .page-names-to {
  background: linear-gradient(
    135deg,
    var(--ivory)      0%,
    var(--champagne)  40%,
    var(--rose-gold)  70%,
    var(--champagne)  100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 8s linear infinite;
}

[data-theme="eternal"] .section-eyebrow {
  color: var(--gold);
}

[data-theme="eternal"] .message-quote-mark {
  color: var(--crimson);
}

/* ─── Cards e superfícies ──────────────────────────── */

[data-theme="eternal"] .glass-card,
[data-theme="eternal"] .envelope,
[data-theme="eternal"] .quiz-card {
  background: rgba(26, 13, 20, 0.88);
  border-color: rgba(212, 175, 55, 0.15);
  box-shadow: var(--shadow-lg),
              inset 0 1px 0 rgba(212, 175, 55, 0.08),
              0 0 40px rgba(196, 30, 58, 0.08);
}

/* ─── Input — foco rose ────────────────────────────── */

[data-theme="eternal"] .input-field:focus {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.06);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}

/* ─── Timeline dot ─────────────────────────────────── */

[data-theme="eternal"] .timeline-dot {
  background: var(--gold);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.55);
  border-color: #1A0D14;
}

[data-theme="eternal"] .timeline::before {
  background: linear-gradient(to bottom, var(--gold), var(--rose-gold), transparent);
}

/* ─── Ornamento — canto superior direito ──────────── */

[data-theme="eternal"] .page-root::before {
  content: '';
  position: fixed;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  background:
    radial-gradient(ellipse 55% 55% at 40% 60%, rgba(212,175,55,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 60% 40%, rgba(196,30,58,0.07) 0%, transparent 70%);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}

/* Ornamento — canto inferior esquerdo */
[data-theme="eternal"] .page-root::after {
  content: '';
  position: fixed;
  bottom: -60px;
  left: -60px;
  width: 200px;
  height: 200px;
  background:
    radial-gradient(ellipse 55% 55% at 60% 40%, rgba(212,175,55,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 40% 60%, rgba(183,110,121,0.08) 0%, transparent 70%);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}

/* ─── Borda dourada nas seções ─────────────────────── */

[data-theme="eternal"] .envelope-section::before,
[data-theme="eternal"] .timeline-section::before {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--rose-gold));
  margin-bottom: var(--space-4);
  border-radius: var(--radius-full);
}

/* ─── Foto — moldura dourada ───────────────────────── */

[data-theme="eternal"] .page-photo {
  border-color: rgba(212, 175, 55, 0.30);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.15),
              var(--shadow-lg);
}

/* ─── Botões ───────────────────────────────────────── */

[data-theme="eternal"] .btn-cta {
  background: linear-gradient(135deg, #E8394D, #8B0A24);
  box-shadow: 0 8px 32px rgba(232, 57, 93, 0.45),
              0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="eternal"] .btn-cta:hover {
  background: linear-gradient(135deg, #C4213A, #6B0818);
  box-shadow: 0 16px 48px rgba(232, 57, 93, 0.65),
              0 4px 16px rgba(0, 0, 0, 0.4);
}

[data-theme="eternal"] .btn-cta:focus-visible {
  outline-color: var(--hot-rose-light);
}

[data-theme="eternal"] .btn-primary {
  background: var(--grad-rose);
  box-shadow: 0 4px 20px rgba(255, 77, 122, 0.40);
}

[data-theme="eternal"] .btn-primary:hover {
  box-shadow: 0 12px 32px rgba(255, 77, 122, 0.55);
}

[data-theme="eternal"] .btn-ghost {
  border-color: rgba(212, 175, 55, 0.30);
  color: rgba(250, 247, 242, 0.70);
}

[data-theme="eternal"] .btn-ghost:hover,
[data-theme="eternal"] .btn-ghost:focus-visible {
  border-color: rgba(212, 175, 55, 0.55);
  background: rgba(212, 175, 55, 0.07);
  color: var(--gold);
}

/* ─── Seletor de tema no wizard ────────────────────── */

[data-theme="eternal"] .theme-card.is-selected,
.theme-card[data-theme-preview="eternal"].is-selected {
  border-color: var(--hot-rose);
  box-shadow: 0 0 0 1px rgba(255,77,122,0.20), 0 0 32px rgba(255,77,122,0.30), 0 0 64px rgba(255,77,122,0.15);
}

/* ─── Scrollbar tema ───────────────────────────────── */

[data-theme="eternal"] ::-webkit-scrollbar-track {
  background: #120A10;
}

[data-theme="eternal"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8B0A24, var(--gold));
}

/* ─── Reduced motion ───────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-theme="eternal"] .page-names-to {
    animation: none !important;
    background: var(--champagne) !important;
    -webkit-text-fill-color: var(--champagne) !important;
  }

  [data-theme="eternal"] .orb-tertiary {
    animation: none !important;
  }
}