.hero .hero-keychain {
  top: -80px;
  width: min(1100px, 100vw);
  height: calc(60svh + 80px);
  min-height: 0;
  max-height: none;
  isolation: isolate;
  pointer-events: none;
}

.hero-keychain::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 3% -5% 0;
  background: radial-gradient(ellipse at 50% 49%, rgba(172, 174, 183, .46), rgba(213, 214, 220, .27) 45%, transparent 73%);
  pointer-events: none;
}

.hero-keychain::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 25%;
  right: 25%;
  bottom: 8%;
  height: 5%;
  border-radius: 50%;
  background: rgba(35, 32, 42, .16);
  filter: blur(24px);
  pointer-events: none;
}

.hero-keychain canvas,
.hero-keychain-fallback {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hero-keychain-fallback {
  object-fit: contain;
  object-position: center top;
  opacity: 1;
  transition: opacity .45s ease;
}

.hero-keychain canvas {
  opacity: 0;
  transition: opacity .45s ease;
}

.hero-keychain.is-ready canvas { opacity: 1; }
.hero-keychain.is-ready .hero-keychain-fallback { opacity: 0; }

@media (max-width: 720px) {
  .hero .hero-keychain {
    top: -62px;
    width: 100vw;
    height: 470px;
  }

  .hero-keychain::before { inset: 7% -10% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-keychain canvas,
  .hero-keychain-fallback { transition: none; }
}