/* =========================================
   1. SISTEMA DE TEMAS (CSS Variables)
   ========================================= */
:root {
    /* Padrão (Indigo / Emerald) */
    --color-primary: #4F46E5;
    --color-secondary: #10B981;
    --color-accent: #8B5CF6;
}

/* Tema Natal */
body.theme-christmas {
    --color-primary: #DC2626;
    /* Vermelho Noel */
    --color-secondary: #15803d;
    /* Verde Pinheiro */
    --color-accent: #FBBF24;
    /* Dourado */
}

/* Tema Black Friday */
body.theme-blackfriday {
    --color-primary: #0F172A;
    /* Preto Profundo */
    --color-secondary: #FACC15;
    /* Amarelo Alerta */
    --color-accent: #DC2626;
    /* Vermelho Oferta */
}

/* Tema Ano Novo */
body.theme-newyear {
    --color-primary: #CA8A04;
    /* Dourado */
    --color-secondary: #0F172A;
    /* Azul Noite */
    --color-accent: #94A3B8;
    /* Prata */
}

/* =========================================
   2. UTILITÁRIOS DE LAYOUT
   ========================================= */
/* Esconder Scrollbar (mas permitir scroll) */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Perspectiva para o Hero 3D */
.perspective-1000 {
    perspective: 1000px;
}

/* =========================================
   3. ANIMAÇÕES E EFEITOS VISUAIS
   ========================================= */

/* Cursor piscante (Efeito de digitação no Hero) */
.cursor {
    display: inline-block;
    width: 3px;
    height: 1.2em;
    vertical-align: middle;
    margin-left: 4px;
    background-color: var(--color-primary);
    /* Usa a cor do tema */
    animation: blink 1s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Texto Riscado (Para os preços "De: R$") */
.strike {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: #EF4444;
    /* Vermelho fixo para destaque */
}

/* Botão WhatsApp Pulsando */
.whatsapp-animate {
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

/* Animação suave para Dropdowns e Modais */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animation-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

/* Elementos flutuantes (Decoração) */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* =========================================
   4. DECORAÇÕES SAZONAIS (NATAL / BLACK FRIDAY)
   ========================================= */

/* Neve Caindo */
.snowflake {
    position: fixed;
    top: -20px;
    color: #fff;
    z-index: 9999;
    user-select: none;
    cursor: default;
    pointer-events: none;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    animation-name: snowflakes-fall, snowflakes-shake;
    animation-duration: 10s, 3s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
}

@keyframes snowflakes-fall {
    0% {
        top: -10%;
    }

    100% {
        top: 100%;
    }
}

@keyframes snowflakes-shake {
    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(80px);
    }

    100% {
        transform: translateX(0px);
    }
}

/* Guirlanda no Header (Apenas Tema Natal) */
body.theme-christmas .seasonal-decoration {
    display: block;
    background: repeating-linear-gradient(45deg,
            #DC2626,
            #DC2626 10px,
            #15803d 10px,
            #15803d 20px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Fita de Isolamento/Caution (Apenas Tema Black Friday) */
body.theme-blackfriday .seasonal-decoration {
    display: block;
    background: repeating-linear-gradient(45deg,
            #000,
            #000 20px,
            #FACC15 20px,
            #FACC15 40px);
}