.tracking-hero {
  isolation: isolate;
}

.tracking-figure {
  position: relative;
  z-index: 10;
  width: min(748px, 90vw, 52.3vh);
  aspect-ratio: 748 / 851;
  flex: none;
  pointer-events: none;
  transform-style: preserve-3d;
  perspective: 900px;
  contain: layout paint;
}

.tracking-figure > img,
.tracking-head > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tracking-head {
  position: absolute;
  inset: 0;
  transform-origin: 50% 53%;
  transform: translate3d(var(--head-shift-x, 0px), var(--head-shift-y, 0px), 0)
    rotateX(var(--head-pitch, 0deg)) rotateY(var(--head-yaw, 0deg))
    rotateZ(var(--head-roll, 0deg));
  will-change: transform;
  backface-visibility: hidden;
}

.tracking-mesh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.tracking-still {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
}

.tracking-figure--webgl > img,
.tracking-figure--webgl .tracking-head {
  visibility: hidden;
}

.tracking-eye {
  display: none;
  position: absolute;
  top: 21.38%;
  width: 8.02%;
  height: 3.29%;
  overflow: hidden;
  border-radius: 48%;
}

.tracking-eye--left { left: 39.97%; }
.tracking-eye--right { left: 54.14%; }

.tracking-eye img {
  position: absolute;
  left: 24.2%;
  top: 10.7%;
  width: 51.7%;
  height: 89.3%;
  transform: translate3d(var(--eye-x, 0%), var(--eye-y, 0%), 0);
  will-change: transform;
}

@media (max-width: 639px) {
  .tracking-figure { width: min(748px, 90vw, 44.4vh); }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .tracking-head { transform: none !important; will-change: auto; }
  .tracking-eye img { transform: none !important; will-change: auto; }
}