section.hero-xray {
    --padding: 2vw;

    padding-block: 23rem;
    overflow-x: clip;
}

.hero-xray__inner {
    display: flex;
    gap: 3rem;
}

.hero-xray__info {
    gap: 3.5rem;
    width: 45.7rem;
    max-width: 50%;
    position: relative;
    z-index: 2;
}

.hero-xray__btn {
    margin-top: 1rem;
}

.hero-xray__images-wrap {
    flex: 1;
    position: relative;
}

.hero-xray__images {
    aspect-ratio: 1;
    width: 40vw;
    max-width: 100rem;
    padding: var(--padding);
    position: absolute;
    left: 0;
    top: 50%;
    translate: 0 -50%;
    z-index: 1;
}

/*.hero-xray__images::after {
    content: "";
    display: block;
    border-radius: 100%;
    position: absolute;
    inset: 0;
    z-index: -1;

    background: linear-gradient(
        135deg,
        #3A5EFD 1%,
        #671CF5 22%,
        #D5566C 60%,
        #FE8C39 74%,
        #FFC933 97%
    );

    filter: blur(6rem);
}
*/
.hero-xray__gradient {
    scale: 1.8;
    position: absolute;
    inset: 0;
    z-index: -1;
    filter: blur(4rem);
    pointer-events: none;
}

.hero-xray__blob {
    width: 100%;
    height: 100%;
    padding: var(--padding);
    mask-image: var(--blob-url);
    mask-repeat: no-repeat;
    mask-type: luminance;
    mask-size: 20rem;
    mask-position: 50% 50%;
    cursor: none;

    position: absolute;
    inset: 50%;
    translate: -50% -50%;
    overflow: hidden;
}


.color-blob {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: -1;
    opacity: 1;
}

.color-blob::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: 
        conic-gradient(
            from 0deg,
            #5B9EFF 0%,
            #8B5EFF 25%,
            #FF6B4A 50%,
            #FFD700 75%,
            #5B9EFF 100%
        );
    filter: blur(80px);
    animation: rotateGradient 5s linear infinite;
    z-index: 0;
}

.hero-xray__video-block,
.hero-xray__blob-fallback {
    aspect-ratio: 1;
    width: 150%;
    max-width: 120rem;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    translate: -50% -50%;
}

.hero-xray__blob-fallback {
    display: none;
}

.low-power-mode .hero-xray__video-block {
    opacity: 0;
}

.low-power-mode .hero-xray__blob-fallback {
    display: block;
}

@keyframes rotateGradient {
    to {
        transform: rotate(360deg);
    }
}

@media (hover: hover) and (pointer: fine) {
    .hero-xray__title .char:hover {
        color: #3A5EFD;
        transition:color 0s;
    }
    .hero-xray__title .char:hover:nth-child(2n + 1) {
        color: #671CF5;
    }
    .hero-xray__title .char:hover:nth-child(3n + 1) {
        color: #FE6C39;
    }
    .hero-xray__title .char:hover:nth-child(4n + 1) {
        color: #FFC933;
    }
}

@media screen and (max-width: 1024.9px) {
    section.hero-xray {
        padding-block: 15rem var(--section-padding);
    }
    .hero-xray__text br {
        display: none;
    }
}

@media screen and (max-width: 767.9px) {
    section.hero-xray {
        padding-top: 12rem;
    }
    .hero-xray__inner {
        flex-direction: column;
    }

    .hero-xray__images-wrap {
        width: 80%;
        margin-inline: auto;
        order: -1;
    }

    .hero-xray__images {
        width: 100%;
        position: static;
        translate: unset;
    }

    .hero-xray__info {
        width: 100%;
        max-width: 100%;
    }
}

@media screen and (max-width: 575.9px) {
    .hero-xray__info {
        gap: 2rem;
    }
}