/*==================================================
DAYAL PARADISE V2
Global Animations
assets/css/animations.css
==================================================*/

/*==================================
DEFAULT REVEAL
==================================*/

[data-animate]{

    opacity:0;
    transform:translateY(60px);
    transition:
        opacity .8s ease,
        transform .8s ease;

}

[data-animate].active{

    opacity:1;
    transform:translateY(0);

}

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

.fade-in{

    animation:fadeIn .9s ease both;

}

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}

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

.fade-up{

    animation:fadeUp .9s ease both;

}

@keyframes fadeUp{

from{

opacity:0;
transform:translateY(50px);

}

to{

opacity:1;
transform:none;

}

}

/*==================================
DOWN
==================================*/

.fade-down{

    animation:fadeDown .8s ease both;

}

@keyframes fadeDown{

from{

opacity:0;
transform:translateY(-40px);

}

to{

opacity:1;
transform:none;

}

}

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

.fade-left{

    animation:fadeLeft .8s ease both;

}

@keyframes fadeLeft{

from{

opacity:0;
transform:translateX(-60px);

}

to{

opacity:1;
transform:none;

}

}

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

.fade-right{

    animation:fadeRight .8s ease both;

}

@keyframes fadeRight{

from{

opacity:0;
transform:translateX(60px);

}

to{

opacity:1;
transform:none;

}

}

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

.zoom-in{

    animation:zoomIn .8s ease both;

}

@keyframes zoomIn{

from{

opacity:0;
transform:scale(.82);

}

to{

opacity:1;
transform:scale(1);

}

}

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

.float{

    animation:float 5s ease-in-out infinite;

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

/*==================================
GLOW
==================================*/

.glow{

    animation:glow 3s ease infinite;

}

@keyframes glow{

0%,100%{

box-shadow:

0 0 0 rgba(216,179,106,0);

}

50%{

box-shadow:

0 0 35px rgba(216,179,106,.35);

}

}

/*==================================
SHIMMER
==================================*/

.shimmer{

    position:relative;
    overflow:hidden;

}

.shimmer::after{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:50%;
    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.18),

        transparent

    );

    animation:shimmer 4.5s linear infinite;

}

@keyframes shimmer{

100%{

left:160%;

}

}

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

.ripple{

    position:absolute;

    border-radius:50%;

    transform:scale(0);

    background:rgba(255,255,255,.35);

    animation:ripple .65s linear;

    pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}

/*==================================
LIVE PULSE
==================================*/

.live-pulse{

    position:relative;

}

.live-pulse::before{

    content:"";

    position:absolute;

    inset:-6px;

    border-radius:inherit;

    border:2px solid rgba(216,179,106,.35);

    animation:livePulse 2s infinite;

}

@keyframes livePulse{

0%{

opacity:1;
transform:scale(1);

}

100%{

opacity:0;
transform:scale(1.5);

}

}

/*==================================
HEARTBEAT
==================================*/

.heartbeat{

    animation:heartbeat 1.8s infinite;

}

@keyframes heartbeat{

0%,100%{

transform:scale(1);

}

20%{

transform:scale(1.12);

}

40%{

transform:scale(.96);

}

60%{

transform:scale(1.08);

}

}

/*==================================
ROTATE
==================================*/

.rotate{

    animation:rotate 12s linear infinite;

}

@keyframes rotate{

to{

transform:rotate(360deg);

}

}

/*==================================
BOUNCE
==================================*/

.bounce{

    animation:bounce 2.5s infinite;

}

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}

/*==================================
GRADIENT SHIFT
==================================*/

.gradient-animation{

    background-size:300% 300%;

    animation:gradientShift 10s ease infinite;

}

@keyframes gradientShift{

0%{

background-position:0 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0 50%;

}

}

/*==================================
TEXT SHINE
==================================*/

.gold-shine{

    background:

    linear-gradient(
        90deg,
        #b98b2c,
        #fff4cb,
        #d8b36a,
        #fff4cb,
        #b98b2c
    );

    background-size:300%;

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;

    animation:textShine 6s linear infinite;

}

@keyframes textShine{

100%{

background-position:300%;

}

}

/*==================================
CARD HOVER
==================================*/

.hover-lift{

    transition:

        transform .35s ease,
        box-shadow .35s ease;

}

.hover-lift:hover{

    transform:translateY(-10px);

    box-shadow:

    0 25px 55px rgba(0,0,0,.35);

}

/*==================================
SCALE
==================================*/

.scale-hover{

    transition:transform .35s ease;

}

.scale-hover:hover{

    transform:scale(1.04);

}

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

.parallax{

    will-change:transform;

}

/*==================================
CURSOR GLOW SUPPORT
==================================*/

.cursor-glow{

    position:relative;
    overflow:hidden;

}

.cursor-glow::before{

    content:"";

    position:absolute;

    width:240px;
    height:240px;

    left:var(--mx,50%);
    top:var(--my,50%);

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(216,179,106,.14),

        transparent 70%

    );

    opacity:0;

    transition:.35s;

    pointer-events:none;

}

.cursor-glow:hover::before{

    opacity:1;

}

/*==================================
STAGGER DELAYS
==================================*/

.delay-1{animation-delay:.1s;}
.delay-2{animation-delay:.2s;}
.delay-3{animation-delay:.3s;}
.delay-4{animation-delay:.4s;}
.delay-5{animation-delay:.5s;}
.delay-6{animation-delay:.6s;}
.delay-7{animation-delay:.7s;}
.delay-8{animation-delay:.8s;}

/*==================================
REDUCE MOTION
==================================*/

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

*,
*::before,
*::after{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}