/*==========================================================
    AURA DIGITAL
    animations.css
==========================================================*/
@keyframes logoPulse{

    0%{

        transform:scale(1);

        filter:drop-shadow(0 0 15px rgba(212,175,55,.2));

    }

    50%{

        transform:scale(1.05);

        filter:drop-shadow(0 0 40px rgba(212,175,55,.5));

    }

    100%{

        transform:scale(1);

    }

}

.loader img{

    animation:

    logoPulse 2s infinite;

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

*{
    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
}

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

@keyframes float{

    0%{
        transform:translateY(0px);
    }

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

    100%{
        transform:translateY(0px);
    }

}

/* ===========================
   GOLD BUTTON SHINE
=========================== */

@keyframes shine{

    from{

        left:-120%;

    }

    to{

        left:130%;

    }

}

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

@keyframes glow{

    0%{

        box-shadow:
        0 0 10px rgba(212,175,55,.15);

    }

    50%{

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

    }

    100%{

        box-shadow:
        0 0 10px rgba(212,175,55,.15);

    }

}

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

@keyframes heroTitle{

    from{

        opacity:0;

        transform:

        translateY(40px);

    }

    to{

        opacity:1;

        transform:

        translateY(0);

    }

}

.hero h1{

    animation:

    heroTitle 1s ease;

}

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

@keyframes heroText{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero p{

    animation:

    heroText 1.2s ease;

}

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

@keyframes buttonPop{

    0%{

        transform:scale(.8);

        opacity:0;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

.hero-buttons{

    animation:

    buttonPop 1.3s ease;

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-up{

    animation:

    fadeUp .9s ease;

}

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

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.fade-left{

    animation:

    fadeLeft .9s ease;

}

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

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.fade-right{

    animation:

    fadeRight .9s ease;

}

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

@keyframes zoomIn{

    from{

        transform:scale(.75);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

.zoom{

    animation:

    zoomIn .8s ease;

}

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

.service-card:hover,
.platform-card:hover,
.review-card:hover,
.portfolio-card:hover,
.stat-card:hover{

    animation:

    cardFloat .45s ease forwards;

}

@keyframes cardFloat{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-12px);

    }

}

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

.service-card i,
.platform-card i{

    transition:.45s;

}

.service-card:hover i,
.platform-card:hover i{

    transform:

    rotate(-8deg)

    scale(1.08);

}

/* ===========================
   GOLDEN BORDER
=========================== */

@keyframes borderGlow{

    0%{

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

    }

    50%{

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

    }

    100%{

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

    }

}

.glow-border{

    animation:

    borderGlow 3s infinite;

}

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

.whatsapp{

    animation:

    whatsappPulse 2.2s infinite;

}

@keyframes whatsappPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.1);

    }

    100%{

        transform:scale(1);

    }

}

/* ===========================
   COUNTER POP
=========================== */

.counter{

    animation:

    counterZoom 1.2s ease;

}

@keyframes counterZoom{

    from{

        opacity:0;

        transform:scale(.5);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/* ===========================
   GOLD PARTICLES
=========================== */

@keyframes particle{

    0%{

        transform:

        translateY(0)

        rotate(0deg);

        opacity:0;

    }

    20%{

        opacity:1;

    }

    80%{

        opacity:1;

    }

    100%{

        transform:

        translateY(-100vh)

        rotate(360deg);

        opacity:0;

    }

}

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

.portfolio-image img{

    transition:

    transform .6s ease;

}

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

header{

    transition:

    .45s ease;

}

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

@keyframes mouse{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    100%{

        transform:translateY(18px);

        opacity:0;

    }

}

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

.hero-right img{

    animation:

    float 5s ease-in-out infinite,

    glow 4s infinite;

}

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

.btn{

    position:relative;

    overflow:hidden;

}

.btn::after{

    content:"";

    position:absolute;

    width:20px;

    height:20px;

    border-radius:50%;

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

    transform:scale(0);

    opacity:0;

}

.btn:active::after{

    animation:

    ripple .5s linear;

}

@keyframes ripple{

    from{

        transform:scale(0);

        opacity:.8;

    }

    to{

        transform:scale(15);

        opacity:0;

    }

}

/* ===========================
   SOCIAL ICONS
=========================== */

.contact-social a:hover{

    animation:

    rotateIcon .45s ease;

}

@keyframes rotateIcon{

    0%{

        transform:rotate(0);

    }

    50%{

        transform:rotate(15deg);

    }

    100%{

        transform:rotate(0);

    }

}

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

.gold-text{

    background:

    linear-gradient(
        90deg,
        #b98c17,
        #ffe08b,
        #b98c17
    );

    background-size:200% auto;

    color:transparent;

    -webkit-background-clip:text;

    background-clip:text;

    animation:

    shimmer 4s linear infinite;

}

@keyframes shimmer{

    to{

        background-position:200% center;

    }

}

/* ===========================
   PAGE LOAD
=========================== */

body{

    animation:

    pageLoad .8s ease;

}

@keyframes pageLoad{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* ===========================
   END
=========================== */