/*======================================================
hrī Collection
Animations
Version 1.0
======================================================*/


/*=========================================
GLOBAL TRANSITIONS
=========================================*/

*{

transition:

color .3s ease,

background-color .3s ease,

border-color .3s ease;

}

a,
button,
.card,
.product-card,
.feature-card,
.benefit-card,
.timeline-card,
.gallery-item img{

transition:all .45s cubic-bezier(.22,.61,.36,1);

}


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

.fade-up{

opacity:0;

transform:translateY(40px);

transition:

opacity .9s ease,

transform .9s ease;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}


/*=========================================
FADE LEFT
=========================================*/

.fade-left{

opacity:0;

transform:translateX(-60px);

transition:

opacity .9s ease,

transform .9s ease;

}

.fade-left.show{

opacity:1;

transform:none;

}


/*=========================================
FADE RIGHT
=========================================*/

.fade-right{

opacity:0;

transform:translateX(60px);

transition:

opacity .9s ease,

transform .9s ease;

}

.fade-right.show{

opacity:1;

transform:none;

}


/*=========================================
ZOOM IN
=========================================*/

.zoom{

opacity:0;

transform:scale(.92);

transition:

opacity .9s ease,

transform .9s ease;

}

.zoom.show{

opacity:1;

transform:scale(1);

}


/*=========================================
HOVER LIFT
=========================================*/

.hover-lift{

transition:

transform .35s ease,

box-shadow .35s ease;

}

.hover-lift:hover{

transform:translateY(-8px);

box-shadow:

0 20px 45px rgba(0,0,0,.08);

}


/*=========================================
IMAGE ZOOM
=========================================*/

.image-zoom{

overflow:hidden;

border-radius:24px;

}

.image-zoom img{

transition:transform 1.2s ease;

}

.image-zoom:hover img{

transform:scale(1.08);

}


/*=========================================
BUTTON
=========================================*/

.btn{

transition:

transform .3s ease,

box-shadow .3s ease;

}

.btn:hover{

transform:translateY(-3px);

box-shadow:

0 12px 24px rgba(0,0,0,.12);

}


/*=========================================
NAVIGATION
=========================================*/

nav a{

position:relative;

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--gold);

transition:.35s;

}

nav a:hover::after{

width:100%;

}


/*=========================================
FLOATING LEAF
=========================================*/

.float{

animation:

floating 6s ease-in-out infinite;

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}


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

.hero-content{

animation:

heroFade 1.2s ease forwards;

}

.hero-image{

animation:

heroImage 1.3s ease forwards;

}

@keyframes heroFade{

from{

opacity:0;

transform:

translateY(40px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes heroImage{

from{

opacity:0;

transform:

translateX(40px);

}

to{

opacity:1;

transform:none;

}

}


/*=========================================
SECTION DIVIDER
=========================================*/

.section{

position:relative;

}

.section::after{

content:"";

position:absolute;

left:50%;

bottom:0;

transform:translateX(-50%);

width:80px;

height:1px;

background:

rgba(176,138,88,.18);

}


/*=========================================
PARALLAX IMAGE
=========================================*/

.parallax{

transform:

translateZ(0);

will-change:transform;

}


/*=========================================
GALLERY
=========================================*/

.gallery-item{

overflow:hidden;

}

.gallery-item img{

transition:

transform 1s ease,

filter .5s ease;

}

.gallery-item:hover img{

transform:scale(1.08);

filter:brightness(1.03);

}


/*=========================================
TIMELINE
=========================================*/

.timeline-card{

transition:

transform .35s ease,

box-shadow .35s ease;

}

.timeline-card:hover{

transform:translateY(-8px);

}


/*=========================================
FAQ
=========================================*/

details{

transition:

background .35s ease;

}

details[open]{

background:#ffffff;

}


/*=========================================
SMOOTH APPEAR
=========================================*/

.appear{

animation:

appear .9s ease forwards;

}

@keyframes appear{

0%{

opacity:0;

}

100%{

opacity:1;

}

}


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

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

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto;

}

}