.hero.hero--original {
  min-height: max(800px, 100svh);
}

.namecard-stage {
  --card-scale: 1;
  position: absolute;
  top: clamp(166px, calc(100svh - 668px), 232px);
  left: 50%;
  width: 240px;
  height: 384px;
  transform: translateX(-50%) scale(var(--card-scale));
  transform-origin: top center;
  perspective: 950px;
  z-index: 2;
}

.namecard {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 280ms ease-out;
}

.namecard-frame {
  position: absolute;
  top: -15.5px;
  left: -15.5px;
}

@media (max-width: 760px) {
  .hero.hero--original { min-height: max(600px, 92svh); }
  .namecard-stage {
    --card-scale: .75;
    top: clamp(158px, calc(25svh + 10px), 220px);
  }
}