.hero {
  display: flex;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding-top: 116px;
  padding-bottom: 76px;
}

.hero::after {
  content: "";
  position: absolute;
  inset: -8%;
  background: url("leopard.jpg") center / cover;
  opacity: .16;
  filter: contrast(1.2);
  pointer-events: none;
  animation: background-breathe 7s ease-in-out infinite;
}

.hero::before { content: none; }

.hero-copy {
  width: min(820px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero .eyebrow {
  margin-bottom: 4px;
}

.logo-stage {
  position: relative;
  width: min(580px, 78vw);
  aspect-ratio: 1.45;
  display: grid;
  place-items: center;
  isolation: isolate;
  background: transparent;
}

.logo-stage::before {
  content: none;
  position: absolute;
  inset: 19% 13%;
  z-index: -1;
  border-radius: 50%;
  background: #f3126b;
  filter: blur(85px);
  opacity: .2;
  animation: logo-glow 3.8s ease-in-out infinite;
}

.logo-stage::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 20%;
  height: 75%;
  top: 12%;
  left: -24%;
  rotate: 14deg;
  background: linear-gradient(90deg, transparent, #ffffff75, transparent);
  filter: blur(10px);
  mix-blend-mode: screen;
  animation: logo-sheen 5.5s ease-in-out 1.4s infinite;
  pointer-events: none;
}

.hero-logo-vector {
  width: 76%;
  aspect-ratio: 674 / 623;
  display: block;
  margin: 0;
  background: #f3126b;
  -webkit-mask: url("after-hours-logo-mask.png") center / contain no-repeat;
  mask: url("after-hours-logo-mask.png") center / contain no-repeat;
  animation: logo-arrive-safe 1.3s cubic-bezier(.2,.8,.2,1) both, logo-float 5s ease-in-out 1.3s infinite;
}

.footer-logo-vector {
  width: 100px;
  aspect-ratio: 674 / 623;
  display: block;
  margin-right: auto;
  background: #f3126b;
  -webkit-mask: url("after-hours-logo-mask.png") center / contain no-repeat;
  mask: url("after-hours-logo-mask.png") center / contain no-repeat;
}

@media (max-width: 850px) {
  .footer-logo-vector { width: 100%; height: 80px; }
}

.hero .intro {
  margin: 0 auto 28px;
  max-width: 620px;
}

.hero .actions {
  justify-content: center;
}

@keyframes logo-arrive {
  from { opacity: 0; transform: scale(.82); filter: blur(15px) drop-shadow(0 0 0 transparent); }
  to { opacity: 1; transform: scale(1); filter: blur(0) drop-shadow(0 16px 28px #000) drop-shadow(0 0 16px #f3126b33); }
}

@keyframes logo-arrive-safe {
  from { opacity: 0; transform: scale(.82); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes logo-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-9px) scale(1.012); }
}

@keyframes logo-glow {
  0%, 100% { opacity: .16; transform: scale(.92); }
  50% { opacity: .3; transform: scale(1.05); }
}

@keyframes logo-sheen {
  0%, 68% { left: -24%; opacity: 0; }
  75% { opacity: .7; }
  92%, 100% { left: 108%; opacity: 0; }
}

@keyframes background-breathe {
  0%, 100% { opacity: .12; transform: scale(1); }
  50% { opacity: .22; transform: scale(1.12); }
}

@media (max-width: 560px) {
  .hero {
    min-height: 100svh;
    padding-top: 98px;
    padding-bottom: 64px;
  }
  .logo-stage {
    width: min(390px, 92vw);
    aspect-ratio: 1.25;
  }
  .hero-logo-vector { width: 82%; }
  .hero .intro {
    font-size: .98rem;
    max-width: 335px;
  }
  .hero .actions { width: 100%; }
  .hero .button { flex: 1; padding-inline: 14px; }
  .hero .scroll-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::after,
  .logo-stage::before,
  .logo-stage::after,
  .hero-logo-vector {
    animation: none;
  }
}