/* =====================================================
   animations.css
   KAGE GEE LLC
===================================================== */

/* ==========================
   Fade In
========================== */

.hidden{

    opacity:0;

    transform:translateY(50px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}

/* ==========================
   Hero Entrance
========================== */

.hero-logo{

    animation:logoFade 1.4s ease forwards;

}

.hero h1{

    animation:titleRise 1.3s ease .25s both;

}

.hero p{

    animation:titleRise 1.3s ease .45s both;

}

.hero-buttons{

    animation:titleRise 1.3s ease .7s both;

}

/* ==========================
   Scroll Indicator
========================== */

.scroll-indicator{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

}

.scroll-indicator span{

    display:block;

    width:26px;

    height:42px;

    border:2px solid rgba(255,255,255,.5);

    border-radius:30px;

    position:relative;

}

.scroll-indicator span::before{

    content:"";

    position:absolute;

    left:50%;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#fff;

    transform:translateX(-50%);

    animation:scrollDown 2s infinite;

}

/* ==========================
   Service Cards
========================== */

.service-card{

    overflow:hidden;

    position:relative;

}

.service-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.08),
    transparent);

    transform:translateX(-130%);

}

.service-card:hover::before{

    animation:shine .9s ease;

}

.service-card:hover{

    transform:translateY(-14px);

    box-shadow:

    0 30px 60px rgba(0,0,0,.45),

    0 0 45px rgba(124,58,237,.25);

}

/* ==========================
   Buttons
========================== */

.btn-primary,
.btn-secondary{

    position:relative;

    overflow:hidden;

}

.btn-primary::after,
.btn-secondary::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.25),
    transparent);

    transform:translateX(-120%);

}

.btn-primary:hover::after,
.btn-secondary:hover::after{

    animation:shine .8s ease;

}

/* ==========================
   Navigation Hover
========================== */

nav a{

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#00d9ff;

    transition:.35s;

}

nav a:hover::after,

nav a.active::after{

    width:100%;

}

/* ==========================
   Floating Hero Background
========================== */

.hero-background img{

    animation:slowFloat 18s ease-in-out infinite;

}

/* ==========================
   Glow Pulse
========================== */

.quote-btn{

    animation:pulseGlow 3s infinite;

}

/* ==========================
   Back To Top
========================== */

.backToTop{

    position:fixed;

    right:30px;

    bottom:30px;

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:#7c3aed;

    color:#fff;

    cursor:pointer;

    font-size:22px;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

}

.backToTop.visible{

    opacity:1;

    visibility:visible;

}

.backToTop:hover{

    transform:translateY(-6px);

}

/* ==========================
   Keyframes
========================== */

@keyframes logoFade{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes titleRise{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes shine{

    from{

        transform:translateX(-120%);

    }

    to{

        transform:translateX(120%);

    }

}

@keyframes pulseGlow{

    0%{

        box-shadow:0 0 0 rgba(124,58,237,.2);

    }

    50%{

        box-shadow:0 0 40px rgba(124,58,237,.6);

    }

    100%{

        box-shadow:0 0 0 rgba(124,58,237,.2);

    }

}

@keyframes slowFloat{

    0%{

        transform:scale(1.05) translateY(0);

    }

    50%{

        transform:scale(1.08) translateY(-18px);

    }

    100%{

        transform:scale(1.05) translateY(0);

    }

}

@keyframes scrollDown{

    0%{

        opacity:0;

        top:8px;

    }

    40%{

        opacity:1;

    }

    100%{

        opacity:0;

        top:24px;

    }

}