@charset "utf-8";

/* =========================================================
AURORA LUMA - FINAL ANIMATIONS.CSS
Luxury Motion System
========================================================= */

/* =========================================================
HERO MOTION
========================================================= */

@keyframes heroZoom{
0%{
transform:scale(1);
}
100%{
transform:scale(1.02);
}
}

/* =========================================================
AURORA LIGHT MOVEMENT
========================================================= */

@keyframes auroraMove1{
0%{
transform:translate(0,0) scale(1);
}
100%{
transform:translate(120px,60px) scale(1.25);
}
}

@keyframes auroraMove2{
0%{
transform:translate(0,0) scale(1);
}
100%{
transform:translate(-140px,-80px) scale(1.2);
}
}

@keyframes auroraMove3{
0%{
transform:translate(0,0) scale(1);
}
100%{
transform:translate(80px,-60px) scale(1.15);
}
}

/* =========================================================
FLOATING PARTICLES
========================================================= */

@keyframes floatBall{
0%{
transform:translateY(0) translateX(0);
opacity:0;
}
10%{
opacity:1;
}
50%{
transform:translateY(-500px) translateX(50px);
opacity:0.8;
}
100%{
transform:translateY(-1100px) translateX(-30px);
opacity:0;
}
}

/* =========================================================
LUXURY FLOAT
========================================================= */

@keyframes luxuryFloat{
0%{
transform:translateY(0);
}
100%{
transform:translateY(-18px);
}
}

/* =========================================================
SOFT FADE UP
========================================================= */

@keyframes fadeUpLuxury{
0%{
opacity:0;
transform:translateY(24px);
}
100%{
opacity:1;
transform:translateY(0);
}
}

/* =========================================================
SOFT FADE IN
========================================================= */

@keyframes fadeInLuxury{
0%{
opacity:0;
}
100%{
opacity:1;
}
}

/* =========================================================
SUBTLE SCALE IN
========================================================= */

@keyframes scaleInLuxury{
0%{
opacity:0;
transform:scale(0.96);
}
100%{
opacity:1;
transform:scale(1);
}
}

/* =========================================================
DRAWER SLIDE
========================================================= */

@keyframes drawerSlideIn{
0%{
transform:translateX(40px);
opacity:0;
}
100%{
transform:translateX(0);
opacity:1;
}
}

/* =========================================================
APPLY MOTION HELPERS
========================================================= */

.product-card,
.related-product-card,
.recently-card,
.inspired-card{
animation:fadeUpLuxury 0.7s ease both;
}

.product-card:nth-child(2),
.related-product-card:nth-child(2),
.recently-card:nth-child(2),
.inspired-card:nth-child(2){
animation-delay:0.08s;
}

.product-card:nth-child(3),
.related-product-card:nth-child(3),
.recently-card:nth-child(3),
.inspired-card:nth-child(3){
animation-delay:0.14s;
}

.product-card:nth-child(4),
.related-product-card:nth-child(4),
.recently-card:nth-child(4),
.inspired-card:nth-child(4){
animation-delay:0.2s;
}

.category-content,
.hero-content,
.luxury-section-header,
.related-products-header{
animation:fadeUpLuxury 0.8s ease both;
}

.cart-drawer.active{
animation:drawerSlideIn 0.45s ease both;
}

/* =========================================================
LUXURY BUTTON MOTION
========================================================= */

button,
.hero-buttons a,
.campaign-left a,
.collection-overlay a,
.luxury-video-content a{
transition:
transform 0.35s ease,
opacity 0.35s ease,
background 0.35s ease,
color 0.35s ease,
border-color 0.35s ease,
box-shadow 0.35s ease;
}

button:hover,
.hero-buttons a:hover,
.campaign-left a:hover,
.collection-overlay a:hover,
.luxury-video-content a:hover{
transform:translateY(-2px);
}

/* =========================================================
REDUCED MOTION SUPPORT
========================================================= */

@media(prefers-reduced-motion:reduce){

*,
*::before,
*::after{
animation:none !important;
transition:none !important;
scroll-behavior:auto !important;
}

}