.hero {
  position: relative;
  isolation: isolate;
}

/* Confine the decorative layers without clipping content or keyboard focus. */
.hero-atmosphere {
  position: absolute;
  inset: 0 -5vw;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 85%, transparent);
}

.hero-monogram {
  position: absolute;
  width: clamp(390px, 48vw, 660px);
  height: auto;
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
  opacity: .2;
}

.hero-atmosphere::before,
.hero-atmosphere::after {
  content: "";
  position: absolute;
  width: min(70vw, 850px);
  aspect-ratio: 1;
  border-radius: 50%;
}

.hero-atmosphere::before {
  right: -10%;
  top: -10%;
  background: radial-gradient(ellipse, #65e4f32b 0%, #65e4f311 38%, transparent 68%);
}

.hero-atmosphere::after {
  right: 20%;
  bottom: -30%;
  background: radial-gradient(ellipse, #f37ed127 0%, #f37ed110 38%, transparent 68%);
}

.hero-side {
  background: linear-gradient(150deg, #191a31e6, #111a2ae6 65%, #102532e6);
}

@media (max-width: 900px) {
  .hero-monogram {
    width: clamp(420px, 72vw, 620px);
    right: 2%;
    opacity: .2;
  }
}

@media (max-width: 650px) {
  .hero-monogram {
    width: 390px;
    top: 100px;
    right: -100px;
    transform: none;
    opacity: .14;
  }
  .hero-atmosphere::before,
  .hero-atmosphere::after { width: 540px; }
  .hero-atmosphere::before { top: 0; right: -250px; }
  .hero-atmosphere::after { top: 220px; bottom: auto; right: -130px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-atmosphere::before { animation: hero-cyan-arrival 4600ms ease-out both; }
  .hero-atmosphere::after { animation: hero-pink-arrival 4600ms ease-out both; }
}

@keyframes hero-cyan-arrival {
  0% { transform: translate(-28px, 18px) scale(.92); opacity: .35; }
  55% { transform: translate(8px, -6px) scale(1.04); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

@keyframes hero-pink-arrival {
  0% { transform: translate(24px, -16px) scale(.92); opacity: .35; }
  55% { transform: translate(-8px, 6px) scale(1.04); opacity: 1; }
  100% { transform: none; opacity: 1; }
}