/* ========================================================
   ARCHIVO GLASSMORPHISM - EFECTOS DE CRISTAL Y NUBES
   ======================================================== */

/* ==================== FONDO ANIMADO DEL HERO ==================== */
.nike-hero {
    position: relative;
}

/* Patrón geométrico animado de fondo */
.nike-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: 
        linear-gradient(45deg, transparent 30%, rgba(212, 175, 55, 0.04) 30%, rgba(212, 175, 55, 0.04) 70%, transparent 70%),
        linear-gradient(-45deg, transparent 30%, rgba(44, 95, 141, 0.04) 30%, rgba(44, 95, 141, 0.04) 70%, transparent 70%),
        radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(44, 95, 141, 0.1) 0%, transparent 50%);
    background-size: 120px 120px, 120px 120px, 900px 900px, 900px 900px;
    animation: moveHeroBackground 80s linear infinite;
    opacity: 0.5;
    z-index: 1;
}

@keyframes moveHeroBackground {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    100% {
        transform: translate(60px, 60px) rotate(360deg);
    }
}

/* Capa de cristal esmerilado con movimiento */
.nike-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 25% 35%, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 75% 65%, rgba(255, 255, 255, 0.25) 0%, transparent 50%);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    pointer-events: none;
    animation: glassHeroShift 20s ease-in-out infinite;
    z-index: 2;
}

@keyframes glassHeroShift {
    0%, 100% {
        background-position: 0% 0%, 100% 100%;
        opacity: 0.6;
    }
    50% {
        background-position: 100% 100%, 0% 0%;
        opacity: 0.8;
    }
}

/* ==================== NUBES FLOTANTES ADICIONALES ==================== */

/* Nube flotante 1 - Dorada */
.nike-hero .cloud-1 {
    content: '';
    position: absolute;
    top: 10%;
    left: 5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0.08) 30%, transparent 60%);
    border-radius: 50%;
    filter: blur(90px);
    animation: cloudDrift1 35s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
}

/* Nube flotante 2 - Azul */
.nike-hero .cloud-2 {
    content: '';
    position: absolute;
    top: 50%;
    right: 10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(44, 95, 141, 0.15) 0%, rgba(44, 95, 141, 0.06) 35%, transparent 65%);
    border-radius: 50%;
    filter: blur(95px);
    animation: cloudDrift2 40s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
}

/* Nube flotante 3 - Bronce */
.nike-hero .cloud-3 {
    content: '';
    position: absolute;
    bottom: 15%;
    left: 30%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(139, 115, 85, 0.12) 0%, rgba(139, 115, 85, 0.05) 30%, transparent 60%);
    border-radius: 50%;
    filter: blur(85px);
    animation: cloudDrift3 38s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
}

@keyframes cloudDrift1 {
    0%, 100% { 
        transform: translate(0, 0) scale(1);
        opacity: 0.8;
    }
    33% { 
        transform: translate(60px, -40px) scale(1.1);
        opacity: 1;
    }
    66% { 
        transform: translate(-40px, 50px) scale(0.95);
        opacity: 0.7;
    }
}

@keyframes cloudDrift2 {
    0%, 100% { 
        transform: translate(0, 0) scale(1);
        opacity: 0.7;
    }
    33% { 
        transform: translate(-70px, 60px) scale(1.15);
        opacity: 0.9;
    }
    66% { 
        transform: translate(50px, -50px) scale(0.9);
        opacity: 0.6;
    }
}

@keyframes cloudDrift3 {
    0%, 100% { 
        transform: translate(0, 0) scale(1);
        opacity: 0.75;
    }
    33% { 
        transform: translate(-50px, -60px) scale(1.08);
        opacity: 0.85;
    }
    66% { 
        transform: translate(60px, 40px) scale(0.92);
        opacity: 0.65;
    }
}

/* ==================== PARTÍCULAS FLOTANTES ==================== */
.nike-hero .particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(212, 175, 55, 0.4);
    border-radius: 50%;
    pointer-events: none;
    animation: particleFloat 20s linear infinite;
}

@keyframes particleFloat {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) translateX(50px);
        opacity: 0;
    }
}

/* ==================== MEJORAS AL GLASSMORPHISM ==================== */

/* Efecto de reflejo en el borde superior */
.hero-content::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.8) 20%, 
        rgba(255, 255, 255, 0.8) 80%, 
        transparent
    );
    border-radius: 32px;
}

/* Sombra interna sutil */
.hero-content {
    position: relative;
}

.hero-content > * {
    position: relative;
    z-index: 1;
}

/* ==================== RESPONSIVE PARA GLASSMORPHISM ==================== */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Tabletas */
    .nike-hero .cloud-1,
    .nike-hero .cloud-2,
    .nike-hero .cloud-3 {
        width: 400px;
        height: 400px;
        filter: blur(80px);
    }
}

@media (max-width: 768px) {
    /* Móviles y tabletas pequeñas */
    .nike-hero .cloud-1,
    .nike-hero .cloud-2,
    .nike-hero .cloud-3 {
        width: 280px;
        height: 280px;
        filter: blur(65px);
    }
    
    .nike-hero .cloud-1 {
        top: 5%;
        left: -10%;
    }
    
    .nike-hero .cloud-2 {
        top: 40%;
        right: -10%;
    }
    
    .nike-hero .cloud-3 {
        bottom: 10%;
        left: 20%;
    }
    
    .hero-content {
        backdrop-filter: blur(16px) saturate(160%);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
        box-shadow: 
            0 6px 24px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.5),
            0 0 0 1px rgba(255, 255, 255, 0.25);
    }
    
    /* Reducir animaciones en móvil para mejor rendimiento */
    .nike-hero .cloud-1,
    .nike-hero .cloud-2,
    .nike-hero .cloud-3 {
        animation-duration: 45s;
    }
}

@media (max-width: 480px) {
    /* Móviles pequeños */
    .nike-hero .cloud-1,
    .nike-hero .cloud-2,
    .nike-hero .cloud-3 {
        width: 220px;
        height: 220px;
        filter: blur(55px);
    }
    
    .hero-content {
        backdrop-filter: blur(14px) saturate(150%);
        -webkit-backdrop-filter: blur(14px) saturate(150%);
    }
    
    /* Simplificar animaciones en móviles pequeños */
    @keyframes cloudDrift1 {
        0%, 100% { 
            transform: translate(0, 0) scale(1);
            opacity: 0.7;
        }
        50% { 
            transform: translate(30px, -20px) scale(1.05);
            opacity: 0.85;
        }
    }
    
    @keyframes cloudDrift2 {
        0%, 100% { 
            transform: translate(0, 0) scale(1);
            opacity: 0.65;
        }
        50% { 
            transform: translate(-35px, 30px) scale(1.08);
            opacity: 0.8;
        }
    }
    
    @keyframes cloudDrift3 {
        0%, 100% { 
            transform: translate(0, 0) scale(1);
            opacity: 0.7;
        }
        50% { 
            transform: translate(-25px, -30px) scale(1.04);
            opacity: 0.75;
        }
    }
}

/* ==================== OPTIMIZACIÓN PARA DISPOSITIVOS DE BAJO RENDIMIENTO ==================== */
@media (prefers-reduced-motion: reduce) {
    .nike-hero .cloud-1,
    .nike-hero .cloud-2,
    .nike-hero .cloud-3 {
        animation: none;
    }
    
    .nike-hero .particle {
        display: none;
    }
}

/* ==================== MODO OSCURO (OPCIONAL) ==================== */
@media (prefers-color-scheme: dark) {
    .hero-content {
        background: rgba(26, 26, 26, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
}


/* ==================== PARTÍCULAS FLOTANTES DEL HERO ==================== */
.hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
}

.hero-particles .hero-particle {
    position: absolute;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.7), transparent);
    border-radius: 50%;
    animation: floatHeroParticle 25s linear infinite;
    opacity: 0;
}

.hero-particles .hero-particle:nth-child(1) {
    left: 15%;
    animation-delay: 0s;
    animation-duration: 30s;
}

.hero-particles .hero-particle:nth-child(2) {
    left: 35%;
    animation-delay: 5s;
    animation-duration: 28s;
    background: radial-gradient(circle, rgba(44, 95, 141, 0.7), transparent);
}

.hero-particles .hero-particle:nth-child(3) {
    left: 55%;
    animation-delay: 10s;
    animation-duration: 32s;
}

.hero-particles .hero-particle:nth-child(4) {
    left: 70%;
    animation-delay: 3s;
    animation-duration: 29s;
    background: radial-gradient(circle, rgba(44, 95, 141, 0.7), transparent);
}

.hero-particles .hero-particle:nth-child(5) {
    left: 85%;
    animation-delay: 8s;
    animation-duration: 31s;
}

.hero-particles .hero-particle:nth-child(6) {
    left: 25%;
    animation-delay: 12s;
    animation-duration: 27s;
    background: radial-gradient(circle, rgba(44, 95, 141, 0.7), transparent);
}

@keyframes floatHeroParticle {
    0% {
        transform: translateY(100vh) translateX(0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translateY(50vh) translateX(20px) scale(1);
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) translateX(-20px) scale(0.5);
        opacity: 0;
    }
}