.vx-identity-ring {
    --vx-identity-ring-size: clamp(221px, 26.65vw, 364px);
    --vx-identity-ring-number-radius: clamp(93px, 11.2vw, 153px);
    --vx-identity-ring-y: 78vh;
    --vx-identity-ring-angle: 0deg;
    --vx-identity-ring-core-angle: 0deg;
    --vx-identity-ring-gear-angle: 0deg;
    --vx-identity-ring-gear-assembly-angle: -90deg;
    --vx-identity-ring-gear-assembly-x: -115%;
    --vx-identity-ring-gear-opacity: 0;
    --vx-identity-ring-glass-assembly-x: -110%;
    --vx-identity-ring-rotor-assembly-x: -55%;
    --vx-identity-ring-underlight-assembly-x: -89%;
    --vx-identity-ring-bearing-assembly-x: -81%;
    --vx-identity-ring-ring-opacity: 0;
    --vx-identity-ring-underlight-opacity: 0;
    --vx-identity-ring-bearing-opacity: 0;
    --vx-identity-ring-bearing-fill-angle: 0deg;
    --vx-identity-ring-entry-pinion-left: 29.91%;
    --vx-identity-ring-entry-pinion-top: 11.03%;
    --vx-identity-ring-entry-pinion-angle: -7.5deg;
    --vx-identity-ring-entry-pinion-opacity: 0;
    --vx-identity-ring-exit-pinion-left: 29.91%;
    --vx-identity-ring-exit-pinion-top: 88.97%;
    --vx-identity-ring-exit-pinion-angle: 7.5deg;
    --vx-identity-ring-exit-pinion-opacity: 0;
    --vx-identity-ring-bearing-inner-stop: 94.1%;
    --vx-identity-ring-bearing-outer-stop: 97.15%;
    --vx-identity-ring-opacity: 0;
    position: absolute;
    top: var(--vx-identity-ring-y);
    left: 0;
    z-index: 7;
    width: var(--vx-identity-ring-size);
    height: var(--vx-identity-ring-size);
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -50%, 0);
    will-change: top;
}

.vx-identity-ring[data-visible] {
    visibility: visible;
}
.vx-identity-ring__underlight {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 0;
    box-sizing: border-box;
    width: calc(var(--vx-identity-ring-size) * 0.62);
    height: calc(var(--vx-identity-ring-size) * 0.62);
    border: 1px solid rgb(244 245 245 / 0.70);
    border-radius: 50%;
    isolation: isolate;
    opacity: var(--vx-identity-ring-underlight-opacity);
    pointer-events: none;
    transform:
        translate(-50%, -50%)
        translateX(var(--vx-identity-ring-underlight-assembly-x));
    will-change: opacity, transform;
}

.vx-identity-ring__underlight::before {
    position: absolute;
    inset: calc(var(--vx-identity-ring-size) * -0.25);
    z-index: -1;
    background: url('/landing/glow-identity-gear-underlight.webp') center / 100% 100% no-repeat;
    content: "";
    pointer-events: none;
}
.vx-identity-ring__gear {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    display: block;
    width: calc(var(--vx-identity-ring-size) * 0.82);
    height: calc(var(--vx-identity-ring-size) * 0.82);
    overflow: visible;
    opacity: var(--vx-identity-ring-gear-opacity);
    pointer-events: none;
    transform:
        translate(-50%, -50%)
        translateX(var(--vx-identity-ring-gear-assembly-x))
        rotate(calc(
            var(--vx-identity-ring-gear-angle)
            + var(--vx-identity-ring-gear-assembly-angle)
        ));
    transform-origin: 50% 50%;
    will-change: transform;
}

.vx-identity-ring__gear-shape,
.vx-identity-ring__pinion-surface {
    filter: url(#vx-bow-subtle-grain);
}

.vx-identity-ring__gear-recess,
.vx-identity-ring__pinion-recess,
.vx-identity-ring__pinion-shoulder {
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: none;
    shape-rendering: geometricPrecision;
}

.vx-identity-ring__pinion-hub-seat {
    fill: #050505;
    stroke: rgb(0 0 0 / 0.82);
    stroke-width: 1.2px;
}

.vx-identity-ring__pinion-hub {
    stroke: rgb(0 0 0 / 0.72);
    stroke-width: 1.3px;
}

.vx-identity-ring__pinion-axle {
    fill: #060606;
    stroke: rgb(244 245 245 / 0.06);
    stroke-width: 0.7px;
}
.vx-identity-ring__pinion {
    position: absolute;
    z-index: 1;
    display: block;
    width: calc(var(--vx-identity-ring-size) * 0.3153846);
    height: calc(var(--vx-identity-ring-size) * 0.3153846);
    overflow: visible;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    will-change: top, left, opacity, transform;
}

.vx-identity-ring__pinion--entry {
    top: var(--vx-identity-ring-entry-pinion-top);
    left: var(--vx-identity-ring-entry-pinion-left);
    opacity: var(--vx-identity-ring-entry-pinion-opacity);
    transform:
        translate(-50%, -50%)
        rotate(var(--vx-identity-ring-entry-pinion-angle));
}

.vx-identity-ring__pinion--exit {
    top: var(--vx-identity-ring-exit-pinion-top);
    left: var(--vx-identity-ring-exit-pinion-left);
    opacity: var(--vx-identity-ring-exit-pinion-opacity);
    transform:
        translate(-50%, -50%)
        rotate(var(--vx-identity-ring-exit-pinion-angle));
}

.vx-identity-ring__glass {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 2;
    width: 50%;
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
    background: rgb(14 14 14 / 0.58);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: var(--vx-identity-ring-ring-opacity);
    transform: translateX(var(--vx-identity-ring-glass-assembly-x));
    will-change: opacity, transform, backdrop-filter;
}

.vx-identity-ring__aperture {
    position: absolute;
    top: 19%;
    bottom: 19%;
    left: 0;
    width: 62%;
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
    background: rgb(8 8 8);
    overflow: hidden;
    box-shadow:
        0 0 0 2px rgb(2 2 2 / 0.72),
        0 0 0 3px rgb(0 0 0 / 0.18),
        inset 0 0 2rem rgb(0 0 0 / 0.16);
}

.vx-identity-ring__core-rotor {
    position: absolute;
    top: 0;
    right: 0;
    width: 200%;
    height: 100%;
    border-radius: 50%;
    transform: rotate(var(--vx-identity-ring-core-angle));
    transform-origin: 50% 50%;
    will-change: transform;
}

.vx-identity-ring__core-notch {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transform: rotate(var(--vx-identity-ring-core-notch-angle));
}

.vx-identity-ring__core-notch::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 10%;
    content: "";
    background: rgb(0 0 0 / 0.84);
    box-shadow:
        -1px 0 0 rgb(0 0 0 / 0.40),
        1px 0 0 rgb(255 255 255 / 0.085);
    transform: translateX(-50%);
}

.vx-identity-ring__core-notch[data-vx-identity-core-notch-length="short"]::before {
    height: 7%;
}

.vx-identity-ring__rotor {
    position: absolute;
    top: 0;
    left: -50%;
    z-index: 4;
    width: 100%;
    height: 100%;
    transform:
        translateX(var(--vx-identity-ring-rotor-assembly-x))
        rotate(var(--vx-identity-ring-angle));
    transform-origin: 50% 50%;
    opacity: var(--vx-identity-ring-ring-opacity);
    transition: transform 880ms cubic-bezier(0.22, 0.72, 0.22, 1);
    will-change: transform;
}
.vx-identity-ring[data-vx-identity-ring-ring-travelling] .vx-identity-ring__rotor {
    transition: none;
}

.vx-identity-ring__dividers {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}
.vx-identity-ring__divider {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 16%;
    background: rgb(0 0 0 / 0.76);
    box-shadow:
        -1px 0 0 rgb(0 0 0 / 0.28),
        1px 0 0 rgb(255 255 255 / 0.075);
    opacity: 0.82;
    transform:
        translate(-50%, -50%)
        rotate(var(--vx-identity-ring-divider-angle))
        translateY(calc(0px - var(--vx-identity-ring-number-radius)));
    transform-origin: 50% 50%;
}

.vx-identity-ring__number {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    color: rgb(0 0 0 / 0.70);
    font-family: "Oxanium VX", "IBM Plex Mono", Consolas, monospace;
    font-size: clamp(15px, 1.55vw, 21px);
    font-weight: 600;
    letter-spacing: 0.065em;
    line-height: 1;
    white-space: nowrap;
    -webkit-text-stroke: 0.45px rgb(255 255 255 / 0.045);
    text-shadow:
        0 1px 0 rgb(255 255 255 / 0.04),
        0 -1px 1px rgb(0 0 0 / 0.96),
        1px 0 1px rgb(0 0 0 / 0.58);
    transform:
        translate(-50%, -50%)
        rotate(var(--vx-identity-ring-slot-angle))
        translateY(calc(0px - var(--vx-identity-ring-number-radius)))
        rotate(-90deg);
    transform-origin: 50% 50%;
    transition:
        color 460ms ease,
        -webkit-text-stroke-color 460ms ease,
        text-shadow 520ms ease;
}

.vx-identity-ring__number[data-active] {
    color: rgb(244 245 245 / 0.96);
    -webkit-text-stroke-color: rgb(255 255 255 / 0.28);
    text-shadow:
        0 0 0.08em rgb(255 255 255 / 0.48),
        0 0 0.32em rgb(244 245 245 / 0.24),
        0 0 0.78em rgb(244 245 245 / 0.10),
        0 0 1.20em rgb(244 245 245 / 0.035),
        0 1px 0 rgb(255 255 255 / 0.12),
        0 -1px 1px rgb(0 0 0 / 0.72);
}
.vx-identity-ring__number[data-neutral][data-active] {
    color: rgb(194 197 198 / 0.68);
    -webkit-text-stroke-color: rgb(255 255 255 / 0.12);
    text-shadow:
        0 0 0.08em rgb(255 255 255 / 0.18),
        0 0 0.28em rgb(244 245 245 / 0.09),
        0 0 0.68em rgb(244 245 245 / 0.04),
        0 0 1.05em rgb(244 245 245 / 0.015),
        0 1px 0 rgb(255 255 255 / 0.07),
        0 -1px 1px rgb(0 0 0 / 0.82);
}
.vx-identity-ring__rotor::before,
.vx-identity-ring__rotor::after {
    position: absolute;
    border: 1px solid rgb(255 255 255 / 0.065);
    border-radius: 50%;
    content: "";
}

.vx-identity-ring__rotor::before {
    inset: 0;
}

.vx-identity-ring__rotor::after {
    inset: 16%;
}
.vx-identity-ring__bearing {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 5;
    width: calc(var(--vx-identity-ring-size) * 0.68);
    height: calc(var(--vx-identity-ring-size) * 0.68);
    border-radius: 50%;
    opacity: var(--vx-identity-ring-bearing-opacity);
    filter:
        drop-shadow(0 0 0.12rem rgb(255 255 255 / 0.48))
        drop-shadow(0 0 0.45rem rgb(244 245 245 / 0.24))
        drop-shadow(0 0 1.10rem rgb(244 245 245 / 0.10))
        drop-shadow(0 0 1.80rem rgb(244 245 245 / 0.035));
    pointer-events: none;
    transform:
        translate(-50%, -50%)
        translateX(var(--vx-identity-ring-bearing-assembly-x));
    will-change: opacity, transform;
}

.vx-identity-ring__bearing-rotor {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(
        from 12deg,
        rgb(244 245 245 / 0.38) 0deg,
        rgb(244 245 245 / 0.46) 22deg,
        rgb(244 245 245 / 0.68) 42deg,
        rgb(255 255 255 / 0.82) 52deg,
        rgb(244 245 245 / 0.66) 64deg,
        rgb(244 245 245 / 0.38) 82deg,
        rgb(244 245 245 / 0.26) 130deg,
        rgb(244 245 245 / 0.20) 194deg,
        rgb(244 245 245 / 0.24) 246deg,
        rgb(244 245 245 / 0.50) 286deg,
        rgb(244 245 245 / 0.36) 318deg,
        rgb(244 245 245 / 0.38) 360deg
    );
    -webkit-mask: radial-gradient(
        farthest-side,
        transparent var(--vx-identity-ring-bearing-inner-stop),
        #000 calc(var(--vx-identity-ring-bearing-inner-stop) + 0.5px)
            calc(var(--vx-identity-ring-bearing-outer-stop) - 0.5px),
        transparent var(--vx-identity-ring-bearing-outer-stop)
    );
    mask: radial-gradient(
        farthest-side,
        transparent var(--vx-identity-ring-bearing-inner-stop),
        #000 calc(var(--vx-identity-ring-bearing-inner-stop) + 0.5px)
            calc(var(--vx-identity-ring-bearing-outer-stop) - 0.5px),
        transparent var(--vx-identity-ring-bearing-outer-stop)
    );
    animation: vx-identity-bearing-spin 52s linear infinite;
    animation-play-state: paused;
    will-change: transform;
}
.vx-identity-ring__bearing-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    -webkit-mask: conic-gradient(
        from -90deg,
        #000 0deg var(--vx-identity-ring-bearing-fill-angle),
        transparent var(--vx-identity-ring-bearing-fill-angle) 360deg
    );
    mask: conic-gradient(
        from -90deg,
        #000 0deg var(--vx-identity-ring-bearing-fill-angle),
        transparent var(--vx-identity-ring-bearing-fill-angle) 360deg
    );
}

.vx-identity-ring__bearing-rotor::before {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    content: "";
    background: conic-gradient(
        from 12deg,
        transparent 0deg 24deg,
        rgb(255 255 255 / 0.14) 34deg,
        rgb(255 255 255 / 0.66) 52deg,
        rgb(255 255 255 / 0.17) 72deg,
        transparent 96deg 258deg,
        rgb(255 255 255 / 0.22) 286deg,
        transparent 318deg 360deg
    );
    filter: blur(0.18rem);
    opacity: 0.72;
}

.vx-identity-ring__bearing-rotor::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    content: "";
    background: conic-gradient(
        from 12deg,
        rgb(244 245 245 / 0.46) 0deg,
        rgb(255 255 255 / 0.78) 52deg,
        rgb(244 245 245 / 0.50) 92deg,
        rgb(244 245 245 / 0.36) 196deg,
        rgb(244 245 245 / 0.58) 286deg,
        rgb(244 245 245 / 0.46) 360deg
    );
    -webkit-mask: radial-gradient(
        farthest-side,
        transparent 94.5%,
        #000 95.25% 96%,
        transparent 96.75%
    );
    mask: radial-gradient(
        farthest-side,
        transparent 94.5%,
        #000 95.25% 96%,
        transparent 96.75%
    );
    filter: drop-shadow(0 0 0.16rem rgb(255 255 255 / 0.60));
}

.vx-identity-ring[data-powered] .vx-identity-ring__bearing-rotor {
    animation-play-state: running;
}

@keyframes vx-identity-bearing-spin {
    to {
        transform: rotate(1turn);
    }
}

@media (max-width: 899px) {
    .vx-identity-ring {
        --vx-identity-ring-size: clamp(156px, 44.2vw, 215px);
        --vx-identity-ring-number-radius: clamp(66px, 18.6vw, 90px);
    }

    .vx-identity-ring__number {
        font-size: clamp(12px, 3.5vw, 15px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vx-identity-ring,
    .vx-identity-ring__rotor,
    .vx-identity-ring__core-rotor,
    .vx-identity-ring__gear,
    .vx-identity-ring__pinion,
    .vx-identity-ring__bearing-rotor {
        will-change: auto;
    }

    .vx-identity-ring__rotor,
    .vx-identity-ring__number {
        transition: none;
    }

    .vx-identity-ring__core-rotor {
        transform: none;
    }

    .vx-identity-ring__gear {
        transform: translate(-50%, -50%);
    }

    .vx-identity-ring__pinion {
        display: none;
    }

    .vx-identity-ring__glass {
        transform: none;
    }

    .vx-identity-ring__rotor {
        transform: rotate(var(--vx-identity-ring-angle));
    }

    .vx-identity-ring__underlight,
    .vx-identity-ring__bearing {
        transform: translate(-50%, -50%);
    }

    .vx-identity-ring__bearing-rotor {
        animation: none;
        transform: none;
    }
}