/*==================================================
HYDRO & VOLT GROUP
ANIMATIONS.CSS
==================================================*/


:root{

    --animation-speed:.8s;

    --animation-fast:.45s;

    --animation-slow:1.3s;

}


/*==================================================
DEFAULT HIDDEN STATES
==================================================*/

.fade-up,
.fade-left,
.fade-right,
.zoom-in,
.zoom-out,
.blur-in,
.rotate-in{

    opacity:0;

    transition:
    opacity .9s ease,
    transform .9s ease,
    filter .9s ease;

    will-change:
    transform,
    opacity;

}


.fade-up{

    transform:translateY(70px);

}


.fade-left{

    transform:translateX(-70px);

}


.fade-right{

    transform:translateX(70px);

}


.zoom-in{

    transform:scale(.86);

}


.zoom-out{

    transform:scale(1.12);

}


.blur-in{

    filter:blur(15px);

}


.rotate-in{

    transform:
    rotate(-8deg)
    scale(.92);

}


/*==================================================
VISIBLE
==================================================*/

.show{

    opacity:1 !important;

    transform:none !important;

    filter:none !important;

}


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

.ripple{

    position:relative;

    overflow:hidden;

}


.ripple-circle{

    position:absolute;

    border-radius:50%;

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

    transform:scale(0);

    animation:rippleEffect .7s linear;

    pointer-events:none;

}


@keyframes rippleEffect{

    to{

        transform:scale(4);

        opacity:0;

    }

}


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

.float{

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

}


.float-slow{

    animation:
    floating 8s ease-in-out infinite;

}


.float-fast{

    animation:
    floating 3.2s ease-in-out infinite;

}


@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}


/*==================================================
ROTATION
==================================================*/

.rotate{

    animation:
    rotateSlow 18s linear infinite;

}


.rotate-fast{

    animation:
    rotateFast 5s linear infinite;

}


@keyframes rotateSlow{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}


@keyframes rotateFast{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(-360deg);

    }

}


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

.pulse{

    animation:
    pulseAnimation 2.2s infinite;

}


@keyframes pulseAnimation{

    0%{

        transform:scale(1);

        box-shadow:0 0 0 0 rgba(201,164,90,.45);

    }

    70%{

        transform:scale(1.05);

        box-shadow:0 0 0 24px rgba(201,164,90,0);

    }

    100%{

        transform:scale(1);

        box-shadow:0 0 0 0 rgba(201,164,90,0);

    }

}


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

.bounce{

    animation:
    bounceAnimation
    2.5s infinite;

}


@keyframes bounceAnimation{

    0%,20%,50%,80%,100%{

        transform:translateY(0);

    }

    40%{

        transform:translateY(-18px);

    }

    60%{

        transform:translateY(-8px);

    }

}


/*==================================================
SHAKE
==================================================*/

.shake:hover{

    animation:
    shakeAnimation
    .55s;

}


@keyframes shakeAnimation{

    0%{transform:translateX(0);}
    20%{transform:translateX(-6px);}
    40%{transform:translateX(6px);}
    60%{transform:translateX(-5px);}
    80%{transform:translateX(5px);}
    100%{transform:translateX(0);}

}


/*==================================================
ICON SPIN
==================================================*/

.icon-spin:hover i{

    animation:
    rotateFast .7s linear;

}


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

.hover-lift{

    transition:
    .4s;

}

.hover-lift:hover{

    transform:
    translateY(-12px);

    box-shadow:
    0 30px 80px rgba(0,0,0,.35);

}


.hover-grow{

    transition:.35s;

}

.hover-grow:hover{

    transform:scale(1.04);

}


.hover-shine{

    position:relative;

    overflow:hidden;

}


.hover-shine::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

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

    transparent

    );

    transform:skewX(-25deg);

}


.hover-shine:hover::before{

    animation:
    shineAnimation
    .9s;

}


@keyframes shineAnimation{

    from{

        left:-120%;

    }

    to{

        left:150%;

    }

}


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

.text-glow{

    animation:
    textGlow
    2.8s infinite;

}


@keyframes textGlow{

    0%{

        text-shadow:none;

    }

    50%{

        text-shadow:

        0 0 18px rgba(201,164,90,.45);

    }

    100%{

        text-shadow:none;

    }

}


.typewriter{

    overflow:hidden;

    white-space:nowrap;

    border-right:2px solid var(--gold);

    animation:

    typing 4s steps(40),

    blink .7s infinite;

}


@keyframes typing{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}


@keyframes blink{

    50%{

        border-color:transparent;

    }

}
/*==================================================
ANIMATED GRADIENTS
==================================================*/

.animated-gradient{

    background:
    linear-gradient(
        120deg,
        #090909,
        #1b1710,
        #090909,
        #20190d
    );

    background-size:300% 300%;

    animation:
    gradientFlow 12s ease infinite;

}


.gold-gradient-text{

    background:
    linear-gradient(
        90deg,
        #9f7d3f,
        #f4d58d,
        #b78d43,
        #f7e3ad
    );

    background-size:240% auto;

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

    animation:
    goldTextFlow 5s linear infinite;

}


@keyframes gradientFlow{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}


@keyframes goldTextFlow{

    to{

        background-position:240% center;

    }

}


/*==================================================
BACKGROUND GRID
==================================================*/

.animated-grid{

    position:relative;

    isolation:isolate;

}


.animated-grid::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    opacity:.15;

    background-image:

    linear-gradient(
        rgba(201,164,90,.18) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(201,164,90,.18) 1px,
        transparent 1px
    );

    background-size:
    55px 55px;

    animation:
    gridMovement
    18s linear infinite;

}


@keyframes gridMovement{

    from{

        background-position:
        0 0,
        0 0;

    }

    to{

        background-position:
        55px 55px,
        55px 55px;

    }

}


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

.glow-orb{

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(201,164,90,.25),
        rgba(201,164,90,0) 70%
    );

    filter:blur(12px);

    pointer-events:none;

    animation:
    orbMovement 10s ease-in-out infinite;

}


.glow-orb.small{

    width:250px;

    height:250px;

}


@keyframes orbMovement{

    0%{

        transform:
        translate3d(0,0,0)
        scale(1);

    }

    50%{

        transform:
        translate3d(30px,-35px,0)
        scale(1.12);

    }

    100%{

        transform:
        translate3d(0,0,0)
        scale(1);

    }

}


/*==================================================
MOUSE LIGHT
==================================================*/

.mouse-light{

    position:fixed;

    z-index:2;

    width:500px;

    height:500px;

    border-radius:50%;

    pointer-events:none;

    opacity:.11;

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

    background:
    radial-gradient(
        circle,
        rgba(201,164,90,.4),
        rgba(201,164,90,0) 68%
    );

    transition:
    opacity .3s ease;

}


body.menu-open .mouse-light{

    opacity:0;

}


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

.hero-content > *{

    opacity:0;

    transform:
    translateY(35px);

    animation:
    heroElementIn
    .9s ease forwards;

}


.hero-content > *:nth-child(1){

    animation-delay:.15s;

}


.hero-content > *:nth-child(2){

    animation-delay:.3s;

}


.hero-content > *:nth-child(3){

    animation-delay:.45s;

}


.hero-content > *:nth-child(4){

    animation-delay:.6s;

}


.hero-content > *:nth-child(5){

    animation-delay:.75s;

}


@keyframes heroElementIn{

    to{

        opacity:1;

        transform:none;

    }

}


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

.hero-background img,
.hero > video{

    animation:
    heroZoom
    18s ease-in-out infinite alternate;

}


@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}


/*==================================================
PRELOADER
==================================================*/

#preloader{

    position:fixed;

    inset:0;

    z-index:99999;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#080808;

    transition:

    opacity .6s ease,

    visibility .6s ease;

}


#preloader.loaded{

    opacity:0;

    visibility:hidden;

}


.loader-logo{

    position:relative;

    width:220px;

    padding-bottom:24px;

}


.loader-logo img{

    width:100%;

    animation:

    loaderLogoPulse
    1.8s ease-in-out infinite;

}


.loader-logo::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:2px;

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

}


.loader-logo::before{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    z-index:2;

    width:35%;

    height:2px;

    background:var(--gold);

    animation:
    loaderBar
    1.5s ease-in-out infinite;

}


@keyframes loaderLogoPulse{

    0%,
    100%{

        opacity:.55;

        transform:scale(.98);

    }

    50%{

        opacity:1;

        transform:scale(1.02);

    }

}


@keyframes loaderBar{

    0%{

        left:0;

        width:15%;

    }

    50%{

        left:35%;

        width:55%;

    }

    100%{

        left:85%;

        width:15%;

    }

}


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

.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    z-index:10001;

    width:0;

    height:3px;

    background:
    linear-gradient(
        90deg,
        #a67e35,
        #f4d58d
    );

    box-shadow:
    0 0 15px
    rgba(201,164,90,.5);

}


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

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:35px;

    z-index:5;

    transform:
    translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    color:#fff;

    font-size:11px;

    letter-spacing:2px;

    text-transform:uppercase;

}


.scroll-indicator::after{

    content:"";

    width:1px;

    height:55px;

    background:
    linear-gradient(
        180deg,
        var(--gold),
        transparent
    );

    animation:
    scrollLine
    1.8s ease-in-out infinite;

}


@keyframes scrollLine{

    0%{

        transform:
        scaleY(0);

        transform-origin:top;

        opacity:0;

    }

    45%{

        transform:
        scaleY(1);

        transform-origin:top;

        opacity:1;

    }

    55%{

        transform:
        scaleY(1);

        transform-origin:bottom;

        opacity:1;

    }

    100%{

        transform:
        scaleY(0);

        transform-origin:bottom;

        opacity:0;

    }

}


/*==================================================
PARTNER LOGO AUTO SCROLL
==================================================*/

.partner-autoscroll{

    display:flex;

    width:max-content;

    animation:
    partnerMarquee
    32s linear infinite;

}


.partner-autoscroll:hover{

    animation-play-state:paused;

}


@keyframes partnerMarquee{

    from{

        transform:
        translateX(0);

    }

    to{

        transform:
        translateX(-35%);

    }

}


/*==================================================
TESTIMONIAL SLIDER
==================================================*/

.js-testimonial-slider{

    position:relative;

    min-height:260px;

}


.js-testimonial-slider > *{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transform:
    translateX(45px);

    transition:

    opacity .6s ease,

    transform .6s ease,

    visibility .6s ease;

}


.js-testimonial-slider > *.active{

    position:relative;

    opacity:1;

    visibility:visible;

    transform:none;

}


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

.magnetic{

    transition:
    transform .18s ease;

}


/*==================================================
IMAGE REVEAL
==================================================*/

.image-reveal{

    position:relative;

    overflow:hidden;

}


.image-reveal::after{

    content:"";

    position:absolute;

    inset:0;

    background:var(--gold);

    transform:
    scaleX(1);

    transform-origin:right;

    transition:
    transform 1s
    cubic-bezier(.77,0,.18,1);

}


.image-reveal.show::after{

    transform:
    scaleX(0);

}


/*==================================================
SECTION LINE
==================================================*/

.animated-line{

    width:0;

    height:2px;

    background:var(--gold);

    transition:
    width 1.2s ease;

}


.animated-line.show{

    width:100%;

}


/*==================================================
CARD STAGGER
==================================================*/

.stagger > *{

    opacity:0;

    transform:
    translateY(35px);

}


.stagger.show > *{

    animation:
    staggerItemIn
    .7s ease forwards;

}


.stagger.show > *:nth-child(1){

    animation-delay:.05s;

}


.stagger.show > *:nth-child(2){

    animation-delay:.12s;

}


.stagger.show > *:nth-child(3){

    animation-delay:.19s;

}


.stagger.show > *:nth-child(4){

    animation-delay:.26s;

}


.stagger.show > *:nth-child(5){

    animation-delay:.33s;

}


.stagger.show > *:nth-child(6){

    animation-delay:.4s;

}


.stagger.show > *:nth-child(7){

    animation-delay:.47s;

}


.stagger.show > *:nth-child(8){

    animation-delay:.54s;

}


@keyframes staggerItemIn{

    to{

        opacity:1;

        transform:none;

    }

}


/*==================================================
HEADER TRANSITIONS
==================================================*/

.header{

    transition:

    transform .35s ease,

    background .35s ease,

    box-shadow .35s ease;

}


.header-hidden{

    transform:
    translateY(-110%);

}


.header.scrolled{

    animation:
    headerDrop
    .45s ease;

}


@keyframes headerDrop{

    from{

        transform:
        translateY(-15px);

        opacity:.6;

    }

    to{

        transform:none;

        opacity:1;

    }

}


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

#topButton{

    opacity:0;

    visibility:hidden;

    transform:

    translateY(20px)
    scale(.9);

    transition:.35s ease;

}


#topButton.active{

    opacity:1;

    visibility:visible;

    transform:none;

}


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

.whatsapp-button{

    animation:
    whatsappPulse
    2.5s infinite;

}


@keyframes whatsappPulse{

    0%{

        box-shadow:
        0 0 0 0
        rgba(37,211,102,.45);

    }

    70%{

        box-shadow:
        0 0 0 20px
        rgba(37,211,102,0);

    }

    100%{

        box-shadow:
        0 0 0 0
        rgba(37,211,102,0);

    }

}


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

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

    *,

    *::before,

    *::after{

        scroll-behavior:auto !important;

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

    }


    .fade-up,
    .fade-left,
    .fade-right,
    .zoom-in,
    .zoom-out,
    .blur-in,
    .rotate-in{

        opacity:1;

        transform:none;

        filter:none;

    }


    .hero-content > *{

        opacity:1;

        transform:none;

    }


    .mouse-light{

        display:none;

    }

}


/*==================================================
JAVASCRIPT REDUCED MOTION CLASS
==================================================*/

.reduced-motion *,

.reduced-motion *::before,

.reduced-motion *::after{

    animation-duration:.01ms !important;

    animation-iteration-count:1 !important;

    transition-duration:.01ms !important;

}


/*==================================================
MOBILE OPTIMIZATION
==================================================*/

@media(max-width:768px){

    .mouse-light{

        display:none;

    }


    .hero-background img,
    .hero > video{

        animation:none;

    }


    .glow-orb{

        width:260px;

        height:260px;

    }


    .partner-autoscroll{

        animation-duration:24s;

    }

}


/*==================================================
END ANIMATIONS.CSS
==================================================*/