/* =========================================
   XPY INTERACTIVE ORB
   Palette:
   #111111 / #f7f7f7 / #d9d9d9
   ========================================= */

.xpy-orb-module{
    width:100%;
}

.xpy-orb-module--center .xpy-interactive-orb{ margin-left:auto; margin-right:auto; }
.xpy-orb-module--left .xpy-interactive-orb{ margin-left:0; margin-right:auto; }
.xpy-orb-module--right .xpy-interactive-orb{ margin-left:auto; margin-right:0; }

.xpy-orb-module__copy{
    max-width:780px;
    margin-bottom:34px;
}

.xpy-orb-module__headline{
    margin:18px 0 18px;
    font-size:clamp(46px,6vw,90px);
    line-height:.9;
    letter-spacing:-.055em;
    font-weight:800;
}

.xpy-orb-module__text{
    max-width:650px;
    font-size:clamp(18px,1.7vw,25px);
    line-height:1.35;
    letter-spacing:-.02em;
}

.xpy-interactive-orb{
    --mx: 0px;
    --my: 0px;
    --rx: 0deg;
    --ry: 0deg;

    position:relative;
    width:min(var(--xpy-orb-size), 88vw);
    aspect-ratio:1;
    perspective:1200px;
    isolation:isolate;
}

.xpy-interactive-orb__surface{
    position:absolute;
    inset:0;
    overflow:hidden;
    border-radius:50%;
    background:#111111;
    transform:
        rotateX(var(--rx))
        rotateY(var(--ry))
        translateZ(0)
        scale(1);
    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease;
    box-shadow:
        0 28px 70px rgba(17,17,17,.16),
        inset 0 0 0 1px rgba(255,255,255,.04);
}

.xpy-interactive-orb:hover .xpy-interactive-orb__surface{
    box-shadow:
        0 42px 110px rgba(17,17,17,.24),
        inset 0 0 0 1px rgba(255,255,255,.06);
}

.xpy-interactive-orb__blob{
    position:absolute;
    border-radius:50%;
    filter:blur(58px);
    will-change:transform;
    pointer-events:none;
}

.xpy-interactive-orb__blob--light{
    width:78%;
    height:78%;
    left:-16%;
    top:-14%;
    background:
        radial-gradient(circle at 45% 45%,
            rgba(247,247,247,1) 0%,
            rgba(247,247,247,.98) 20%,
            rgba(247,247,247,.7) 48%,
            rgba(247,247,247,0) 74%);
    transform:
        translate3d(
            calc(var(--mx) * .58),
            calc(var(--my) * .58),
            0
        )
        scale(1.08);
}

.xpy-interactive-orb__blob--grey{
    width:84%;
    height:84%;
    right:-22%;
    top:8%;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(217,217,217,.98) 0%,
            rgba(217,217,217,.88) 30%,
            rgba(217,217,217,.38) 58%,
            rgba(217,217,217,0) 76%);
    transform:
        translate3d(
            calc(var(--mx) * -.8),
            calc(var(--my) * -.62),
            0
        )
        scale(1.13);
}

.xpy-interactive-orb__blob--dark{
    width:80%;
    height:80%;
    left:14%;
    bottom:-26%;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(17,17,17,1) 0%,
            rgba(17,17,17,.96) 36%,
            rgba(17,17,17,.45) 61%,
            rgba(17,17,17,0) 78%);
    transform:
        translate3d(
            calc(var(--mx) * .38),
            calc(var(--my) * -.86),
            0
        )
        scale(1.16);
}

.xpy-interactive-orb__shine{
    position:absolute;
    width:38%;
    height:38%;
    left:17%;
    top:13%;
    border-radius:50%;
    background:
        radial-gradient(circle,
            rgba(255,255,255,.42) 0%,
            rgba(255,255,255,.14) 36%,
            rgba(255,255,255,0) 74%);
    filter:blur(22px);
    transform:
        translate3d(
            calc(var(--mx) * .28),
            calc(var(--my) * .28),
            0
        );
    pointer-events:none;
}

.xpy-interactive-orb__grain{
    position:absolute;
    inset:0;
    border-radius:50%;
    pointer-events:none;
    opacity:.08;
    mix-blend-mode:soft-light;
    background-image:
        repeating-radial-gradient(
            circle at 30% 20%,
            rgba(255,255,255,.35) 0 1px,
            transparent 1px 3px
        );
}

@media(max-width:690px){
    .xpy-interactive-orb__blob{
        filter:blur(40px);
    }

    .xpy-orb-module__copy{
        margin-bottom:26px;
    }
}

@media (prefers-reduced-motion: reduce){
    .xpy-interactive-orb__surface{
        transition:none !important;
        transform:none !important;
    }

    .xpy-interactive-orb__blob,
    .xpy-interactive-orb__shine{
        transform:none !important;
    }
}