/*==================================================
    ANIMATIONS.CSS
    Dr. Priya Panchal Portfolio
==================================================*/

/* ==============================
        KEYFRAMES
================================*/

@keyframes float {

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

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

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

}

@keyframes rotateSlow{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes pulse{

    0%{
        transform:scale(1);
        opacity:1;
    }

    50%{
        transform:scale(1.15);
        opacity:.75;
    }

    100%{
        transform:scale(1);
        opacity:1;
    }

}

@keyframes heartbeat{

    0%{
        transform:scale(1);
    }

    25%{
        transform:scale(1.1);
    }

    40%{
        transform:scale(.96);
    }

    60%{
        transform:scale(1.12);
    }

    100%{
        transform:scale(1);
    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(70px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-70px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(70px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes shimmer{

    0%{

        transform:translateX(-100%) rotate(25deg);

    }

    100%{

        transform:translateX(350%) rotate(25deg);

    }

}

@keyframes glow{

    0%{

        filter:drop-shadow(0 0 0 rgba(79,157,222,.2));

    }

    50%{

        filter:drop-shadow(0 0 18px rgba(79,157,222,.8));

    }

    100%{

        filter:drop-shadow(0 0 0 rgba(79,157,222,.2));

    }

}

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

.hero-content{

    animation:fadeLeft 1s ease;

}

.hero-image{

    animation:fadeRight 1.2s ease;

}

.hero-image img{

    animation:

        float 5s ease-in-out infinite,

        glow 4s infinite;

}

/*===============================
       BUTTONS
================================*/

.btn-primary,
.btn-nav{

    position:relative;

    overflow:hidden;

}

.btn-primary::before,
.btn-nav::before{

    content:"";

    position:absolute;

    top:-50%;

    left:-150%;

    width:60px;

    height:220%;

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

    transform:rotate(25deg);

}

.btn-primary:hover::before,
.btn-nav:hover::before{

    animation:shimmer 1s forwards;

}

/*===============================
      SERVICE CARD
================================*/

.card{

    overflow:hidden;

}

.card:hover{

    animation:zoomIn .35s;

}

.card i{

    transition:.35s;

}

.card:hover i{

    animation:heartbeat 1s;

}

/*===============================
      ABOUT IMAGE
================================*/

.about-image img{

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

}

/*===============================
      FEATURE CARDS
================================*/

.features div{

    transition:.35s;

}

.features div:hover{

    transform:translateY(-10px);

}

/*===============================
        STATS
================================*/

.stats div:hover h1{

    animation:pulse .8s;

}

/*===============================
      TESTIMONIALS
================================*/

.testimonial-card{

    transition:.4s;

}

.testimonial-card:hover{

    transform:translateY(-12px);

}

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

.social-icons a{

    transition:.35s;

}

.social-icons a:hover{

    animation:heartbeat .8s;

}

/*===============================
       SVG BODY
================================*/

/* Head */

.head{

    animation:pulse 3s infinite;

}

/* Neck */

.neck{

    animation:pulse 2s infinite;

}

/* Left Shoulder */

.left-shoulder{

    animation:pulse 1.8s infinite;

}

/* Right Shoulder */

.right-shoulder{

    animation:pulse 1.8s infinite .4s;

}

/* Spine */

.spine{

    animation:glow 3s infinite;

}

/* Left Hip */

.left-hip{

    animation:pulse 2.4s infinite;

}

/* Right Hip */

.right-hip{

    animation:pulse 2.4s infinite .5s;

}

/* Left Knee */

.left-knee{

    animation:pulse 2s infinite;

}

/* Right Knee */

.right-knee{

    animation:pulse 2s infinite .6s;

}

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

.blob{

    position:absolute;

    border-radius:50%;

    filter:blur(45px);

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

}

.blob-one{

    width:220px;

    height:220px;

    background:rgba(115,210,222,.18);

    top:0;

    left:0;

}

.blob-two{

    width:180px;

    height:180px;

    background:rgba(79,157,222,.18);

    bottom:80px;

    right:0;

    animation-delay:2s;

}

.blob-three{

    width:140px;

    height:140px;

    background:rgba(92,225,230,.18);

    top:40%;

    left:45%;

    animation-delay:4s;

}

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

.particle{

    position:absolute;

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--accent);

    opacity:.35;

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

}

/*===============================
      SCROLL REVEAL
================================*/

.reveal{

    opacity:0;

    transform:translateY(70px);

    transition:1s;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/*===============================
     LOADER
================================*/

.loader{

    position:fixed;

    inset:0;

    background:white;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.loader-circle{

    width:90px;

    height:90px;

    border-radius:50%;

    border:6px solid rgba(79,157,222,.15);

    border-top:6px solid var(--primary);

    animation:rotateSlow 1s linear infinite;

}

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

.glow-hover{

    transition:.35s;

}

.glow-hover:hover{

    box-shadow:

    0 0 30px rgba(79,157,222,.28);

}

/*===============================
      IMAGE EFFECT
================================*/

.zoom-hover{

    overflow:hidden;

}

.zoom-hover img{

    transition:.45s;

}

.zoom-hover:hover img{

    transform:scale(1.08);

}

/*===============================
      DECORATIVE ICONS
================================*/

.floating-icon{

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

}

.floating-icon:nth-child(even){

    animation-delay:2s;

}

/*===============================
      SECTION ENTRY
================================*/

section{

    animation:fadeUp .8s ease;

}