/* ==========================================================
   AXXPOINT EFFECTS
========================================================== */

:root {
    --axx-effect-shadow-color: rgba(0, 0, 0, .35);
    --axx-effect-shadow-soft: rgba(0, 0, 0, .15);
    --axx-effect-accent: #56baed;
    --axx-effect-duration: .25s;
    --axx-effect-radius: .5rem;
}

/* ==========================================================
   SHADOW EFFECTS
========================================================== */

.effect1 {
    box-shadow: 0 .625rem .375rem -.375rem var(--axx-effect-shadow-color);
}

.effect2,
.effect3,
.effect4,
.effect5,
.effect6,
.effect7,
.effect8 {
    position: relative;
    isolation: isolate;
}

    .effect2::before,
    .effect2::after,
    .effect3::before,
    .effect4::after,
    .effect5::before,
    .effect5::after {
        content: "";
        position: absolute;
        z-index: -1;
        left: .625rem;
        top: 80%;
        width: 50%;
        max-width: 18.75rem;
        background: transparent;
        pointer-events: none;
    }

    /* ==========================================================
   LIFTED CORNERS
========================================================== */

    .effect2::before,
    .effect2::after {
        bottom: 10rem;
        box-shadow: 0 10rem .625rem var(--axx-effect-shadow-color);
    }

    .effect2::before {
        transform: rotate(-3deg);
    }

    .effect2::after {
        right: .625rem;
        left: auto;
        transform: rotate(3deg);
    }

    /* ==========================================================
   LEFT LIFT
========================================================== */

    .effect3::before {
        bottom: 10rem;
        box-shadow: 0 10rem .625rem var(--axx-effect-shadow-color);
        transform: rotate(-3deg);
    }

    /* ==========================================================
   RIGHT LIFT
========================================================== */

    .effect4::after {
        right: .625rem;
        bottom: .95rem;
        left: auto;
        box-shadow: 0 .95rem .625rem var(--axx-effect-shadow-color);
        transform: rotate(3deg);
    }

    /* ==========================================================
   DEEP LIFTED CORNERS
========================================================== */

    .effect5::before,
    .effect5::after {
        bottom: 1.55rem;
        box-shadow: 0 2.2rem 1.25rem var(--axx-effect-shadow-color);
    }

    .effect5::before {
        transform: rotate(-8deg);
    }

    .effect5::after {
        right: .625rem;
        left: auto;
        transform: rotate(8deg);
    }

/* ==========================================================
   INNER SHADOW EFFECTS
========================================================== */

.effect6,
.effect7,
.effect8 {
    box-shadow: 0 1px .25rem var(--axx-effect-shadow-color), 0 0 2.5rem var(--axx-effect-shadow-soft) inset;
}

    .effect6::before,
    .effect6::after,
    .effect7::before,
    .effect7::after,
    .effect8::before,
    .effect8::after {
        content: "";
        position: absolute;
        z-index: -1;
        box-shadow: 0 0 1.25rem rgba(0, 0, 0, .65);
        pointer-events: none;
    }

    .effect6::before,
    .effect6::after {
        top: 50%;
        right: .625rem;
        bottom: 0;
        left: .625rem;
        border-radius: 100px / .625rem;
    }

    .effect7::before,
    .effect7::after {
        top: 0;
        right: .625rem;
        bottom: 0;
        left: .625rem;
        border-radius: 100px / .625rem;
    }

    .effect8::before,
    .effect8::after {
        top: .625rem;
        right: 0;
        bottom: .625rem;
        left: 0;
        border-radius: 100px / .625rem;
    }

    .effect6::after,
    .effect7::after,
    .effect8::after {
        left: auto;
        transform: skew(8deg) rotate(3deg);
    }

/* ==========================================================
   MOTION EFFECTS
========================================================== */

.fadeInDown {
    animation: axxFadeInDown 1s both;
}

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

    .fadeIn.first {
        animation-delay: .4s;
    }

    .fadeIn.second {
        animation-delay: .6s;
    }

    .fadeIn.third {
        animation-delay: .8s;
    }

    .fadeIn.fourth {
        animation-delay: 1s;
    }

@keyframes axxFadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes axxFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ==========================================================
   UNDERLINE HOVER EFFECT
========================================================== */

.underlineHover {
    position: relative;
    display: inline-block;
    transition: color var(--axx-effect-duration) ease;
}

    .underlineHover::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -.35rem;
        width: 0;
        height: 2px;
        background-color: var(--axx-effect-accent);
        transition: width var(--axx-effect-duration) ease;
    }

    .underlineHover:hover {
        color: #0d0d0d;
    }

        .underlineHover:hover::after {
            width: 100%;
        }

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

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 576px) {
    .effect2::before,
    .effect2::after,
    .effect3::before,
    .effect4::after,
    .effect5::before,
    .effect5::after {
        width: 40%;
        max-width: 12rem;
    }

    .fadeInDown {
        animation-duration: .65s;
    }

    .fadeIn {
        animation-duration: .65s;
    }
}