/* ==================================================
   ASN NEXT UI SYSTEM START
   ================================================== */

:root {
    --asn-next-radius-sm: 16px;
    --asn-next-radius: 24px;
    --asn-next-radius-lg: 34px;

    --asn-next-shadow:
        0 20px 60px rgba(27, 46, 94, .12);

    --asn-next-shadow-hover:
        0 30px 85px rgba(27, 46, 94, .19);

    --asn-next-border:
        rgba(255, 255, 255, .68);

    --asn-next-blue:
        #2563eb;

    --asn-next-indigo:
        #4f46e5;

    --asn-next-purple:
        #7c3aed;

    --asn-next-cyan:
        #0891b2;
}


/* ---------- PAGE BACKGROUND ---------- */

body.asn-next-ui-enabled {
    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(37, 99, 235, .10),
            transparent 34%
        ),
        radial-gradient(
            circle at 91% 16%,
            rgba(124, 58, 237, .10),
            transparent 32%
        ),
        radial-gradient(
            circle at 45% 75%,
            rgba(8, 145, 178, .07),
            transparent 35%
        ),
        #f7f9fe;
}


/* ---------- SCROLL PROGRESS ---------- */

#asnNextProgress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    z-index: 999999;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            var(--asn-next-blue),
            var(--asn-next-purple),
            var(--asn-next-cyan)
        );

    box-shadow:
        0 0 18px rgba(79, 70, 229, .42);
}


/* ---------- AMBIENT ORBS ---------- */

.asn-next-orb {
    position: fixed;
    width: 360px;
    height: 360px;
    border-radius: 999px;
    filter: blur(80px);
    opacity: .13;
    pointer-events: none;
    z-index: -1;
}

.asn-next-orb-a {
    top: 8%;
    left: -120px;
    background: var(--asn-next-blue);
    animation: asnOrbFloatA 13s ease-in-out infinite alternate;
}

.asn-next-orb-b {
    right: -140px;
    top: 38%;
    background: var(--asn-next-purple);
    animation: asnOrbFloatB 15s ease-in-out infinite alternate;
}

@keyframes asnOrbFloatA {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        transform: translate3d(70px, 90px, 0) scale(1.15);
    }
}

@keyframes asnOrbFloatB {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        transform: translate3d(-75px, -70px, 0) scale(1.12);
    }
}


/* ---------- REVEAL MOTION ---------- */

.asn-next-reveal {
    opacity: 0;
    transform: translateY(26px) scale(.985);
    transition:
        opacity .72s cubic-bezier(.22,1,.36,1),
        transform .72s cubic-bezier(.22,1,.36,1);
}

.asn-next-reveal.asn-next-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* ---------- GLASS CARDS ---------- */

.asn-next-card {
    position: relative;
    isolation: isolate;

    border:
        1px solid
        rgba(255,255,255,.74) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.91),
            rgba(247,250,255,.73)
        ) !important;

    box-shadow:
        var(--asn-next-shadow) !important;

    backdrop-filter:
        blur(18px) saturate(135%);

    -webkit-backdrop-filter:
        blur(18px) saturate(135%);

    transition:
        transform .32s cubic-bezier(.22,1,.36,1),
        box-shadow .32s ease,
        border-color .32s ease;
}

.asn-next-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;

    background:
        radial-gradient(
            500px circle at var(--asn-x, 50%) var(--asn-y, 50%),
            rgba(79,70,229,.12),
            transparent 42%
        );

    opacity: 0;
    transition: opacity .3s ease;
}

.asn-next-card:hover::before {
    opacity: 1;
}

.asn-next-card:hover {
    box-shadow:
        var(--asn-next-shadow-hover) !important;
}


/* ---------- PREMIUM ICON ---------- */

.asn-next-icon {
    width: 46px;
    height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(37,99,235,.11),
            rgba(124,58,237,.11)
        );

    border:
        1px solid rgba(37,99,235,.10);

    box-shadow:
        0 10px 28px rgba(37,99,235,.10);

    margin-bottom: 14px;
}

.asn-next-icon svg {
    width: 23px;
    height: 23px;
    stroke: #3454d1;
    stroke-width: 1.9;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ---------- BRAND LOGOS ---------- */

.asn-next-brand-logo {
    display: block;

    width: auto;
    height: 42px;
    max-width: 122px;

    object-fit: contain;
    object-position: left center;

    margin: 0 0 16px;

    filter: none !important;
    opacity: 1 !important;
}

.asn-next-brand-logo[src*="AWS-"] {
    height: 68px;
    max-width: 90px;
}

.asn-next-brand-logo[src*="Ansible"] {
    height: 56px;
    max-width: 74px;
}

.asn-next-brand-logo[src*="cisco-logo"] {
    height: 45px;
    max-width: 108px;
}

.asn-next-brand-logo[src*="microsoft-logo"] {
    height: 40px;
    max-width: 132px;
}


/* ---------- HEADINGS ---------- */

.asn-next-ui-enabled
.asn-site h1,
.asn-next-ui-enabled
.asn-site h2 {
    letter-spacing: -.035em;
}

.asn-next-gradient-text {
    background:
        linear-gradient(
            100deg,
            #172554,
            #2563eb 34%,
            #7c3aed 66%,
            #0891b2
        );

    background-size: 220% auto;

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

    -webkit-text-fill-color: transparent;

    animation:
        asnGradientFlow
        7s linear infinite;
}

@keyframes asnGradientFlow {
    to {
        background-position: 220% center;
    }
}


/* ---------- BUTTONS ---------- */

.asn-next-button {
    position: relative;
    overflow: hidden;

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

.asn-next-button::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 160%;
    top: -30%;
    left: -120px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.33),
            transparent
        );

    transform: rotate(15deg);
    transition: left .55s ease;
    pointer-events: none;
}

.asn-next-button:hover::after {
    left: calc(100% + 80px);
}

.asn-next-button:hover {
    transform: translateY(-2px);
}


/* ---------- BUTTON ICON ---------- */

.asn-next-btn-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    margin-left: 7px;
    vertical-align: -4px;
}

.asn-next-btn-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ---------- IMAGE MOTION ---------- */

.asn-next-image {
    transition:
        transform .6s cubic-bezier(.22,1,.36,1),
        filter .4s ease;
}

.asn-next-image:hover {
    transform: scale(1.025);
}


/* ---------- COURSE CARDS ---------- */

.asn-next-ui-enabled
.asn-course-card,
.asn-next-ui-enabled
.asn2-course-card,
.asn-next-ui-enabled
.tutor-course-card {
    border-radius:
        var(--asn-next-radius) !important;
}


/* ---------- SECTIONS ---------- */

.asn-next-section {
    position: relative;
}

.asn-next-section::after {
    content: "";
    position: absolute;

    width: 150px;
    height: 150px;

    right: 3%;
    top: 8%;

    border-radius: 999px;

    background:
        radial-gradient(
            circle,
            rgba(37,99,235,.08),
            transparent 68%
        );

    pointer-events: none;
}


/* ---------- MOBILE ---------- */

@media (max-width: 767px) {

    .asn-next-orb {
        width: 240px;
        height: 240px;
    }

    .asn-next-icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .asn-next-brand-logo {
        height: 36px;
        max-width: 105px;
    }

}


/* ---------- ACCESSIBILITY ---------- */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .asn-next-reveal {
        opacity: 1 !important;
        transform: none !important;
    }

}

/* ==================================================
   ASN NEXT UI SYSTEM END
   ================================================== */