/* =========================================================
   XPY HERO ORB
   SALIENT VERSION
   Palette: #111111 / #f7f7f7 / #d9d9d9
   ========================================================= */


/* ---------------------------------------------------------
   HERO ROW
   Add "xpy-hero-orb" to the hero row Extra Class Name
   --------------------------------------------------------- */

.xpy-hero-orb {

    --xpy-orb-x: 0px;
    --xpy-orb-y: 0px;
    --xpy-orb-scroll: 0px;
    --xpy-orb-rx: 0deg;
    --xpy-orb-ry: 0deg;

    position: relative !important;

    overflow: hidden !important;

    isolation: isolate !important;
}


/* =========================================================
   SALIENT LAYERING
   ========================================================= */


/* Salient row background stays BEHIND everything */

.xpy-hero-orb > .row-bg-wrap {

    position: absolute !important;

    z-index: 0 !important;
}


/* Main hero content sits ABOVE the graphic */

.xpy-hero-orb > .row_col_wrap_12,
.xpy-hero-orb > .container {

    position: relative !important;

    z-index: 3 !important;
}


/* Columns/content also remain above */

.xpy-hero-orb .wpb_column,
.xpy-hero-orb .wpb_wrapper {

    position: relative;

    z-index: 3;
}


/* =========================================================
   ORB GLOW
   ========================================================= */

.xpy-hero-orb::before {

    content: "" !important;

    display: block !important;

    position: absolute !important;


    /* SIZE */

    width: min(38vw, 570px) !important;

    aspect-ratio: 1 / 1;


    /* POSITION */

    right: -7vw !important;

    top: -3vw !important;


    /* LAYER */

    z-index: 1 !important;

    pointer-events: none !important;


    /* SHAPE */

    border-radius: 50% !important;


    /* MONOCHROME GLOW */

    background:

        radial-gradient(
            circle at 42% 38%,

            rgba(247,247,247,.42) 0%,

            rgba(217,217,217,.28) 28%,

            rgba(217,217,217,.12) 48%,

            rgba(17,17,17,0) 72%

        ) !important;


    filter: blur(32px);


    transform:

        translate3d(

            calc(var(--xpy-orb-x) * .35),

            calc(
                (var(--xpy-orb-y) * .35)
                + (var(--xpy-orb-scroll) * .35)
            ),

            0

        );


    will-change: transform;
}


/* =========================================================
   MAIN ORB
   ========================================================= */

.xpy-hero-orb::after {

    content: "" !important;

    display: block !important;

    position: absolute !important;


    /* LARGE LIKE ORIGINAL HTML VERSION */

    width: min(50vw, 760px) !important;

    aspect-ratio: 1 / 1;


    /* HANG IT OFF THE RIGHT SIDE */

    right: -13vw !important;

    top: -10vw !important;


    /* ABOVE BACKGROUND / BELOW CONTENT */

    z-index: 2 !important;

    pointer-events: none !important;


    /* ACTUAL SVG */

    background-image:

        url("../img/xpy-orb-mono.svg") !important;

    background-position:

        center center !important;

    background-repeat:

        no-repeat !important;

    background-size:

        contain !important;


    /* MOVEMENT FROM JAVASCRIPT */

    transform:

        translate3d(

            var(--xpy-orb-x),

            calc(
                var(--xpy-orb-y)
                + var(--xpy-orb-scroll)
            ),

            0

        )

        rotateX(var(--xpy-orb-rx))

        rotateY(var(--xpy-orb-ry))

        scale(1);


    transform-origin:

        50% 50%;


    will-change:

        transform;


    /* ORIGINAL STYLE PASSIVE MOVEMENT */

    animation:

        xpyHeroOrbFloat 8s ease-in-out infinite,

        xpyHeroOrbSpin 24s linear infinite;


    transition:

        filter .35s ease,

        opacity .35s ease;
}


/* =========================================================
   FLOAT
   ========================================================= */

@keyframes xpyHeroOrbFloat {

    0% {

        margin-top: 0;

    }


    50% {

        margin-top: 18px;

    }


    100% {

        margin-top: 0;

    }

}


/* =========================================================
   SLOW ROTATION
   ========================================================= */

@keyframes xpyHeroOrbSpin {

    0% {

        background-position:

            50% 50%;

    }


    50% {

        background-position:

            52% 48%;

    }


    100% {

        background-position:

            50% 50%;

    }

}


/* =========================================================
   HOVER
   Slightly stronger presence when cursor enters hero
   ========================================================= */

.xpy-hero-orb.xpy-orb-active::after {

    filter:

        contrast(1.04)

        brightness(1.02);

}


/* =========================================================
   TABLET
   ========================================================= */

@media only screen and (max-width: 1000px) {

    .xpy-hero-orb::after {

        width: 72vw !important;

        right: -31vw !important;

        top: -7vw !important;

        opacity: .88;

    }


    .xpy-hero-orb::before {

        width: 56vw !important;

        right: -20vw !important;

        top: 0 !important;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media only screen and (max-width: 690px) {

    .xpy-hero-orb::after {

        width: 92vw !important;

        right: -48vw !important;

        top: -4vw !important;

        opacity: .70;

    }


    .xpy-hero-orb::before {

        width: 72vw !important;

        right: -32vw !important;

        top: 3vw !important;

        opacity: .8;

    }

}


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

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

    .xpy-hero-orb::after {

        animation: none !important;

        transform: none !important;

    }


    .xpy-hero-orb::before {

        transform: none !important;

    }

}