/* ClubeMix Elite - Estilos Personalizados Otimizados */

/* Variáveis CSS para melhor performance */
:root {
    --gold-primary: #FFD700;
    --gold-secondary: #B8941F;
    --dark-primary: #000000;
    --dark-secondary: #121212;
    --dark-tertiary: #1a1a1a;
    --animation-duration: 0.3s;
    --animation-easing: ease;
}

/* Gradientes otimizados com will-change */
.gradient-gold {
    background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-primary) 50%, var(--gold-secondary) 100%);
    will-change: transform;
}

.gradient-dark {
    background: linear-gradient(135deg, var(--dark-primary) 0%, var(--dark-secondary) 50%, var(--dark-tertiary) 100%);
}

/* Texto com gradiente dourado otimizado */
.text-gradient-gold {
    background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-primary) 50%, var(--gold-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    will-change: transform;
}

/* Bordas douradas */
.border-gold {
    border-color: var(--gold-primary);
}

/* Efeitos hover otimizados */
.hover-gold:hover {
    background-color: var(--gold-primary);
    color: var(--dark-primary);
    transition: all var(--animation-duration) var(--animation-easing);
}

.hover-gold-outline:hover {
    background-color: transparent;
    color: var(--gold-primary);
    border-color: var(--gold-primary);
    transition: all var(--animation-duration) var(--animation-easing);
}

/* Sombras luxuosas otimizadas */
.luxury-shadow {
    box-shadow: 0 20px 40px rgba(255, 215, 0, 0.1), 0 0 0 1px rgba(255, 215, 0, 0.1);
    will-change: box-shadow;
}

.luxury-shadow-dark {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 215, 0, 0.1);
}

/* Animações otimizadas com GPU acceleration */
.animate-float {
    animation: float 6s ease-in-out infinite;
    will-change: transform;
}

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

.animate-pulse-gold {
    animation: pulse-gold 2s ease-in-out infinite;
    will-change: opacity;
}

@keyframes pulse-gold {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Classe para screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Animações de fade-in para scroll otimizadas */
.animate-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

.animate-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsividade adicional */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
        line-height: 1.2;
    }
    
    .hero-subtitle {
        font-size: 1.125rem;
    }
}

@media (max-width: 640px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
}