.hero-visual[data-avatar-active="true"] {
  isolation: isolate;
  min-height: 680px;
}

.hero-visual[data-avatar-active="true"] .scene-shell {
  display: none;
}

.hero-avatar {
  --avatar-object-x: .62;
  position: absolute;
  z-index: 0;
  inset: -18px -92px -24px -72px;
  overflow: hidden;
  border-radius: 44% 30% 38% 48% / 38% 34% 50% 48%;
  background: #070b12;
  box-shadow: inset 0 0 0 1px rgba(139, 183, 255, .08);
  contain: layout paint;
  pointer-events: none;
}

.hero-avatar::before,
.hero-avatar::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  content: "";
  pointer-events: none;
}

.hero-avatar::before {
  background:
    linear-gradient(90deg, #070b12 0%, rgba(7, 11, 18, .94) 7%, rgba(7, 11, 18, .42) 31%, transparent 55%),
    linear-gradient(0deg, #070b12 0%, rgba(7, 11, 18, .14) 24%, transparent 47%);
}

.hero-avatar::after {
  inset: 7% 4% 8% 13%;
  border: 1px solid rgba(98, 232, 255, .08);
  border-radius: 50%;
  background: radial-gradient(circle at 72% 37%, rgba(98, 232, 255, .05), transparent 38%);
  box-shadow: inset 0 0 80px rgba(77, 128, 255, .05);
  transform: rotate(-9deg);
}

.hero-avatar-stage {
  position: absolute;
  inset: 0;
  transform: translate3d(0, 0, 0) scale(1.012);
  transform-origin: 70% 54%;
}

.hero-avatar-video,
.hero-avatar-frame {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  opacity: 0;
  transform: translateZ(0);
  user-select: none;
  -webkit-user-drag: none;
}

.hero-avatar-frame[data-avatar-state="neutral"] {
  opacity: 1;
  transition: opacity 420ms cubic-bezier(.2, 0, 0, 1);
}

.hero-avatar-video {
  z-index: 2;
  display: block;
  opacity: 0;
  background: #070b12;
  transition: opacity 420ms cubic-bezier(.2, 0, 0, 1);
}

.hero-avatar.is-video-ready .hero-avatar-video.is-active {
  opacity: 1;
}

.hero-avatar.is-video-ready .hero-avatar-frame[data-avatar-state="neutral"] {
  opacity: 0;
}

.hero-avatar.is-crossfading .hero-avatar-video {
  will-change: opacity;
}

.hero-visual[data-avatar-active="true"] .scene-kicker {
  z-index: 16;
  top: 7%;
  left: -2%;
  background: rgba(7, 11, 18, .82);
}

.hero-visual[data-avatar-active="true"] .hero-funnel {
  z-index: 12;
  top: 18%;
  right: 40%;
  bottom: 13%;
  left: -9%;
  filter: drop-shadow(0 22px 36px rgba(0, 0, 0, .46));
}

.hero-visual[data-avatar-active="true"] .hero-funnel::before {
  border-color: rgba(98, 232, 255, .2);
  background: linear-gradient(180deg, rgba(9, 20, 38, .82), rgba(7, 18, 30, .64));
  backdrop-filter: blur(13px);
}

.hero-visual[data-avatar-active="true"] .funnel-sources span,
.hero-visual[data-avatar-active="true"] .hero-funnel-stage {
  background-color: rgba(7, 13, 23, .79);
  backdrop-filter: blur(9px);
}

.hero-visual[data-avatar-active="true"] .glance-card {
  z-index: 17;
  right: -3%;
  bottom: 3%;
  width: min(292px, 45%);
  background: rgba(7, 13, 23, .88);
}

@media (max-width: 1080px) {
  .hero-avatar {
    inset: -12px -78px -24px -64px;
  }

  .hero-visual[data-avatar-active="true"] .hero-funnel {
    right: 36%;
    left: -8%;
  }
}

@media (max-width: 900px) {
  .hero-visual[data-avatar-active="true"] {
    min-height: 660px;
  }

  .hero-avatar {
    --avatar-object-x: .64;
    inset: -8px -58px -18px -48px;
  }

  .hero-avatar-video,
  .hero-avatar-frame {
    object-position: 64% center;
  }

  .hero-visual[data-avatar-active="true"] .hero-funnel {
    top: 19%;
    right: 47%;
    bottom: 12%;
    left: -2%;
  }

  .hero-visual[data-avatar-active="true"] .scene-kicker {
    left: 2%;
  }
}

@media (max-width: 620px) {
  .hero .hero-copy {
    z-index: 20;
    transform: translate3d(0, 0, 1px);
  }

  .hero-visual[data-avatar-active="true"] {
    z-index: 1;
  }

  .hero-visual[data-avatar-active="true"] {
    min-height: 610px;
  }

  .hero-avatar {
    --avatar-object-x: .70;
    top: -900px;
    right: -150px;
    bottom: auto;
    left: 18%;
    height: 1220px;
    border-radius: 0 0 42px 42px;
    opacity: .88;
  }

  .hero-avatar::before {
    background:
      linear-gradient(90deg, #070b12 0%, rgba(7, 11, 18, .94) 31%, rgba(7, 11, 18, .38) 62%, transparent 88%),
      linear-gradient(0deg, #070b12 0%, rgba(7, 11, 18, .62) 24%, transparent 48%),
      linear-gradient(180deg, rgba(7, 11, 18, .5), transparent 27%);
  }

  .hero-avatar-video,
  .hero-avatar-frame {
    object-position: 70% center;
  }

  .hero-visual[data-avatar-active="true"] .scene-kicker {
    top: 5%;
    left: 4%;
  }

  .hero-visual[data-avatar-active="true"] .hero-funnel {
    top: 42%;
    right: -2%;
    bottom: 1%;
    left: -2%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-avatar-stage {
    transform: translate3d(0, 0, 0) scale(1.012);
  }

  .hero-avatar-video {
    display: none !important;
  }

  .hero-avatar.is-video-ready .hero-avatar-frame[data-avatar-state="neutral"] {
    opacity: 1;
  }

  .hero-avatar-frame {
    transition: none !important;
  }

}