@tailwind base;
@tailwind components;
@tailwind utilities;

/* Variables CSS centralizadas */
:root {
    --primary-gold: #E2B285;
    --gold-primary: #D4AF37;
    --gold-secondary: #F4E4C1;
    --gold-dark: #B8941F;
    --dark-bg: #0a0a0a;
    --text-light: #f5f5f5;
    --card-bg: #1A1A1A;
}

/* Animaciones principales */
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes shimmer-text {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

@keyframes float-particle {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    25% {
        opacity: 0.3;
        transform: translateY(-30px) translateX(10px);
    }
    50% {
        transform: translateY(-20px) translateX(-10px);
        opacity: 0.5;
    }
    75% {
        opacity: 0.3;
        transform: translateY(-40px) translateX(5px);
    }
}

@keyframes scroll-brands {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

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

@keyframes rotate-bg {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spin-ring {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes progress-animation {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

@keyframes btn-shimmer-effect {
    0% { left: -100%; }
    100% { left: 100%; }
}

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

@keyframes subtle-glow {
    0%, 100% { opacity: 0.05; }
    50% { opacity: 0.1; }
}

/* Base layer - Fuentes y colores base */
@layer base {
    .font-spectral-bold {
        font-family: "Spectral SC", serif;
        font-weight: 700;
        font-style: normal;
    }
    
    .font-baskervville-sc {
        font-family: "Baskervville SC", serif;
    }
    
    .font-inter {
        font-family: 'Inter', sans-serif;
    }

    .font-merriweather {
        font-family: 'Merriweather', serif;
    }

    .font-playfair {
        font-family: 'Playfair Display', serif;
    }
}

/* Components layer */
@layer components {
    /* Gradientes de texto */
    .text-gradient-gold {
        background: linear-gradient(135deg, #f5f5f5 0%, var(--gold-primary) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .text-gradient-shimmer {
        background: linear-gradient(90deg, #fff 0%, var(--primary-gold) 50%, #fff 100%);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: shimmer-text 3s linear infinite;
    }

    /* Línea dorada */
    /* .gold-line {
        background: linear-gradient(90deg, var(--primary-gold), var(--gold-secondary));
    } */

    /* Navegación */
    .nav-link {
        position: relative;
    }

    .nav-link::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background-color: var(--primary-gold);
        transition: width 0.3s ease;
    }

    .nav-link:hover::after {
        width: 100%;
    }

    /* Carousel */
    .carousel-track {
        transition: transform 0.7s ease-out;
    }

    /* Brands track */
    .brands-track {
        animation: scroll-brands 20s linear infinite;
    }

    .brands-track:hover {
        animation-play-state: paused;
    }

    /* Efectos de lujo */
    .luxury-card-border {
        background: linear-gradient(45deg, transparent, var(--gold-primary), transparent);
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    .group:hover .luxury-card-border {
        opacity: 1;
    }

    /* Filtros de marca */
    .brand-grayscale {
        filter: grayscale(100%) brightness(0.8);
        transition: filter 0.3s ease;
    }

    .brand-grayscale:hover {
        filter: grayscale(0%) brightness(1);
    }

    /* Botones con efectos */
    .btn-shimmer {
        position: relative;
        overflow: hidden;
    }

    .btn-shimmer::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        animation: btn-shimmer-effect 3s infinite;
    }

    .btn-glow {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    }

    /* Background especiales */
    .bg-radial-gradient {
        background: radial-gradient(circle, rgba(226, 178, 133, 0.3) 0%, transparent 70%);
        animation: subtle-glow 4s ease-in-out infinite;
    }
}

/* Utilities layer */
@layer utilities {
    /* Colores personalizados */
    .text-gold { color: var(--gold-primary); }
    .text-gold-light { color: var(--gold-secondary); }
    .text-gold-dark { color: var(--gold-dark); }
    .text-primary-gold { color: var(--primary-gold); }
    
    .bg-gold { background-color: var(--gold-primary); }
    .bg-gold-light { background-color: var(--gold-secondary); }
    .bg-gold-dark { background-color: var(--gold-dark); }
    .bg-primary-gold { background-color: var(--primary-gold); }
    .bg-dark-bg { background-color: var(--dark-bg); }
    .bg-card-bg { background-color: var(--card-bg); }
    
    .border-gold { border-color: var(--gold-primary); }
    .border-primary-gold { border-color: var(--primary-gold); }

    /* Colores con transparencia */
    .bg-gold\/90 { background-color: rgb(212 175 55 / 0.9); }
    .bg-gold\/10 { background-color: rgb(212 175 55 / 0.1); }
    .bg-primary-gold\/30 { background-color: rgb(226 178 133 / 0.3); }
    .bg-primary-gold\/20 { background-color: rgb(226 178 133 / 0.2); }
    .bg-primary-gold\/10 { background-color: rgb(226 178 133 / 0.1); }
    .bg-primary-gold\/5 { background-color: rgb(226 178 133 / 0.05); }
    .bg-dark-bg\/70 { background-color: rgb(10 10 10 / 0.7); }
    .bg-dark-bg\/90 { background-color: rgb(10 10 10 / 0.9); }
    .bg-card-bg\/90 { background-color: rgb(26 26 26 / 0.9); }
    
    .border-gold\/20 { border-color: rgb(212 175 55 / 0.2); }
    .border-gold\/30 { border-color: rgb(212 175 55 / 0.3); }
    .border-primary-gold\/20 { border-color: rgb(226 178 133 / 0.2); }

    /* Animaciones */
    .animate-shimmer { animation: shimmer 3s linear infinite; }
    .animate-float-particle { animation: float-particle 15s ease-in-out infinite; }
    .animate-scroll-brands { animation: scroll-brands 20s linear infinite; }
    .animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }
    .loading-bg-rotate { animation: rotate-bg 20s linear infinite; }
    .progress-bar-animate { animation: progress-animation 2s ease-in-out infinite; }
    .logo-ring-spin { animation: spin-ring 2s linear infinite; }
    .btn-float { animation: float 3s ease-in-out infinite; }
    
    /* Partículas */
    .particle { animation: float-particle 4s ease-in-out infinite; }

    /* Blur personalizado */
    .backdrop-blur-xs { backdrop-filter: blur(2px); }
}

/* Pantalla de carga */
.loading-screen {
    transition: opacity 1s ease-out;
}

.loading-screen.fade-out {
    opacity: 0;
}

/* Media queries */
@media (max-width: 768px) {
    .brands-track {
        animation-duration: 20s;
    }
    
    .text-gradient-shimmer {
        font-size: 2rem;
    }
}

@media (max-width: 640px) {
    .loading-screen h1 {
        font-size: 1.5rem;
        letter-spacing: 0.1rem;
    }
}