/* CRITICAL first-paint CSS: load this in index.html , not from async JS. Same accepted composition, now independent of any old image/naturalWidth. The original hero has height:100svh; min-height:760px (700px at <=600px). */ .hero .hero-sequence-frame { display: block; --robot-hero-height: max(760px, 100svh); position: absolute; z-index: 1; left: calc(75.5953125% + var(--observer-base-x, 0px) + 32px); top: calc(15.633333333333333% - 20px); height: calc(var(--robot-hero-height) * .5 + 34.366666666666667% + 20px); width: auto; aspect-ratio: 3 / 4; transform: translateX(-50%); pointer-events: none; } .hero .hero-sequence-poster-picture, .hero .hero-sequence-poster { display: block; width: 100%; height: 100%; max-width: none; pointer-events: none; } .hero .hero-sequence-poster-picture { position: absolute; inset: 0; } .hero .hero-sequence-poster { object-fit: fill; } .hero .hero-sequence-motion { position: absolute; inset: 0; visibility: hidden; } .hero.is-robot-motion-ready .hero-sequence-poster-picture { visibility: hidden; } .hero .hero-mobile-original { display: none; } @media (max-width: 900px) { .hero .hero-sequence-frame { display: none; } .hero .hero-mobile-original { display: block; } .hero .hero-artboard { transform: translate(max(-82%, calc(-100% + 50vw)), -50%); } /* The original 3840 image has 48 transparent bottom rows: shift those out of view (+1px rounding margin), and clamp only an otherwise exposed right edge. */ .hero .hero-mobile-original .hero-audit-robot { visibility: visible; animation: none !important; transform: translate3d(var(--observer-base-x), calc(var(--observer-base-y) + 2.222222% + 1px), 0) scale(var(--observer-scale)) !important; will-change: auto; } }