.hero-robot {
    --robot-head-rx: 0deg;
    --robot-head-ry: 0deg;
    --robot-head-tx: 0px;
    --robot-head-ty: 0px;
    --robot-neck-rx: 0deg;
    --robot-neck-ry: 0deg;
    --robot-body-rz: 0deg;
    --robot-eye-x: 0px;
    --robot-eye-y: 0px;
    position: absolute;
    right: clamp(24px, 5vw, 92px);
    bottom: clamp(58px, 7vh, 96px);
    z-index: 3;
    width: clamp(120px, 12vw, 168px);
    aspect-ratio: 180 / 230;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    perspective: 800px;
    transform: translate3d(-200px, -25px, 0);
    transition: opacity .45s ease;
    contain: layout paint style;
}

.hero-robot.is-mounted {
    visibility: visible;
    opacity: .96;
}

.hero-robot::before {
    content: "";
    position: absolute;
    inset: 18% 5% 7%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(46, 132, 255, .18), rgba(22, 71, 135, .05) 45%, transparent 72%);
    filter: blur(18px);
}

.hero-robot__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform-style: preserve-3d;
}

.hero-robot__head {
    transform: translate(var(--robot-head-tx), var(--robot-head-ty)) rotateX(var(--robot-head-rx)) rotateY(var(--robot-head-ry));
    transform-box: fill-box;
    transform-origin: 50% 85%;
    transition: none;
    will-change: transform;
}

.hero-robot__neck {
    transform: rotateX(var(--robot-neck-rx)) rotateY(var(--robot-neck-ry));
    transform-box: fill-box;
    transform-origin: 50% 90%;
    will-change: transform;
}

.hero-robot__body {
    transform: rotate(var(--robot-body-rz));
    transform-box: fill-box;
    transform-origin: center bottom;
    will-change: transform;
}

.hero-robot__pupil,
.hero-robot__pupil-highlight {
    transform: translate(var(--robot-eye-x), var(--robot-eye-y));
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
}

.hero-robot__eye {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 80ms ease;
}

.hero-robot.is-blinking .hero-robot__eye {
    transform: scaleY(.08);
}

@media (max-width: 1024px) {
    .hero-robot {
        right: clamp(14px, 3vw, 34px);
        bottom: clamp(28px, 5vh, 58px);
        width: clamp(88px, 12vw, 124px);
        opacity: .9;
    }
}

@media (max-width: 767px) {
    .hero-robot {
        right: 8px;
        bottom: 10px;
        z-index: 1;
        width: clamp(70px, 20vw, 96px);
        opacity: .82;
    }

    .contact-hero .hero-robot,
    .case-hero .hero-robot { bottom: 16px; }

    .sw-hero .hero-robot { z-index: 0; }
}

@media (max-width: 359px) {
    .hero-robot { width: 66px; right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-robot,
    .hero-robot__head,
    .hero-robot__neck,
    .hero-robot__body,
    .hero-robot__pupil,
    .hero-robot__pupil-highlight,
    .hero-robot__eye {
        transition: none !important;
        animation: none !important;
    }
}