.hero-wow {
  --wow-x: 72%;
  --wow-y: 38%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero-wow::before,
.hero-wow::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
  will-change: transform, opacity;
}

.hero-wow::before {
  width: 34rem;
  height: 34rem;
  left: calc(var(--wow-x) - 17rem);
  top: calc(var(--wow-y) - 17rem);
  background: radial-gradient(circle, rgb(99 231 255 / 34%) 0%, rgb(30 166 255 / 13%) 38%, transparent 70%);
  filter: blur(10px);
  mix-blend-mode: screen;
  transition: left 400ms ease-out, top 400ms ease-out;
  animation: hero-wow-breathe 5s ease-in-out infinite alternate;
}

.hero-wow::after {
  width: 26rem;
  height: 26rem;
  right: -8rem;
  bottom: -11rem;
  border: 1px solid rgb(130 238 255 / 28%);
  box-shadow: 0 0 0 3rem rgb(72 207 255 / 6%), 0 0 0 7rem rgb(72 207 255 / 4%);
  animation: hero-wow-orbit 13s linear infinite;
}

.hero-wow > .container {
  position: relative;
  z-index: 2;
}

.hero-wow-canvas {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-wow-ready .grid > div:first-child > * {
  animation: hero-wow-rise 760ms cubic-bezier(.2,.8,.2,1) both;
}

.hero-wow-ready .grid > div:first-child > :nth-child(1) { animation-delay: 80ms; }
.hero-wow-ready .grid > div:first-child > :nth-child(2) { animation-delay: 180ms; }
.hero-wow-ready .grid > div:first-child > :nth-child(3) { animation-delay: 280ms; }
.hero-wow-ready .grid > div:first-child > :nth-child(4) { animation-delay: 380ms; }
.hero-wow-ready .grid > div:first-child > :nth-child(5) { animation-delay: 480ms; }

.hero-wow-ready .grid > div:last-child > div {
  animation: hero-wow-portrait 1.05s cubic-bezier(.16,1,.3,1) 180ms both;
}

.hero-wow .grid > div:last-child img {
  transition: transform 500ms cubic-bezier(.16,1,.3,1), filter 500ms ease;
}

.hero-wow .grid > div:last-child:hover img {
  transform: scale(1.035) rotate(-1deg);
  filter: saturate(1.08) drop-shadow(0 18px 30px rgb(0 38 105 / 28%));
}

.hero-wow-impact h1 {
  animation: hero-wow-title-hit 650ms cubic-bezier(.16,1,.3,1);
}

@keyframes hero-wow-rise {
  from { opacity: 0; transform: translateY(30px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes hero-wow-portrait {
  0% { opacity: 0; transform: translateX(55px) scale(.82) rotate(7deg); filter: blur(12px); }
  65% { opacity: 1; transform: translateX(-6px) scale(1.025) rotate(-1deg); filter: blur(0); }
  100% { opacity: 1; transform: translateX(0) scale(1) rotate(0); filter: blur(0); }
}

@keyframes hero-wow-title-hit {
  0%, 100% { transform: translateX(0); text-shadow: none; }
  35% { transform: translateX(8px) skewX(-3deg); text-shadow: -8px 0 0 rgb(76 224 255 / 42%), 8px 0 0 rgb(18 79 255 / 30%); }
  65% { transform: translateX(-3px) skewX(1deg); text-shadow: 4px 0 0 rgb(76 224 255 / 20%); }
}

@keyframes hero-wow-breathe {
  from { opacity: .68; transform: scale(.9); }
  to { opacity: 1; transform: scale(1.12); }
}

@keyframes hero-wow-orbit {
  to { transform: rotate(360deg); }
}

@media (max-width: 767px) {
  .hero-wow::before {
    width: 24rem;
    height: 24rem;
    left: calc(var(--wow-x) - 12rem);
    top: calc(var(--wow-y) - 12rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-wow::before,
  .hero-wow::after,
  .hero-wow-ready .grid > div:first-child > *,
  .hero-wow-ready .grid > div:last-child > div,
  .hero-wow-impact h1 {
    animation: none !important;
  }

  .hero-wow .grid > div:last-child img,
  .hero-wow::before {
    transition: none;
  }
}