/* ===== SKA BEAUTY ANIMATIONS ===== */

/* ANIMACIÓN DE ENTRADA SUAVE */
section, header, footer{
    animation: fadeIn 0.8s ease-in-out;
}

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

/* ANIMACIÓN HERO */
.hero h2{
    animation: slideDown 1s ease;
}

.hero p{
    animation: slideUp 1.2s ease;
}

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

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

/* TARJETAS CON ANIMACIÓN */
.product-card, .brand-card{
    animation: popIn 0.6s ease;
}

@keyframes popIn{
    from{
        transform: scale(0.8);
        opacity: 0;
    }
    to{
        transform: scale(1);
        opacity: 1;
    }
}

/* EFECTO BRILLO EN BOTONES */
button{
    position: relative;
    overflow: hidden;
}

button::after{
    content: "";
    position: absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background: rgba(255,255,255,0.3);
    transform: skewX(-25deg);
}

button:hover::after{
    left: 120%;
    transition: 0.6s;
}

/* HOVER SUAVE EN LINKS */
nav ul li a{
    position: relative;
}

nav ul li a::after{
    content: "";
    position: absolute;
    left:0;
    bottom:-5px;
    width:0;
    height:2px;
    background:white;
    transition:0.3s;
}

nav ul li a:hover::after{
    width:100%;
}