.gk-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(22rem, .95fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  min-height: 17.5rem;
  padding: 2.75rem 2.625rem 3rem;
}

.gk-hero-copy {
  min-width: 0;
  z-index: 3;
}

.gk-hero-sub {
  max-width: 39rem;
  text-wrap: pretty;
}

.gk-hero-car-stage {
  --gk-car-rx: 0deg;
  --gk-car-ry: 0deg;
  --gk-car-tx: 0px;
  --gk-car-ty: 0px;
  position: relative;
  z-index: 3;
  min-width: 0;
  min-height: 13.5rem;
  display: grid;
  place-items: center;
  perspective: 62rem;
  perspective-origin: 48% 43%;
  transform-style: preserve-3d;
  opacity: 0;
  transform: translate3d(2.25rem, .4rem, 0) scale(.96);
  transition: opacity .65s ease, transform .9s cubic-bezier(.2, .75, .22, 1);
  isolation: isolate;
}

.gk-hero.gk-hero-ready .gk-hero-car-stage {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.gk-hero-car-stage::before {
  content: "";
  position: absolute;
  inset: 7% -4% 0 4%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 48%, rgba(210, 142, 29, .17), transparent 45%),
    radial-gradient(circle at 55% 58%, rgba(255, 255, 255, .055), transparent 63%);
  filter: blur(.15rem);
  pointer-events: none;
}

.gk-hero-car-orbit {
  position: absolute;
  width: min(24rem, 84%);
  aspect-ratio: 1;
  border: 1px solid rgba(210, 142, 29, .18);
  border-left-color: transparent;
  border-bottom-color: rgba(255, 255, 255, .05);
  border-radius: 50%;
  transform: rotateX(68deg) rotateZ(8deg) translateZ(-1.5rem);
  animation: gkHeroOrbit 14s linear infinite;
  pointer-events: none;
}

.gk-hero-car-shadow {
  position: absolute;
  z-index: 0;
  left: 20%;
  right: 9%;
  bottom: 12%;
  height: .85rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, .42);
  filter: blur(.9rem);
  transform-origin: center;
  animation: gkHeroShadow 6.8s ease-in-out infinite;
  pointer-events: none;
}

.gk-hero-car-rig {
  position: relative;
  z-index: 2;
  width: min(100%, 37rem);
  transform-style: preserve-3d;
  transform:
    translate3d(var(--gk-car-tx), var(--gk-car-ty), 0)
    rotateX(var(--gk-car-rx))
    rotateY(var(--gk-car-ry));
  transition: transform .2s ease-out;
  will-change: transform;
}

.gk-hero-car-float {
  position: relative;
  transform-style: preserve-3d;
  animation: gkHeroCarFloat 6.8s cubic-bezier(.45, .05, .55, .95) infinite;
  will-change: transform;
}

.gk-hero-car-image {
  display: block;
  width: 100%;
  height: auto;
  transform: translateZ(1.35rem);
  transform-origin: 52% 58%;
  filter: drop-shadow(0 .75rem 1rem rgba(0, 0, 0, .3));
  user-select: none;
  -webkit-user-drag: none;
}

.gk-hero-car-stage.gk-hero-car-paused *,
.gk-hero-car-stage.gk-hero-car-paused::before {
  animation-play-state: paused !important;
}

@keyframes gkHeroCarFloat {
  0%, 100% {
    transform: translate3d(-.25rem, .2rem, 1.4rem) rotateX(1.2deg) rotateY(-6deg) rotateZ(-.2deg);
  }
  35% {
    transform: translate3d(.25rem, -.34rem, 2.1rem) rotateX(-.8deg) rotateY(2.5deg) rotateZ(.15deg);
  }
  68% {
    transform: translate3d(.55rem, -.12rem, 1.8rem) rotateX(.35deg) rotateY(7deg) rotateZ(.3deg);
  }
}

@keyframes gkHeroShadow {
  0%, 100% { opacity: .38; transform: translate3d(-.3rem, 0, 0) scaleX(.9) scaleY(.66); }
  35% { opacity: .2; transform: translate3d(.15rem, .2rem, 0) scaleX(.82) scaleY(.52); }
  68% { opacity: .28; transform: translate3d(.45rem, .08rem, 0) scaleX(.87) scaleY(.58); }
}

@keyframes gkHeroOrbit {
  from { transform: rotateX(68deg) rotateZ(8deg) translateZ(-1.5rem); }
  to { transform: rotateX(68deg) rotateZ(368deg) translateZ(-1.5rem); }
}

@media (max-width: 58rem) {
  .gk-hero {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, .82fr);
    gap: 1rem;
    padding-inline: 2.1rem;
  }

  .gk-hero-title { font-size: 2.15rem; }
  .gk-hero-car-stage { min-height: 11.5rem; }
}

@media (max-width: 47.5rem) {
  .gk-hero {
    grid-template-columns: 1fr;
    gap: .7rem;
    padding: 2rem 1.5rem 1.2rem;
  }

  .gk-hero-copy { padding-right: .4rem; }
  .gk-hero-car-stage {
    width: min(100%, 32rem);
    min-height: 10.5rem;
    margin: 0 auto;
    perspective: 48rem;
  }
  .gk-hero-car-shadow { bottom: 8%; }
}

@media (max-width: 30rem) {
  .gk-hero { padding: 1.8rem 1.25rem .9rem; }
  .gk-hero-title { font-size: 1.75rem; }
  .gk-hero-sub { font-size: .96rem; line-height: 1.5; }
  .gk-hero-car-stage { min-height: 8.75rem; }
  .gk-hero-car-rig { width: 108%; }
}

@media (prefers-reduced-motion: reduce) {
  .gk-hero-car-stage,
  .gk-hero.gk-hero-ready .gk-hero-car-stage,
  .gk-hero-car-rig,
  .gk-hero-car-float,
  .gk-hero-car-orbit,
  .gk-hero-car-shadow {
    animation: none !important;
    transition: none !important;
  }

  .gk-hero-car-stage,
  .gk-hero.gk-hero-ready .gk-hero-car-stage {
    opacity: 1;
    transform: none;
  }

  .gk-hero-car-rig,
  .gk-hero-car-float { transform: none; }
  .gk-hero-car-shadow { opacity: .28; transform: scaleX(.86) scaleY(.58); }
}