/*==============================================================
    ANIMATIONS.CSS
    PART 1
    Premium Oil & Gas Corporate Website
==============================================================*/


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

.fade-in{
    opacity:0;
    animation:fadeIn 1s forwards;
}

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

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

.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:1s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

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

.fade-down{

    opacity:0;

    transform:translateY(-60px);

    transition:1s ease;

}

.fade-down.show{

    opacity:1;

    transform:translateY(0);

}

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

.fade-left{

    opacity:0;

    transform:translateX(-70px);

    transition:1s ease;

}

.fade-left.show{

    opacity:1;

    transform:translateX(0);

}

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

.fade-right{

    opacity:0;

    transform:translateX(70px);

    transition:1s ease;

}

.fade-right.show{

    opacity:1;

    transform:translateX(0);

}

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

.zoom-in{

    opacity:0;

    transform:scale(.85);

    transition:1s ease;

}

.zoom-in.show{

    opacity:1;

    transform:scale(1);

}

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

.zoom-out{

    opacity:0;

    transform:scale(1.15);

    transition:1s ease;

}

.zoom-out.show{

    opacity:1;

    transform:scale(1);

}

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

.rotate-in{

    opacity:0;

    transform:rotate(-15deg) scale(.9);

    transition:1s ease;

}

.rotate-in.show{

    opacity:1;

    transform:rotate(0) scale(1);

}

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

.rotate-left{

    opacity:0;

    transform:rotateY(-90deg);

    transform-origin:left center;

    transition:1s ease;

}

.rotate-left.show{

    opacity:1;

    transform:rotateY(0);

}

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

.rotate-right{

    opacity:0;

    transform:rotateY(90deg);

    transform-origin:right center;

    transition:1s ease;

}

.rotate-right.show{

    opacity:1;

    transform:rotateY(0);

}

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

.scale-up{

    opacity:0;

    transform:scale(.7);

    transition:.9s ease;

}

.scale-up.show{

    opacity:1;

    transform:scale(1);

}

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

.scale-down{

    opacity:0;

    transform:scale(1.3);

    transition:1s ease;

}

.scale-down.show{

    opacity:1;

    transform:scale(1);

}

/*==============================================================
BLUR REVEAL
==============================================================*/

.blur-in{

    opacity:0;

    filter:blur(10px);

    transition:1.2s ease;

}

.blur-in.show{

    opacity:1;

    filter:blur(0);

}

/*==============================================================
STAGGER HELPERS
==============================================================*/

.delay-1{
    transition-delay:.1s;
}

.delay-2{
    transition-delay:.2s;
}

.delay-3{
    transition-delay:.3s;
}

.delay-4{
    transition-delay:.4s;
}

.delay-5{
    transition-delay:.5s;
}

.delay-6{
    transition-delay:.6s;
}

.delay-7{
    transition-delay:.7s;
}

.delay-8{
    transition-delay:.8s;
}

/*==============================================================
FAST / NORMAL / SLOW
==============================================================*/

.speed-fast{
    transition-duration:.5s;
}

.speed-normal{
    transition-duration:1s;
}

.speed-slow{
    transition-duration:1.6s;
}

/*==============================================================
INITIAL HIDDEN STATE
==============================================================*/

[data-animate]{

    opacity:0;

    visibility:hidden;

}

[data-animate].show{

    opacity:1;

    visibility:visible;

}
/*==============================================================
    ANIMATIONS.CSS
    PART 2A
    Hover & Interactive Effects
==============================================================*/


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

.float{
    animation:floatAnimation 4s ease-in-out infinite;
}

.float-slow{
    animation:floatAnimation 7s ease-in-out infinite;
}

.float-fast{
    animation:floatAnimation 2.5s ease-in-out infinite;
}

@keyframes floatAnimation{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-15px);
    }

    100%{
        transform:translateY(0);
    }

}


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

.hover-lift{

    transition:.4s ease;

}

.hover-lift:hover{

    transform:translateY(-10px);

}


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

.hover-scale{

    transition:.35s ease;

}

.hover-scale:hover{

    transform:scale(1.05);

}


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

.hover-rotate{

    transition:.45s ease;

}

.hover-rotate:hover{

    transform:rotate(4deg);

}


/*==============================================================
PREMIUM CARD
==============================================================*/

.card-hover{

    position:relative;

    overflow:hidden;

    transition:.45s;

}

.card-hover:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 60px rgba(0,0,0,.30);

}


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

.image-hover{

    overflow:hidden;

}

.image-hover img{

    transition:.7s ease;

}

.image-hover:hover img{

    transform:scale(1.12);

}


/*==============================================================
IMAGE DARKEN
==============================================================*/

.image-dark{

    position:relative;

    overflow:hidden;

}

.image-dark::after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.25);

    opacity:0;

    transition:.4s;

}

.image-dark:hover::after{

    opacity:1;

}


/*==============================================================
SHINE EFFECT
==============================================================*/

.shine{

    position:relative;

    overflow:hidden;

}

.shine::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:skewX(-25deg);

}

.shine:hover::before{

    animation:shineMove .9s linear;

}

@keyframes shineMove{

    from{

        left:-120%;

    }

    to{

        left:150%;

    }

}


/*==============================================================
GLASS HOVER
==============================================================*/

.glass-hover{

    transition:.45s;

    backdrop-filter:blur(12px);

}

.glass-hover:hover{

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

    border-color:rgba(212,175,55,.45);

}


/*==============================================================
ICON POP
==============================================================*/

.icon-pop i{

    transition:.35s;

}

.icon-pop:hover i{

    transform:scale(1.2) rotate(10deg);

}


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

.border-glow{

    position:relative;

}

.border-glow:hover{

    border-color:var(--primary);

    box-shadow:0 0 25px rgba(212,175,55,.35);

}


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

.btn-slide{

    position:relative;

    overflow:hidden;

}

.btn-slide::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

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

    transition:.45s;

}

.btn-slide:hover::before{

    left:100%;

}


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

.text-hover{

    transition:.35s;

}

.text-hover:hover{

    color:var(--primary);

}


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

.icon-bounce:hover i{

    animation:bounceIcon .7s;

}

@keyframes bounceIcon{

    0%,100%{

        transform:translateY(0);

    }

    30%{

        transform:translateY(-8px);

    }

    60%{

        transform:translateY(4px);

    }

}


/*==============================================================
UNDERLINE ANIMATION
==============================================================*/

.link-underline{

    position:relative;

}

.link-underline::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-5px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.35s;

}

.link-underline:hover::after{

    width:100%;

}
/*==============================================================
    ANIMATIONS.CSS
    PART 2B
    Premium Interactive Effects
==============================================================*/


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

.btn-ripple{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.btn-ripple::after{

    content:"";

    position:absolute;

    width:20px;
    height:20px;

    border-radius:50%;

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

    transform:scale(0);

    opacity:0;

    pointer-events:none;

    left:50%;
    top:50%;

}

.btn-ripple:hover::after{

    animation:rippleEffect .8s ease-out;

}

@keyframes rippleEffect{

    0%{

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

        opacity:.8;

    }

    100%{

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

        opacity:0;

    }

}


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

.gold-pulse{

    animation:goldPulse 2.5s infinite;

}

@keyframes goldPulse{

    0%{

        box-shadow:0 0 0 0 rgba(212,175,55,.5);

    }

    70%{

        box-shadow:0 0 0 18px rgba(212,175,55,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(212,175,55,0);

    }

}


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

.pulse-ring{

    position:relative;

}

.pulse-ring::before{

    content:"";

    position:absolute;

    inset:-10px;

    border:2px solid var(--primary);

    border-radius:inherit;

    opacity:0;

    animation:pulseRing 2.8s infinite;

}

@keyframes pulseRing{

    from{

        transform:scale(.85);

        opacity:.8;

    }

    to{

        transform:scale(1.25);

        opacity:0;

    }

}


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

.magnetic{

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.magnetic:hover{

    transform:translateY(-5px) scale(1.03);

    box-shadow:0 18px 40px rgba(212,175,55,.30);

}


/*==============================================================
GRADIENT BORDER
==============================================================*/

.gradient-border{

    position:relative;

    border:1px solid transparent;

    background:
        linear-gradient(#081C2D,#081C2D) padding-box,
        linear-gradient(
            135deg,
            var(--primary),
            #ffffff,
            var(--primary)
        ) border-box;

}


/*==============================================================
SPARKLE
==============================================================*/

.sparkle{

    position:relative;

    overflow:hidden;

}

.sparkle::before{

    content:"✦";

    position:absolute;

    right:20px;

    top:15px;

    color:var(--primary);

    opacity:0;

    transition:.4s;

}

.sparkle:hover::before{

    opacity:1;

    transform:rotate(180deg) scale(1.3);

}


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

.neon-hover{

    transition:.35s;

}

.neon-hover:hover{

    box-shadow:
        0 0 10px rgba(212,175,55,.35),
        0 0 25px rgba(212,175,55,.25),
        0 0 45px rgba(212,175,55,.18);

}


/*==============================================================
ROTATING BORDER
==============================================================*/

.rotate-border{

    position:relative;

    overflow:hidden;

}

.rotate-border::before{

    content:"";

    position:absolute;

    inset:-2px;

    background:conic-gradient(

        from 0deg,

        transparent,

        var(--primary),

        transparent,

        var(--primary),

        transparent

    );

    animation:borderRotate 4s linear infinite;

    z-index:-1;

}

@keyframes borderRotate{

    to{

        transform:rotate(360deg);

    }

}


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

.text-shimmer{

    background:linear-gradient(
        90deg,
        #ffffff,
        var(--primary),
        #ffffff
    );

    background-size:200% auto;

    color:transparent;

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

    animation:textShimmer 3s linear infinite;

}

@keyframes textShimmer{

    to{

        background-position:200% center;

    }

}


/*==============================================================
SOFT SHADOW
==============================================================*/

.shadow-hover{

    transition:.35s;

}

.shadow-hover:hover{

    box-shadow:0 25px 55px rgba(0,0,0,.28);

}


/*==============================================================
TILT
==============================================================*/

.hover-tilt{

    transition:transform .35s ease;

}

.hover-tilt:hover{

    transform:perspective(900px)
              rotateX(5deg)
              rotateY(-5deg);

}


/*==============================================================
OPACITY
==============================================================*/

.hover-fade{

    transition:.35s;

}

.hover-fade:hover{

    opacity:.85;

}


/*==============================================================
SMALL UTILITIES
==============================================================*/

.transition{
    transition:.35s ease;
}

.pointer{
    cursor:pointer;
}

.no-select{
    user-select:none;
}

.overflow-hidden{
    overflow:hidden;
}

.rounded-xl{
    border-radius:24px;
}

.rounded-2xl{
    border-radius:32px;
}

.will-change{
    will-change:transform,opacity;
}
/*==============================================================
    ANIMATIONS.CSS
    PART 3
    Loading • Particles • Utilities • Accessibility
==============================================================*/


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

.loader{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#04111F;

    z-index:99999;

}

.loader-circle{

    width:80px;

    height:80px;

    border-radius:50%;

    border:6px solid rgba(255,255,255,.08);

    border-top-color:var(--primary);

    animation:loaderSpin 1s linear infinite;

}

@keyframes loaderSpin{

    to{

        transform:rotate(360deg);

    }

}


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

.pulse-dot{

    width:14px;

    height:14px;

    border-radius:50%;

    background:var(--primary);

    animation:pulseDot 1.8s infinite;

}

@keyframes pulseDot{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.6);

        opacity:.45;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}


/*==============================================================
WAVE
==============================================================*/

.wave{

    animation:waveAnimation 4s ease-in-out infinite;

}

@keyframes waveAnimation{

    0%,100%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(15px);

    }

}


/*==============================================================
ROTATING ICON
==============================================================*/

.rotate{

    animation:rotate360 8s linear infinite;

}

@keyframes rotate360{

    to{

        transform:rotate(360deg);

    }

}


/*==============================================================
BOB
==============================================================*/

.bob{

    animation:bobAnimation 3s ease-in-out infinite;

}

@keyframes bobAnimation{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}


/*==============================================================
BACKGROUND PARTICLES
==============================================================*/

.particles{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.particles span{

    position:absolute;

    display:block;

    width:8px;

    height:8px;

    border-radius:50%;

    background:rgba(212,175,55,.35);

    animation:particleFloat linear infinite;

}

@keyframes particleFloat{

    from{

        transform:translateY(0) scale(.5);

        opacity:0;

    }

    30%{

        opacity:1;

    }

    to{

        transform:translateY(-120vh) scale(1.5);

        opacity:0;

    }

}


/*==============================================================
GRADIENT MOTION
==============================================================*/

.gradient-flow{

    background-size:300% 300%;

    animation:gradientFlow 8s ease infinite;

}

@keyframes gradientFlow{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}


/*==============================================================
MARQUEE
==============================================================*/

.marquee{

    display:flex;

    gap:60px;

    width:max-content;

    animation:marqueeMove 28s linear infinite;

}

.marquee:hover{

    animation-play-state:paused;

}

@keyframes marqueeMove{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}


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

.img-fade{

    transition:.6s ease;

}

.img-fade:hover{

    filter:brightness(1.08);

}


/*==============================================================
SKEW HOVER
==============================================================*/

.hover-skew{

    transition:.35s;

}

.hover-skew:hover{

    transform:skew(-2deg);

}


/*==============================================================
OPACITY REVEAL
==============================================================*/

.opacity-hover{

    transition:.3s;

}

.opacity-hover:hover{

    opacity:.8;

}


/*==============================================================
SCROLLBAR
==============================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#081C2D;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#E8C766;

}


/*==============================================================
SELECTION
==============================================================*/

::selection{

    background:var(--primary);

    color:#111;

}


/*==============================================================
FOCUS
==============================================================*/

:focus-visible{

    outline:2px solid var(--primary);

    outline-offset:3px;

}


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

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

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

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}


/*==============================================================
PRINT
==============================================================*/

@media print{

*{

    animation:none !important;

    box-shadow:none !important;

}

}


/*==============================================================
END OF FILE
==============================================================*/