/* ==========================================
   CONFIGURAÇÃO BASE & DESIGN SYSTEM
   ========================================== */
:root {
    color-scheme: light;
    /* Paleta de Cores baseada nas imagens de referência */
    --color-bg: #ECC5C1;          /* Fundo Rosa Pálido / Rosa Antigo */
    --color-bg-alt: #F7E4E2;      /* Rosa ainda mais claro para contraste */
    --color-brand: #43050B;       /* Vinho Profundo / Borgonha */
    --color-brand-light: #5E111A;
    --color-brand-glow: #8B1F2D;
    
    --color-text: #1C0507;        /* Chumbo quase preto com tom de vinho */
    --color-text-muted: #574143;  /* Texto secundário */
    
    --color-gold: #B89248;        /* Dourado para detalhes e ícones místicos */
    --color-gold-light: #D4B46F;
    --color-white: #FFFFFF;
    
    /* Efeitos e Sombras */
    --shadow-soft: 0 4px 20px rgba(67, 5, 11, 0.06);
    --shadow-medium: 0 10px 30px rgba(67, 5, 11, 0.12);
    --shadow-glow: 0 0 20px rgba(184, 146, 72, 0.3);
    
    /* Variáveis do Tema Claro */
    --color-header-bg: rgba(236, 197, 193, 0.95);
    --color-header-border: rgba(67, 5, 11, 0.1);
    --color-footer-bg: var(--color-brand);
    --color-footer-text: var(--color-bg);
    --color-footer-border: rgba(236, 197, 193, 0.45);
    --color-footer-border-light: rgba(236, 197, 193, 0.1);
    --color-footer-bg-btn: rgba(236, 197, 193, 0.08);
    --shadow-footer-btn: 0 4px 12px rgba(0, 0, 0, 0.12);
    --color-btn-secondary-hover: rgba(67, 5, 11, 0.05);
    --color-theme-toggle-hover: rgba(67, 5, 11, 0.05);
    
    /* Fontes */
    --font-title: 'Cinzel', serif;
    --font-body: 'Cormorant Garamond', serif;
    --font-sans: 'Montserrat', sans-serif;
    
    /* Transições */
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* Embaralhamento */
    --shuffle-dist: 180px;

    /* Dimensões da Carta 3D */
    --card-w: 140px;
    --card-h: 215px;
}

html[data-theme="dark"] {
    color-scheme: dark;
    
    /* Fundo chumbo/carvão escuro com tom sutil de vinho, evitando o preto puro */
    --color-bg: #130c0e;          
    --color-bg-alt: #1e1315;      /* Elevated layer for containers/cards */
    
    /* Tons dessaturados de vinho e rosa pastel para evitar vibração em fundo escuro */
    --color-brand: #d68f97;       
    --color-brand-light: #e5a7ae;
    --color-brand-glow: #f0bdc2;
    
    /* Contraste adequado para leitura */
    --color-text: #f4e6e7;        
    --color-text-muted: #bda7aa;  
    
    /* Dourado dessaturado/pastel */
    --color-gold: #cca662;        
    --color-gold-light: #dfc18b;
    --color-white: #271a1c;       /* Caixas que eram brancas ficam mais elevadas e claras que o fundo */
    
    /* Sombras atenuadas no tema escuro */
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 20px rgba(184, 146, 72, 0.15);
    
    /* Variáveis do Tema Escuro */
    --color-header-bg: rgba(30, 19, 21, 0.95);
    --color-header-border: rgba(255, 255, 255, 0.08);
    --color-footer-bg: #1a0f11;
    --color-footer-text: var(--color-text);
    --color-footer-border: rgba(244, 230, 231, 0.4);
    --color-footer-border-light: rgba(244, 230, 231, 0.1);
    --color-footer-bg-btn: rgba(255, 255, 255, 0.03);
    --shadow-footer-btn: 0 4px 15px rgba(0, 0, 0, 0.4);
    --color-btn-secondary-hover: rgba(214, 143, 151, 0.08);
    --color-theme-toggle-hover: rgba(255, 255, 255, 0.05);
}

/* Elementos de frente de cartas e pergaminhos escurecidos no tema escuro */
html[data-theme="dark"] .daily-card-front,
html[data-theme="dark"] .card-3d-front {
    background-color: var(--color-white);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    background-image: radial-gradient(rgba(184, 146, 72, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* ==========================================
   TIPOGRAFIA & TÍTULOS
   ========================================== */
h1, h2, h3, h4 {
    font-family: var(--font-title);
    font-weight: 600;
    letter-spacing: 1px;
}

p {
    font-size: 1.15rem;
}

strong {
    color: var(--color-brand);
    font-weight: 600;
}

/* ==========================================
   ELEMENTOS DECORATIVOS & CABEÇALHO
   ========================================== */
.moon-decoration-top {
    text-align: center;
    padding: 1rem 0 0.5rem 0;
    font-family: var(--font-title);
    color: var(--color-brand);
    font-size: 1.1rem;
    letter-spacing: 3px;
    opacity: 0.8;
}

.moon-decoration-top .moon-full {
    color: var(--color-gold);
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 8%;
    border-bottom: 1px solid var(--color-header-border);
    background-color: var(--color-header-bg);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.header .logo {
    font-family: var(--font-title);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-brand);
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.logo-icon {
    color: var(--color-gold);
    font-size: 1.4rem;
    animation: rotateLogoIcon 4s infinite alternate ease-in-out;
}

@keyframes rotateLogoIcon {
    0% { transform: scale(1) rotate(-15deg); opacity: 0.85; }
    100% { transform: scale(1.1) rotate(15deg); opacity: 1; }
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav {
    display: flex;
    gap: 2.5rem;
}

.nav a {
    text-decoration: none;
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition-smooth);
    position: relative;
    padding-bottom: 4px;
}

.nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--color-brand);
    transition: var(--transition-smooth);
}

.nav a:hover {
    color: var(--color-brand);
}

.nav a:hover::after {
    width: 100%;
}

/* Botão de Alternar Tema */
.theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--color-header-border);
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand);
    font-size: 1.1rem;
    transition: var(--transition-smooth);
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

.theme-toggle-btn:hover {
    background-color: var(--color-theme-toggle-hover);
    border-color: var(--color-brand);
    transform: scale(1.05);
}

.theme-toggle-btn .icon-sun {
    display: none;
}
.theme-toggle-btn .icon-moon {
    display: block;
}

html[data-theme="dark"] .theme-toggle-btn .icon-sun {
    display: block;
}
html[data-theme="dark"] .theme-toggle-btn .icon-moon {
    display: none;
}

/* ==========================================
   BOTÕES
   ========================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.9rem 2rem;
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition-smooth);
    border: none;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background-color: var(--color-brand);
    color: var(--color-bg);
    box-shadow: 0 4px 15px rgba(67, 5, 11, 0.2);
}

/* Brilho Shimmer nos Botões */
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: all 0.6s ease;
}

.btn-primary:hover::after {
    left: 100%;
}

.btn-primary:hover {
    background-color: var(--color-brand-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(67, 5, 11, 0.35), 0 0 12px rgba(184, 146, 72, 0.25);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-brand);
    border: 1px solid var(--color-brand);
}

.btn-secondary:hover {
    background-color: rgba(67, 5, 11, 0.05);
    transform: translateY(-2px);
}

/* ==========================================
   SEÇÃO HERO & APRESENTAÇÃO (BIO)
   ========================================== */
.hero-section {
    padding: 5rem 8%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 120px);
    position: relative;
    overflow: hidden;
}

.hero-container {
    max-width: 1200px;
    display: flex;
    align-items: center;
    gap: 5rem;
}

.hero-image-wrapper {
    position: relative;
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(30px);
    /* Transição de saída (quando perde a classe .revealed) */
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0s;
}

.hero-image-wrapper:hover {
    transform: translateY(-5px);
}

/* Transição de entrada da imagem na bio */
.hero-section.revealed .hero-image-wrapper {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0.1s;
}

/* Transição rápida para interações de hover após revelada */
.hero-section.revealed .hero-image-wrapper:hover {
    transform: translateY(-5px);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-delay: 0s;
}

.hero-image-wrapper:hover .profile-img {
    box-shadow: 0 0 35px rgba(184, 146, 72, 0.6), var(--shadow-medium);
    border-color: var(--color-gold);
}

.profile-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(184, 146, 72, 0.45) 0%, rgba(67, 5, 11, 0.25) 45%, transparent 70%);
    z-index: 1;
    pointer-events: none;
    animation: rotateAndPulseGlow 6s infinite ease-in-out;
    filter: blur(8px);
}

/* Partículas Cósmicas orbitando a imagem de perfil */
.mystic-particles {
    position: absolute;
    inset: -40px;
    z-index: 1;
    pointer-events: none;
}

.particle {
    position: absolute;
    color: var(--color-brand);
    font-size: 0.6rem;
    opacity: 0.5;
    animation: floatParticle 6s infinite ease-in-out;
}

/* Distribuição e velocidade de flutuação das partículas ao redor da foto */
.particle.p1 { top: 15%; left: 8%; animation-duration: 5.5s; animation-delay: 0s; font-size: 0.95rem; color: var(--color-gold); }
.particle.p2 { top: 22%; left: 82%; animation-duration: 7s; animation-delay: 1.2s; font-size: 0.5rem; color: var(--color-text-muted); }
.particle.p3 { top: 78%; left: 12%; animation-duration: 6.2s; animation-delay: 0.5s; font-size: 0.75rem; color: var(--color-gold); }
.particle.p4 { top: 82%; left: 88%; animation-duration: 8.5s; animation-delay: 2.2s; font-size: 0.45rem; color: var(--color-text-muted); }
.particle.p5 { top: 8%; left: 52%; animation-duration: 4.8s; animation-delay: 1.6s; font-size: 0.8rem; color: var(--color-gold); }
.particle.p6 { top: 92%; left: 42%; animation-duration: 6.8s; animation-delay: 0.9s; font-size: 0.55rem; color: var(--color-text-muted); }
.particle.p7 { top: 48%; left: 4%; animation-duration: 5.8s; animation-delay: 2.4s; font-size: 0.85rem; color: var(--color-gold); }
.particle.p8 { top: 54%; left: 94%; animation-duration: 7.8s; animation-delay: 1.4s; font-size: 0.5rem; color: var(--color-text-muted); }
.particle.p9 { top: 38%; left: 90%; animation-duration: 6.5s; animation-delay: 0.3s; font-size: 0.45rem; color: var(--color-text-muted); }
.particle.p10 { top: 62%; left: 6%; animation-duration: 7.2s; animation-delay: 1.8s; font-size: 0.7rem; color: var(--color-gold); }

@keyframes floatParticle {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.2;
    }
    50% {
        transform: translateY(-12px) translateX(8px) scale(1.15);
        opacity: 0.75;
    }
}

.profile-img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 50%; /* Imagem arredondada exigida */
    border: 4px solid var(--color-brand);
    box-shadow: var(--shadow-medium);
    position: relative;
    z-index: 2;
    transition: var(--transition-smooth);
}

.hero-section.revealed .profile-img {
    animation: profileRevealGlow 2.5s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes profileRevealGlow {
    0% {
        box-shadow: var(--shadow-medium);
        border-color: var(--color-brand);
        transform: scale(0.95);
    }
    40% {
        box-shadow: 0 0 45px rgba(184, 146, 72, 0.95), 0 0 20px rgba(184, 146, 72, 0.4), var(--shadow-medium);
        border-color: var(--color-gold);
        transform: scale(1.04);
    }
    100% {
        box-shadow: var(--shadow-medium);
        border-color: var(--color-brand);
        transform: scale(1);
    }
}

.hero-content {
    flex-grow: 1;
    z-index: 2;
    opacity: 0;
    transform: translateY(30px);
    /* Transição de saída (quando perde a classe .revealed) */
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0s;
}

/* Transição de entrada do conteúdo de texto na bio */
.hero-section.revealed .hero-content {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0.3s;
}

.hero-content h1 {
    font-size: 3.2rem;
    color: var(--color-brand);
    margin-bottom: 0.3rem;
    line-height: 1.1;
}

.hero-content h2 {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-gold);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 2rem;
}

.hero-content .bio-text {
    font-size: 1.35rem;
    color: var(--color-text-muted);
    margin-bottom: 2.5rem;
    max-width: 650px;
}

.hero-buttons {
    display: flex;
    gap: 1.5rem;
}

@keyframes rotateAndPulseGlow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0.96) rotate(0deg);
        opacity: 0.7;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05) rotate(180deg);
        opacity: 1;
    }
}

/* ==========================================
   DIVISOR MÍSTICO
   ========================================== */
.mystic-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 2rem 8%;
    color: var(--color-brand);
    opacity: 0.6;
}

.mystic-divider .divider-line {
    width: 150px;
    height: 12px;
}

.mystic-divider .star-icon {
    font-size: 1.2rem;
    color: var(--color-gold);
    display: inline-block;
    animation: rotateStar3D 4s infinite alternate ease-in-out, starBlink 2.5s infinite alternate ease-in-out;
}

@keyframes rotateStar3D {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(180deg); }
}

@keyframes starBlink {
    0% { opacity: 0.45; }
    100% { opacity: 1; }
}

/* ==========================================
   TÍTULOS DE SEÇÕES
   ========================================== */
.section-title-wrapper {
    text-align: center;
    margin-bottom: 3.5rem;
    padding: 0 8%;
}

.section-title {
    font-size: 2.5rem;
    color: var(--color-brand);
    margin-bottom: 0.8rem;
    position: relative;
    display: inline-block;
}

.section-subtitle {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* ==========================================
   SEÇÃO PERGUNTAS (PREÇOS RÁPIDOS)
   ========================================== */
.pricing-section {
    padding: 4rem 8%;
    position: relative;
    overflow: hidden;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.price-card {
    background-color: var(--color-bg-alt);
    border: 1px solid rgba(67, 5, 11, 0.1);
    border-radius: 20px;
    padding: 3rem 2rem;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), 
                opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), 
                background-color 0.3s ease, 
                border-color 0.3s ease, 
                box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-shadow: var(--shadow-soft);
    opacity: 0;
    transform: translateX(-40px); /* Da esquerda para a direita no PC */
}

.price-card.reveal-visible {
    opacity: 1;
    transform: translateX(0);
}

.price-card.reveal-visible:hover {
    transform: translateY(-8px);
}

.price-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-medium), 0 0 15px rgba(184, 146, 72, 0.18);
    border-color: rgba(184, 146, 72, 0.45);
}

.card-mystic-icon {
    color: var(--color-gold);
    margin-bottom: 1.5rem;
}

.price-card h3 {
    font-size: 1.4rem;
    color: var(--color-brand);
    margin-bottom: 1rem;
    min-height: 2.8rem;
    display: flex;
    align-items: center;
}

.price-card .card-desc {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.price-card .price {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-brand);
    margin-bottom: 2rem;
    position: relative;
}

.btn-card {
    background-color: transparent;
    border: 1px solid var(--color-brand);
    color: var(--color-brand);
    width: 100%;
    padding: 0.8rem 1.5rem;
    border-radius: 30px;
    font-size: 0.85rem;
}

.btn-card:hover {
    background-color: var(--color-brand);
    color: var(--color-bg);
}

.price-card.special-card {
    border: 2px solid var(--color-brand);
    background-color: rgba(255, 255, 255, 0.4);
}

html[data-theme="dark"] .price-card.special-card {
    background-color: var(--color-white);
}

.price-card.special-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    border: 2px solid var(--color-gold);
    pointer-events: none;
    opacity: 0.5;
}

.card-badge {
    position: absolute;
    top: -15px;
    background-color: var(--color-gold);
    color: #43050B; /* Vinho escuro fixo para alto contraste sobre o fundo dourado */
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 0.4rem 1.2rem;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(184, 146, 72, 0.3);
}

.btn-card-primary {
    background-color: var(--color-brand);
    color: var(--color-bg);
    border: none;
}

.btn-card-primary:hover {
    background-color: var(--color-brand-light);
}

/* ==========================================
   SEÇÃO MESA DE TIRAGENS INTERATIVA 3D (NOVO)
   ========================================== */
.spreads-interactive-section {
    padding: 4rem 8% 6rem 8%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

/* Container de Pills de Seleção */
.spread-pills-container {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid rgba(67, 5, 11, 0.1);
    padding-bottom: 1.5rem;
}

.spread-pills-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 0.5rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--color-brand) transparent;
}

/* Ocultar barra de rolagem nativa para Chrome/Safari no design */
.spread-pills-scroll::-webkit-scrollbar {
    height: 4px;
}

.spread-pills-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(67, 5, 11, 0.3);
    border-radius: 4px;
}

.pill-btn {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.7rem 1.5rem;
    border-radius: 30px;
    border: 1px solid rgba(67, 5, 11, 0.15);
    background-color: var(--color-bg-alt);
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-smooth);
}

.pill-btn:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
    background-color: var(--color-white);
}

.pill-btn.active {
    background-color: var(--color-brand);
    color: var(--color-bg);
    border-color: var(--color-brand);
    box-shadow: 0 4px 12px rgba(67, 5, 11, 0.2);
}

/* Informações da Tiragem Ativa */
.selected-spread-info {
    text-align: center;
    margin-bottom: 3rem;
    animation: fadeIn 0.4s ease-out;
}

.selected-spread-info h3 {
    font-size: 2rem;
    color: var(--color-brand);
    margin-bottom: 0.5rem;
}

.selected-spread-info p {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-text-muted);
    max-width: 700px;
    margin: 0 auto;
}

.cards-instruction-tap {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-brand);
    margin-top: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    animation: fadeIn 0.5s ease-out;
    background-color: rgba(255, 255, 255, 0.25);
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    border: 1px solid rgba(67, 5, 11, 0.08);
}

.pulse-icon-tiny {
    color: var(--color-gold);
    font-size: 1rem;
    animation: iconPulseTiny 2s infinite ease-in-out;
}

@keyframes iconPulseTiny {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* Wrapper da Mesa de Jogo (Altar) */
.board-table-wrapper {
    margin-bottom: 4rem;
    display: flex;
    justify-content: center;
}

.mystic-board-frame {
    background: radial-gradient(circle, #3D050C 0%, #1A0205 100%);
    border: 3px double var(--color-gold);
    border-radius: 32px;
    padding: 4rem 3rem;
    width: 100%;
    max-width: 1100px;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.75), var(--shadow-medium);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 480px;
    overflow: hidden;
}

/* Grid onde as cartas são distribuídas */
.cards-interactive-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    width: 100%;
    perspective: 1500px; /* Habilita efeito 3D geral */
}

/* ==========================================
   ESTRUTURA DA CARTA 3D E EFEITO FLIP
   ========================================== */
.tarot-card-3d {
    width: var(--card-w);
    height: var(--card-h);
    cursor: pointer;
    position: relative;
    
    /* Animação "Lift" disparada no scroll */
    opacity: 0;
    transform: translateY(60px) rotateX(20deg);
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease;
}

/* Classe aplicada via JS ao rolar */
.tarot-card-3d.revealed {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

/* Subida suave no hover no verso da carta */
.tarot-card-3d:not(.flipped):hover {
    transform: translateY(-10px) rotateX(5deg);
    z-index: 10;
}

.tarot-card-3d:not(.flipped):hover .card-3d-inner {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55), 0 0 18px rgba(184, 146, 72, 0.3);
}

/* Container que executa a rotação */
.card-3d-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

/* Quando clicada, a carta rotaciona */
.tarot-card-3d.flipped .card-3d-inner {
    transform: rotateY(180deg);
}

/* Lados Comuns da Carta */
.card-3d-front, .card-3d-back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden; /* Esconde a face oposta ao girar */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    overflow: hidden;
}

/* ==========================================
   VERSO DA CARTA (CAPA DO BARALHO CIGANO)
   ========================================== */
.card-3d-back {
    background: linear-gradient(135deg, #4F060F 0%, #200104 100%);
    border: 2px solid var(--color-gold);
    color: var(--color-gold);
    z-index: 2;
    transform: rotateY(0deg); /* Lado inicial visível */
    position: relative;
}

/* Moldura interna mística no verso da carta */
.card-3d-back::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(184, 146, 72, 0.4);
    border-radius: 8px;
    pointer-events: none;
}

.back-star-top-left { position: absolute; top: 10px; left: 10px; font-size: 0.6rem; opacity: 0.7; }
.back-star-top-right { position: absolute; top: 10px; right: 10px; font-size: 0.6rem; opacity: 0.7; }
.back-star-bottom-left { position: absolute; bottom: 10px; left: 10px; font-size: 0.6rem; opacity: 0.7; }
.back-star-bottom-right { position: absolute; bottom: 10px; right: 10px; font-size: 0.6rem; opacity: 0.7; }

/* Emblema dourado de sol/mandala e número central */
.back-mandala-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.back-symbol {
    font-size: 1.4rem;
    color: var(--color-gold-light);
    animation: pulseSymbol 3s infinite alternate ease-in-out;
}

@keyframes pulseSymbol {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.1); opacity: 1; }
}

.back-card-number {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-gold);
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.back-card-pattern {
    font-family: var(--font-sans);
    font-size: 0.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.6;
    margin-top: -2px;
}

/* ==========================================
   FRENTE DA CARTA (O SIGNIFICADO)
   ========================================== */
.card-3d-front {
    background-color: #FAF2EF; /* Cor de pergaminho suave */
    border: 2px solid var(--color-brand);
    color: var(--color-text);
    transform: rotateY(180deg); /* Escondido atrás no início */
    justify-content: flex-start;
    padding: 0.9rem 0.6rem;
    text-align: center;
}

.front-header {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-gold);
    letter-spacing: 1.5px;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid rgba(67, 5, 11, 0.1);
    padding-bottom: 0.3rem;
    width: 100%;
}

.front-title {
    font-family: var(--font-title);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-brand);
    line-height: 1.2;
    margin-bottom: 0.8rem;
    min-height: 2.2rem; /* Mantém títulos alinhados */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.front-desc {
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--color-text-muted);
    overflow-y: auto;
    max-height: 95px;
    padding: 0 4px;
    width: 100%;
    scrollbar-width: none; /* remove scrollbar visível */
}

.front-desc::-webkit-scrollbar {
    width: 0px;
}

.front-ornament {
    margin-top: auto;
    color: var(--color-gold);
    font-size: 0.6rem;
    opacity: 0.8;
}

/* ==========================================
   BANNER DE CONVERSÃO / CHECKOUT DINÂMICO
   ========================================== */
.board-checkout-banner {
    max-width: 1100px;
    margin: 0 auto;
    background-color: var(--color-bg-alt);
    border: 1px solid rgba(67, 5, 11, 0.12);
    border-radius: 24px;
    padding: 2.2rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-soft);
    animation: fadeIn 0.5s ease-out;
}

.checkout-details h3 {
    font-size: 1.6rem;
    color: var(--color-brand);
    margin-bottom: 0.4rem;
}

.checkout-details p {
    color: var(--color-text-muted);
    font-size: 1.1rem;
}

.checkout-action {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.checkout-price {
    font-family: var(--font-title);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-brand);
    white-space: nowrap;
}

.btn-checkout {
    padding: 1rem 2.2rem;
    font-size: 0.95rem;
}

/* ==========================================
   MESA E MEMENTOS ESPECÍFICOS DE TIRAGENS 3D
   ========================================== */

/* Grid Templo de Afrodite (Colunas Você / Parceiro + Centro) */
.cards-interactive-grid.layout-templo-afrodite {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto auto;
    gap: 1.8rem 3rem;
    max-width: 550px;
    margin: 0 auto;
}
/* Posicionando 3D */
.cards-interactive-grid.layout-templo-afrodite [data-pos="1"] { grid-column: 1; grid-row: 1; }
.cards-interactive-grid.layout-templo-afrodite [data-pos="4"] { grid-column: 3; grid-row: 1; }
.cards-interactive-grid.layout-templo-afrodite [data-pos="2"] { grid-column: 1; grid-row: 2; }
.cards-interactive-grid.layout-templo-afrodite [data-pos="5"] { grid-column: 3; grid-row: 2; }
.cards-interactive-grid.layout-templo-afrodite [data-pos="3"] { grid-column: 1; grid-row: 3; }
.cards-interactive-grid.layout-templo-afrodite [data-pos="6"] { grid-column: 3; grid-row: 3; }
.cards-interactive-grid.layout-templo-afrodite [data-pos="7"] { grid-column: 2; grid-row: 2; }
.cards-interactive-grid.layout-templo-afrodite [data-pos="8"] { grid-column: 2; grid-row: 1; }
.cards-interactive-grid.layout-templo-afrodite [data-pos="9"] { grid-column: 1; grid-row: 4; }
.cards-interactive-grid.layout-templo-afrodite [data-pos="10"] { grid-column: 2; grid-row: 4; }
.cards-interactive-grid.layout-templo-afrodite [data-pos="11"] { grid-column: 3; grid-row: 4; }

/* Grid Taça do Amor (Desenho da Taça) */
.cards-interactive-grid.layout-taca-amor {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto auto;
    gap: 1.5rem 2.5rem;
    max-width: 500px;
    margin: 0 auto;
}
.cards-interactive-grid.layout-taca-amor [data-pos="7"] { grid-column: 1; grid-row: 1; }
.cards-interactive-grid.layout-taca-amor [data-pos="5"] { grid-column: 3; grid-row: 1; }
.cards-interactive-grid.layout-taca-amor [data-pos="6"] { grid-column: 1; grid-row: 2; }
.cards-interactive-grid.layout-taca-amor [data-pos="4"] { grid-column: 3; grid-row: 2; }
.cards-interactive-grid.layout-taca-amor [data-pos="3"] { grid-column: 2; grid-row: 2; }
.cards-interactive-grid.layout-taca-amor [data-pos="2"] { grid-column: 2; grid-row: 3; }
.cards-interactive-grid.layout-taca-amor [data-pos="1"] { grid-column: 2; grid-row: 4; }


/* ==========================================
   RODAPÉ
   ========================================== */
.footer-section {
    background-color: var(--color-footer-bg);
    color: var(--color-footer-text);
    padding: 5rem 8% 2rem 8%;
    border-top: 2px solid var(--color-gold);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.footer-logo {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    color: var(--color-footer-text);
    text-transform: uppercase;
    letter-spacing: 3px;
}

.footer-phrase {
    font-size: 1.3rem;
    font-style: italic;
    color: var(--color-footer-text);
    max-width: 600px;
    margin: 0 auto 3rem auto;
    opacity: 0.9;
}

.footer-contacts {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 4rem;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-decoration: none;
    color: var(--color-footer-text);
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 500;
    transition: var(--transition-smooth);
    background-color: var(--color-footer-bg-btn);
    border: 1px solid var(--color-footer-border);
    padding: 0.8rem 2rem;
    border-radius: 50px;
    box-shadow: var(--shadow-footer-btn);
}

.contact-link:hover {
    color: var(--color-footer-bg);
    background-color: var(--color-footer-text);
    border-color: var(--color-footer-text);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.footer-bottom {
    border-top: 1px solid var(--color-footer-border-light);
    padding-top: 2rem;
}

.footer-bottom p {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    opacity: 0.6;
}

/* Animações e Delays no Javascript via Inline Style (Staggered deal) */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   RESPONSIVIDADE (MOBILE & TABLET)
   ========================================== */

/* Telas Médias / Notebooks */
@media (max-width: 1024px) {
    .hero-section {
        padding: 4rem 5%;
    }
    
    .hero-container {
        gap: 3rem;
    }
    
    .pricing-grid {
        gap: 1.5rem;
    }

    .mystic-board-frame {
        padding: 3rem 2rem;
    }

    .board-checkout-banner {
        padding: 2rem;
    }
}

/* Tablets (Telas de até 768px) */
@media (max-width: 768px) {
    html {
        font-size: 15px;
    }

    .header {
        padding: 1rem 5%;
    }

    .header-actions {
        gap: 1.2rem;
    }

    .hero-container {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

    .hero-image-wrapper {
        margin-bottom: 1rem;
    }

    .profile-glow {
        width: 240px;
        height: 240px;
    }

    .profile-img {
        width: 220px;
        height: 220px;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-content .bio-text {
        font-size: 1.2rem;
        margin-bottom: 2rem;
    }

    .hero-buttons {
        justify-content: center;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 450px;
        margin: 0 auto;
    }

    .price-card {
        transform: translateY(-40px); /* De cima para baixo no Mobile */
    }

    .price-card.reveal-visible {
        transform: translateY(0);
    }

    /* Ajustes da Seção Interativa */
    .spreads-interactive-section {
        padding: 4rem 5%;
    }

    .spread-pills-container {
        justify-content: flex-start;
    }

    .mystic-board-frame {
        padding: 2.5rem 1.5rem;
    }

    .board-checkout-banner {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        border-radius: 16px;
    }

    .checkout-action {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }

    .btn-checkout {
        width: 100%;
    }

    .footer-contacts {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .contact-link {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

/* Celulares Pequenos (Telas de até 480px) */
@media (max-width: 480px) {
    :root {
        --card-w: 96px;
        --card-h: 155px;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }

    .btn {
        width: 100%;
    }

    .mystic-divider .divider-line {
        width: 80px;
    }
    
    .section-title {
        font-size: 2rem;
    }

    .mystic-board-frame {
        padding: 1.5rem 0.5rem;
        border-radius: 16px;
    }

    /* Em celulares muito pequenos, desativamos os grids complexos do Templo de Afrodite e da Taça do Amor
       para evitar sobreposição de cartas e rolagem horizontal na mesa escura, 
       renderizando-as como um flexbox central padrão perfeitamente ajustado */
    .cards-interactive-grid.layout-templo-afrodite,
    .cards-interactive-grid.layout-taca-amor {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        max-width: 100%;
    }

    /* Reduz o tamanho das fontes da frente da carta para caber */
    .card-3d-front {
        padding: 0.6rem 0.5rem;
    }

    .front-header {
        font-size: 0.6rem;
        margin-bottom: 0.3rem;
    }

    .front-title {
        font-size: 0.75rem;
        min-height: 1.8rem;
        margin-bottom: 0.4rem;
    }

    .front-desc {
        font-size: 0.7rem;
        line-height: 1.25;
        max-height: 70px;
    }

    .back-card-number {
        font-size: 1.8rem;
    }
}

/* ==========================================
   MARCAS D'ÁGUA MÍSTICAS DE FUNDO
   ========================================== */
.bg-watermark {
    position: absolute;
    color: var(--color-brand);
    opacity: 0.06; /* Super sutil e elegante */
    pointer-events: none;
    z-index: 1;
    user-select: none;
}

.watermark-chalice {
    top: 5%;
    left: 2%;
    width: 280px;
    height: 280px;
    transform: rotate(-10deg);
}

.watermark-bow {
    bottom: 5%;
    right: 3%;
    width: 160px;
    height: 160px;
    transform: rotate(15deg);
}

.watermark-cards {
    top: 25%;
    right: 2%;
    width: 220px;
    height: 220px;
    transform: rotate(5deg);
}

.watermark-eye {
    bottom: 5%;
    left: 2%;
    width: 200px;
    height: 200px;
    transform: rotate(-8deg);
}

/* Ocultar/suavizar em celulares menores para evitar poluição visual */
@media (max-width: 480px) {
    .bg-watermark {
        opacity: 0.04;
    }
    .watermark-chalice {
        width: 160px;
        height: 160px;
        top: 2%;
        left: -20px;
    }
    .watermark-bow {
        width: 110px;
        height: 110px;
        bottom: 2%;
        right: -20px;
    }
}

/* ==========================================================================
   ESTILOS ADICIONAIS: NOVOS RECURSOS INTERATIVOS
   ========================================================================== */

/* 1. WIDGET DE INFLUÊNCIA LUNAR (HERO) */
.moon-phase-widget {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: linear-gradient(135deg, rgba(67, 5, 11, 0.03) 0%, rgba(184, 146, 72, 0.03) 100%);
    border: 1px solid rgba(184, 146, 72, 0.22);
    padding: 1.2rem 1.6rem;
    border-radius: 20px;
    margin-bottom: 2rem;
    backdrop-filter: blur(8px);
    transition: var(--transition-smooth);
    max-width: 650px;
    box-shadow: 0 4px 20px rgba(67, 5, 11, 0.04), inset 0 0 12px rgba(184, 146, 72, 0.05);
}

html[data-theme="dark"] .moon-phase-widget {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(184, 146, 72, 0.04) 100%);
    border-color: rgba(184, 146, 72, 0.15);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3), inset 0 0 15px rgba(184, 146, 72, 0.08);
}

.moon-phase-widget:hover {
    border-color: var(--color-gold);
    box-shadow: 0 8px 25px rgba(184, 146, 72, 0.2), inset 0 0 15px rgba(184, 146, 72, 0.12);
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(67, 5, 11, 0.05) 0%, rgba(184, 146, 72, 0.05) 100%);
}

html[data-theme="dark"] .moon-phase-widget:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(184, 146, 72, 0.06) 100%);
}

.moon-widget-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: rgba(184, 146, 72, 0.06);
    border: 1px solid rgba(184, 146, 72, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    flex-shrink: 0;
    color: var(--color-gold);
    box-shadow: 0 0 10px rgba(184, 146, 72, 0.1);
    filter: drop-shadow(0 0 8px rgba(184, 146, 72, 0.3));
    animation: rotateMoonLight 8s infinite alternate ease-in-out;
}

@keyframes rotateMoonLight {
    0% { transform: rotate(-10deg) scale(1); }
    100% { transform: rotate(10deg) scale(1.08); }
}

.moon-widget-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.moon-widget-label {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-gold);
    margin-bottom: 4px;
}

.moon-widget-name {
    font-family: var(--font-title);
    font-size: 1.25rem;
    color: var(--color-brand);
    margin-bottom: 5px;
}

.moon-widget-desc {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* 2. SEÇÃO CARTA DO DIA */
.daily-card-section {
    padding: 5rem 8% 4rem 8%;
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg-alt);
    border-top: 1px solid rgba(67, 5, 11, 0.05);
    border-bottom: 1px solid rgba(67, 5, 11, 0.05);
}

.daily-cards-container {
    max-width: 600px;
    margin: 0 auto 2.5rem auto;
    perspective: 1200px;
}

.daily-cards-row {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    width: 100%;
    position: relative;
    transition: var(--transition-smooth);
}

/* Quando estiver embaralhando, desativa hovers nas cartas */
.daily-cards-row.shuffling .daily-card-item {
    pointer-events: none;
}

/* Animações de embaralhar (shuffle) com cubic-bezier suave */
.daily-cards-row.shuffling .daily-card-item[data-card-index="0"] {
    animation: shuffleLeft 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

.daily-cards-row.shuffling .daily-card-item[data-card-index="1"] {
    animation: shuffleCenter 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

.daily-cards-row.shuffling .daily-card-item[data-card-index="2"] {
    animation: shuffleRight 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

/* Animações de sombra dinâmicas para acompanhar a profundidade 3D */
.daily-cards-row.shuffling .daily-card-item[data-card-index="0"] .daily-card-inner {
    animation: shadowLeft 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

.daily-cards-row.shuffling .daily-card-item[data-card-index="1"] .daily-card-inner {
    animation: shadowCenter 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

.daily-cards-row.shuffling .daily-card-item[data-card-index="2"] .daily-card-inner {
    animation: shadowRight 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

@keyframes shuffleLeft {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); z-index: 2; }
    20% { transform: translate3d(-35px, -20px, 30px) rotate(-6deg) scale(1.05); z-index: 5; }
    40% { transform: translate3d(calc(var(--shuffle-dist) * 1.1), -10px, 40px) rotate(4deg) scale(1.06); z-index: 10; }
    60% { transform: translate3d(calc(var(--shuffle-dist) * 2.1), -5px, 10px) rotate(2deg) scale(1.02); z-index: 4; }
    80% { transform: translate3d(var(--shuffle-dist), 15px, -30px) rotate(-3deg) scale(0.95); z-index: 1; }
    100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); z-index: 2; }
}

@keyframes shuffleRight {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); z-index: 2; }
    20% { transform: translate3d(35px, 20px, -30px) rotate(6deg) scale(0.95); z-index: 1; }
    40% { transform: translate3d(calc(var(--shuffle-dist) * -1.1), 10px, -40px) rotate(-4deg) scale(0.94); z-index: 1; }
    60% { transform: translate3d(calc(var(--shuffle-dist) * -2.1), 5px, -10px) rotate(-2deg) scale(0.98); z-index: 2; }
    80% { transform: translate3d(calc(var(--shuffle-dist) * -1), -15px, 30px) rotate(3deg) scale(1.04); z-index: 8; }
    100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); z-index: 2; }
}

@keyframes shuffleCenter {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); z-index: 5; }
    20% { transform: translate3d(15px, 5px, -10px) rotate(2deg) scale(0.97); z-index: 3; }
    40% { transform: translate3d(calc(var(--shuffle-dist) * 0.5), -15px, 20px) rotate(-3deg) scale(1.03); z-index: 6; }
    60% { transform: translate3d(0, 10px, -20px) rotate(0deg) scale(0.94); z-index: 3; }
    80% { transform: translate3d(calc(var(--shuffle-dist) * -0.5), 5px, 10px) rotate(3deg) scale(1.01); z-index: 5; }
    100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); z-index: 5; }
}

@keyframes shadowLeft {
    0%, 100% { box-shadow: 0 5px 15px rgba(67, 5, 11, 0.15); }
    20% { box-shadow: 0 15px 30px rgba(67, 5, 11, 0.22); }
    40% { box-shadow: 0 20px 35px rgba(67, 5, 11, 0.28); }
    60% { box-shadow: 0 10px 20px rgba(67, 5, 11, 0.18); }
    80% { box-shadow: 0 2px 6px rgba(67, 5, 11, 0.08); }
}

@keyframes shadowRight {
    0%, 100% { box-shadow: 0 5px 15px rgba(67, 5, 11, 0.15); }
    20% { box-shadow: 0 2px 6px rgba(67, 5, 11, 0.08); }
    40% { box-shadow: 0 2px 6px rgba(67, 5, 11, 0.08); }
    60% { box-shadow: 0 6px 15px rgba(67, 5, 11, 0.14); }
    80% { box-shadow: 0 16px 32px rgba(67, 5, 11, 0.25); }
}

@keyframes shadowCenter {
    0%, 100% { box-shadow: 0 8px 20px rgba(67, 5, 11, 0.18); }
    20% { box-shadow: 0 4px 12px rgba(67, 5, 11, 0.12); }
    40% { box-shadow: 0 12px 24px rgba(67, 5, 11, 0.2); }
    60% { box-shadow: 0 3px 10px rgba(67, 5, 11, 0.1); }
    80% { box-shadow: 0 8px 18px rgba(67, 5, 11, 0.15); }
}

.daily-card-item {
    width: 110px;
    height: 170px;
    cursor: pointer;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.daily-card-item:hover {
    transform: translateY(-8px) scale(1.05);
    z-index: 5;
}

.daily-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(67, 5, 11, 0.12);
}

.daily-card-item.flipped .daily-card-inner {
    transform: rotateY(180deg);
}

.daily-card-back, .daily-card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
}

.daily-card-back {
    background: linear-gradient(135deg, #B89248 0%, #856121 100%);
    border: 2px solid var(--color-brand);
    color: var(--color-brand);
    z-index: 2;
    transform: rotateY(0deg);
    position: relative;
}

html[data-theme="dark"] .daily-card-back {
    background: linear-gradient(135deg, #4f060f 0%, #1e1315 100%);
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.daily-card-back::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(67, 5, 11, 0.25);
    border-radius: 6px;
}

html[data-theme="dark"] .daily-card-back::before {
    border-color: rgba(204, 166, 98, 0.3);
}

.card-back-ornament {
    font-size: 1.6rem;
    animation: rotateBackStar 8s infinite linear;
}

@keyframes rotateBackStar {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.card-back-text {
    font-family: var(--font-sans);
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 12px;
    opacity: 0.8;
}

.daily-card-front {
    background-color: #FAF2EF;
    border: 2px solid var(--color-gold);
    color: var(--color-text);
    transform: rotateY(180deg);
    text-align: center;
}

.daily-card-front i {
    font-size: 2.2rem;
    color: var(--color-gold);
    margin-bottom: 0.8rem;
    filter: drop-shadow(0 2px 4px rgba(184,146,72,0.15));
}

.daily-card-front h4 {
    font-family: var(--font-title);
    font-size: 0.85rem;
    color: var(--color-brand);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.daily-card-result {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    background-color: var(--color-white);
    border: 1px solid rgba(184, 146, 72, 0.2);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow-soft);
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    display: none;
}

.daily-card-result.visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
    border-color: var(--color-gold);
    box-shadow: 0 0 20px rgba(184, 146, 72, 0.15);
}

.daily-card-result h3 {
    font-size: 1.4rem;
    color: var(--color-brand);
    margin-bottom: 0.6rem;
}

.daily-card-result p {
    color: var(--color-text-muted);
    font-size: 1.15rem;
    line-height: 1.45;
}

/* 3. SEÇÃO QUIZ RECOMENDAÇÃO */
.quiz-section {
    padding: 5rem 8% 4rem 8%;
    position: relative;
    overflow: hidden;
}

.quiz-container {
    max-width: 600px;
    margin: 0 auto;
}

.quiz-card {
    background: var(--color-bg-alt);
    border: 1px solid rgba(67, 5, 11, 0.1);
    border-radius: 24px;
    padding: 3rem;
    box-shadow: var(--shadow-medium);
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.quiz-step {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.quiz-step.active {
    display: flex;
    animation: quizStepFade 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes quizStepFade {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.quiz-step-icon {
    font-size: 3.5rem;
    color: var(--color-gold);
    margin-bottom: 1.2rem;
    animation: bounceIcon 3s infinite ease-in-out;
}

.compass-icon {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
    vertical-align: middle;
}

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

.quiz-step h3 {
    font-size: 1.5rem;
    color: var(--color-brand);
    margin-bottom: 0.8rem;
    line-height: 1.3;
}

.quiz-step p {
    color: var(--color-text-muted);
    font-size: 1.15rem;
    margin-bottom: 2rem;
    max-width: 450px;
}

.quiz-progress {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-gold);
    margin-bottom: 1.2rem;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 480px;
}

.quiz-option-btn {
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1px solid rgba(67, 5, 11, 0.12);
    padding: 0.9rem 1.4rem;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-soft);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
}

.quiz-option-btn:hover {
    border-color: var(--color-brand);
    background-color: rgba(67, 5, 11, 0.03);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(67, 5, 11, 0.06);
}

.quiz-option-btn:active {
    transform: translateY(0);
}

.result-badge {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-gold);
    background: rgba(184, 146, 72, 0.1);
    padding: 0.4rem 1.2rem;
    border-radius: 20px;
    margin-bottom: 1rem;
}

.quiz-result-price {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-brand);
    margin: 0.6rem 0 1.5rem 0;
}

.quiz-result-actions {
    display: flex;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
    width: 100%;
    justify-content: center;
}

.quiz-result-actions .btn {
    flex: 1;
    max-width: 220px;
}

.quiz-restart-btn {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    text-decoration: underline;
    opacity: 0.7;
    transition: var(--transition-smooth);
}

.quiz-restart-btn:hover {
    color: var(--color-brand);
    opacity: 1;
}

/* ==========================================================================
   RESPONSIVIDADE DOS NOVOS RECURSOS
   ========================================================================== */

/* Tablets */
@media (max-width: 768px) {
    .quiz-card {
        padding: 2.2rem;
    }
    .quiz-step h3 {
        font-size: 1.35rem;
    }
    .quiz-step p {
        font-size: 1.1rem;
    }
    .quiz-option-btn {
        font-size: 1.05rem;
        padding: 0.8rem 1.2rem;
    }
    .quiz-result-actions {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        width: 100%;
    }
    .quiz-result-actions .btn {
        width: 100%;
        max-width: 100%;
    }
}

/* Celulares */
@media (max-width: 480px) {
    :root {
        --shuffle-dist: 102px;
    }

    .moon-phase-widget {
        padding: 1rem 1.2rem;
        gap: 1rem;
    }
    .moon-widget-icon {
        width: 3rem;
        height: 3rem;
        font-size: 1.8rem;
    }
    .moon-widget-label {
        font-size: 0.75rem;
    }
    .moon-widget-name {
        font-size: 1.15rem;
    }
    .moon-widget-desc {
        font-size: 0.92rem;
    }

    .daily-card-section {
        padding: 4rem 5% 3.5rem 5%;
    }
    .daily-cards-row {
        gap: 0.8rem;
    }
    .daily-card-item {
        width: 90px;
        height: 140px;
    }
    .daily-card-front i {
        font-size: 1.6rem;
        margin-bottom: 0.4rem;
    }
    .daily-card-front h4 {
        font-size: 0.72rem;
        letter-spacing: 0px;
    }
    .card-back-ornament {
        font-size: 1.2rem;
    }
    .card-back-text {
        font-size: 0.45rem;
        margin-top: 8px;
    }
    .daily-card-result {
        padding: 1.2rem;
        border-radius: 12px;
    }
    .daily-card-result h3 {
        font-size: 1.2rem;
    }
    .daily-card-result p {
        font-size: 0.95rem;
    }

    .quiz-section {
        padding: 4rem 5% 3.5rem 5%;
    }
    .quiz-card {
        padding: 1.8rem 1.2rem;
        border-radius: 16px;
        min-height: auto;
    }
    .quiz-step h3 {
        font-size: 1.25rem;
    }
    .quiz-step p {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }
    .quiz-option-btn {
        font-size: 0.95rem;
        padding: 0.75rem 1rem;
        border-radius: 10px;
        gap: 0.6rem;
    }
}

/* ==========================================
   PÁGINA DO FAQ / PERGUNTAS FREQUENTES
   ========================================== */
.faq-page-section {
    padding: 6rem 8%;
    max-width: 900px;
    margin: 0 auto;
    min-height: 70vh;
}

.faq-title-container {
    text-align: center;
    margin-bottom: 4rem;
}

.faq-title-container h1 {
    font-family: var(--font-title);
    font-size: 3rem;
    color: var(--color-brand);
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

.faq-title-container p {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-bottom: 5rem;
}

.faq-item {
    background-color: var(--color-bg-alt);
    border: 1px solid rgba(67, 5, 11, 0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-smooth);
}

html[data-theme="dark"] .faq-item {
    border-color: rgba(255, 255, 255, 0.05);
}

.faq-item:hover {
    border-color: var(--color-gold);
    box-shadow: 0 4px 15px rgba(184, 146, 72, 0.1);
}

.faq-question-btn {
    width: 100%;
    background: none;
    border: none;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    color: var(--color-text);
    font-family: var(--font-title);
    font-size: 1.15rem;
    font-weight: 600;
    gap: 1rem;
    transition: var(--transition-smooth);
}

.faq-question-btn h3 {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.15rem;
    color: var(--color-brand);
    transition: var(--transition-smooth);
}

.faq-chevron {
    color: var(--color-gold);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-size: 1.1rem;
}

.faq-answer-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.faq-answer-content {
    overflow: hidden;
}

.faq-answer-inner {
    padding: 0 2rem 1.5rem 2rem;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* Estado ativo do acordeão */
.faq-item.active {
    border-color: var(--color-gold);
}

.faq-item.active .faq-answer-wrapper {
    grid-template-rows: 1fr;
}

.faq-item.active .faq-chevron {
    transform: rotate(180deg);
}

.faq-item.active .faq-question-btn h3 {
    color: var(--color-gold);
}

/* Responsivo para o FAQ */
@media (max-width: 768px) {
    .faq-page-section {
        padding: 4rem 5%;
    }
    
    .faq-title-container {
        margin-bottom: 2.5rem;
    }
    
    .faq-title-container h1 {
        font-size: 2.2rem;
    }
    
    .faq-title-container p {
        font-size: 1.05rem;
    }
    
    .faq-question-btn {
        padding: 1.2rem 1.4rem;
        font-size: 1.05rem;
    }
    
    .faq-question-btn h3 {
        font-size: 1.05rem;
    }
    
    .faq-answer-inner {
        padding: 0 1.4rem 1.2rem 1.4rem;
        font-size: 0.95rem;
    }
}

/* ==========================================
   MENU TOGGLE & SIDE NAV DRAWER
   ========================================== */

/* Botão de abrir menu */
.menu-toggle-btn {
    background: transparent;
    border: 1px solid var(--color-header-border);
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand);
    font-size: 1.15rem;
    transition: var(--transition-smooth);
    position: relative;
    z-index: 101;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

.menu-toggle-btn:hover {
    background-color: var(--color-theme-toggle-hover);
    transform: scale(1.05);
}

/* Backdrop escuro e desfocado */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(19, 12, 14, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Container do Drawer deslizante (Glassmorphism sutil) */
.nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    background-color: rgba(247, 228, 226, 0.95);
    border-left: 1px solid var(--color-header-border);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
    z-index: 999;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    padding: 2.5rem 2rem;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

html[data-theme="dark"] .nav-drawer {
    background-color: rgba(30, 19, 21, 0.95);
}

.nav-drawer.active {
    transform: translateX(0);
}

/* Cabeçalho do Drawer */
.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3.5rem;
}

.drawer-header .logo {
    font-family: var(--font-title);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-brand);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.drawer-close-btn {
    background: transparent;
    border: none;
    color: var(--color-brand);
    font-size: 1.4rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

.drawer-close-btn:hover {
    background-color: var(--color-theme-toggle-hover);
    transform: rotate(90deg);
}

/* Navegação do Drawer */
.drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex-grow: 1;
}

.drawer-nav a {
    text-decoration: none;
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(67, 5, 11, 0.05);
    transition: var(--transition-smooth);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

html[data-theme="dark"] .drawer-nav a {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.drawer-nav a::after {
    content: '✦';
    color: var(--color-gold);
    opacity: 0;
    transform: translateX(-10px);
    transition: var(--transition-smooth);
    font-size: 0.8rem;
}

.drawer-nav a:hover {
    color: var(--color-gold);
    padding-left: 8px;
}

.drawer-nav a:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* Rodapé do Drawer */
.drawer-footer {
    border-top: 1px solid var(--color-header-border);
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.drawer-socials {
    display: flex;
    gap: 1.5rem;
}

.drawer-socials a {
    color: var(--color-text-muted);
    font-size: 1.3rem;
    transition: var(--transition-smooth);
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--color-header-border);
}

.drawer-socials a:hover {
    color: var(--color-brand);
    background-color: var(--color-theme-toggle-hover);
    transform: translateY(-2px);
}

.drawer-footer p {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    opacity: 0.5;
    letter-spacing: 1px;
    margin: 0;
}

/* ==========================================
   SEÇÃO DE DEPOIMENTOS
   ========================================== */
.testimonials-section {
    padding: 6rem 8%;
    background-color: var(--color-bg);
    position: relative;
    z-index: 1;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    max-width: 1200px;
    margin: 3.5rem auto 0 auto;
}

.testimonial-card {
    background-color: var(--color-bg-alt);
    border: 1px solid rgba(184, 146, 72, 0.25);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    position: relative;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

html[data-theme="dark"] .testimonial-card {
    background-color: var(--color-bg-alt);
    border-color: rgba(204, 166, 98, 0.2);
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium), var(--shadow-glow);
    border-color: var(--color-gold);
}

.testimonial-quote-icon {
    color: var(--color-gold);
    font-size: 2rem;
    margin-bottom: 1.2rem;
    opacity: 0.8;
}

.testimonial-text {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-style: italic;
    color: var(--color-text);
    line-height: 1.6;
    flex-grow: 1;
}

.testimonial-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184, 146, 72, 0.3), transparent);
    margin: 1.8rem 0;
}

.testimonial-client {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Avatar Padrão Estilizado */
.testimonial-avatar {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background-color: var(--color-brand);
    border: 2px solid var(--color-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-bg);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-soft);
}

html[data-theme="dark"] .testimonial-avatar {
    background-color: var(--color-bg);
    color: var(--color-text);
}

.testimonial-client-info h4 {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: 0.5px;
}

.testimonial-client-info span {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    letter-spacing: 0.5px;
}

/* Responsividade */
@media (min-width: 993px) {
    .testimonial-card:last-child:nth-child(odd) {
        grid-column: span 2;
        max-width: 580px;
        margin: 0 auto;
        width: 100%;
    }
}

@media (max-width: 992px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 576px) {
    .testimonials-section {
        padding: 4rem 5%;
    }
    
    .testimonial-card {
        padding: 1.8rem;
    }
    
    .testimonial-text {
        font-size: 1.15rem;
    }
}

/* ==========================================
   EFEITO DE BRILHO (SPARKLE) NA DIGITAÇÃO
   ========================================== */
.word-sparkle {
    position: absolute;
    color: var(--color-gold);
    font-family: var(--font-title);
    font-size: 1.1rem;
    font-weight: bold;
    pointer-events: none;
    display: inline-block;
    line-height: 1;
    z-index: 10;
    animation: sparkleFloat 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes sparkleFloat {
    0% {
        transform: translateY(0) scale(0) rotate(0deg);
        opacity: 0;
        filter: drop-shadow(0 0 0px var(--color-gold));
    }
    20% {
        opacity: 1;
        transform: translateY(-8px) scale(1.3) rotate(30deg);
        filter: drop-shadow(0 0 5px var(--color-gold));
    }
    100% {
        transform: translateY(-35px) scale(0.6) rotate(180deg);
        opacity: 0;
        filter: drop-shadow(0 0 0px var(--color-gold));
    }
}