/*=========================================
        ZHENG DA
        ANIMACIONES
==========================================*/


/*=========================
      VARIABLES
==========================*/

:root{

--animationSpeed:.7s;

}



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

.fade-up{

opacity:0;

transform:translateY(60px);

transition:
opacity .8s ease,
transform .8s ease;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}





.fade-left{

opacity:0;

transform:translateX(-60px);

transition:
opacity .8s ease,
transform .8s ease;

}

.fade-left.show{

opacity:1;

transform:translateX(0);

}





.fade-right{

opacity:0;

transform:translateX(60px);

transition:
opacity .8s ease,
transform .8s ease;

}

.fade-right.show{

opacity:1;

transform:translateX(0);

}





.fade-scale{

opacity:0;

transform:scale(.92);

transition:
opacity .8s ease,
transform .8s ease;

}

.fade-scale.show{

opacity:1;

transform:scale(1);

}





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

.hero-text{

animation:

heroText

1.2s ease;

}

.hero-image{

animation:

heroImage

1.6s ease;

}





@keyframes heroText{

from{

opacity:0;

transform:

translateY(40px);

}

to{

opacity:1;

transform:

translateY(0);

}

}





@keyframes heroImage{

from{

opacity:0;

transform:

translateX(100px)

scale(.85);

}

to{

opacity:1;

transform:

translateX(0)

scale(1);

}

}





/*=========================
    RAMEN FLOTANDO
==========================*/

.hero-image img{

animation:

floating

6s ease-in-out infinite;

}

@keyframes floating{

0%{

transform:

translateY(0);

}

25%{

transform:

translateY(-8px);

}

50%{

transform:

translateY(-15px);

}

75%{

transform:

translateY(-8px);

}

100%{

transform:

translateY(0);

}

}





/*=========================
      BOTONES
==========================*/

.primary{

position:relative;

overflow:hidden;

}





.primary::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.4),

transparent

);

transition:.8s;

}





.primary:hover::before{

left:120%;

}





.secondary{

transition:.35s;

}





.secondary:hover{

transform:

translateY(-4px);

}





/*=========================
    PRODUCTOS
==========================*/

.product-card{

transition:

transform .45s,

box-shadow .45s,

border-color .45s;

}





.product-card:hover{

transform:

translateY(-12px)

rotateX(2deg);

}





.product-card img{

transition:

transform .7s;

}





.product-card:hover img{

transform:

scale(1.08);

}





/*=========================
      BADGE
==========================*/

.badge{

animation:

pulse

2.5s infinite;

}





@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}





/*=========================
      CATEGORIAS
==========================*/

.category-slider a{

transition:

transform .35s,

background .35s,

box-shadow .35s;

}





.category-slider a:hover{

transform:

translateY(-10px)

scale(1.04);

}





/*=========================
      NAVBAR
==========================*/

header{

transition:

background .4s,

padding .4s,

box-shadow .4s;

}





header.scrolled{

background:

rgba(5,5,5,.92);

box-shadow:

0 8px 30px rgba(0,0,0,.35);

}





/*=========================
      MODAL
==========================*/

.modal{

transition:

opacity .35s,

visibility .35s;

}





.modal-card{

transform:

scale(.9);

transition:

transform .35s ease;

}





.modal.active

.modal-card{

transform:

scale(1);

}





/*=========================
    EFECTO DORADO
==========================*/

@keyframes glow{

0%{

box-shadow:

0 0 0 rgba(212,165,77,0);

}

50%{

box-shadow:

0 0 25px rgba(212,165,77,.30);

}

100%{

box-shadow:

0 0 0 rgba(212,165,77,0);

}

}





.product-card:hover{

animation:

glow

2s infinite;

}





/*=========================
      TITULOS
==========================*/

.section-title h2{

position:relative;

display:inline-block;

}





.section-title h2::after{

content:"";

position:absolute;

left:50%;

bottom:-10px;

transform:

translateX(-50%);

width:70px;

height:4px;

background:

linear-gradient(

90deg,

transparent,

#D4A54D,

transparent

);

border-radius:50px;

}





/*=========================
      SCROLL
==========================*/

@keyframes appear{

from{

opacity:0;

transform:

translateY(40px);

}

to{

opacity:1;

transform:

translateY(0);

}

}





.menu-section{

animation:

appear

1s ease;

}





/*=========================
    IMAGENES
==========================*/

.image{

overflow:hidden;

}





.image img{

transition:

transform .8s ease,

filter .6s ease;

}





.product-card:hover

.image img{

filter:

brightness(1.08)

contrast(1.08);

}





/*=========================
      LOGO
==========================*/

.logo img{

transition:

transform .5s;

}





.logo:hover img{

transform:

rotate(-10deg)

scale(1.1);

}





/*=========================
      ENLACES
==========================*/

nav a{

transition:

color .35s;

}





nav a:hover{

color:#D4A54D;

}





/*=========================
      FOOTER
==========================*/

.footer-grid a{

transition:

transform .3s,

color .3s;

}





.footer-grid a:hover{

transform:

translateX(5px);

}





/*=========================
    SCROLL SUAVE
==========================*/

html{

scroll-behavior:smooth;

}





/*=========================
      REDUCIR
ANIMACIONES
==========================*/

@media

(prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto;

}

}