/* RAPT hero visual effect */
.hero--fx {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #000000 !important;
  color: #f5f5f7;
}

/* Hero Spotlight Infinite Breathing Glow */
.hero-spotlight-glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0;
  animation: heroSpotlightFadeIn 0.6s ease-out 0.5s forwards;
}

.hero-spotlight-glow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -240px;
  width: min(1100px, 88vw);
  height: 720px;
  transform: translate3d(-50%, 0, 0) scale(0.86);
  transform-origin: 50% 50%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(220, 235, 255, 0.36) 0%,
    rgba(160, 190, 225, 0.19) 26%,
    rgba(255, 255, 255, 0.06) 48%,
    rgba(0, 0, 0, 0) 72%
  );
  filter: blur(22px);
  will-change: transform, opacity;
  animation: heroSpotlightLoop 3.6s ease-in-out 0.5s infinite;
}

.hero-spotlight-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 48%,
    rgba(255, 255, 255, 0.05),
    transparent 38%
  );
}

.hero--fx .hero__copy {
  position: relative;
  z-index: 1;
}

.hero--fx h1 {
  color: #f5f5f7;
}

.hero-intro-logo {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: heroLogoIntroContainer 0.65s ease-in-out forwards;
}

.hero-intro-logo__img {
  width: 375px;
  height: 375px;
  max-width: 65vw;
  max-height: 72%;
  object-fit: contain;
  animation: heroLogoIntroImg 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-title {
  overflow: visible;
}

.hero-title__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.05em;
}

.hero-title__text {
  display: block;
  will-change: transform, opacity, filter;
  animation: heroTitleReveal 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.52s both;
}

.hero-title__text--delay {
  animation-delay: 0.66s;
}

.hero--fx .hero__sub {
  color: #b9bbc0;
}

.hero__sub--reveal {
  animation: heroSupportReveal 0.45s ease-out 0.88s both;
}

.store-badges--reveal {
  animation: heroSupportReveal 0.45s ease-out 1.02s both;
}

.hero--fx .store-badges img {
  border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

@keyframes heroSpotlightFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes heroSpotlightLoop {
  0%,
  100% {
    transform: translate3d(-50%, 0, 0) scale(0.86);
    opacity: 0.72;
  }
  50% {
    transform: translate3d(-50%, 20px, 0) scale(1.18);
    opacity: 1;
  }
}

@keyframes heroLogoIntroContainer {
  0%,
  65% {
    opacity: 1;
    visibility: visible;
  }
  99% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@keyframes heroLogoIntroImg {
  0% {
    opacity: 0;
    transform: scale(0.96);
    filter: blur(6px);
  }
  22% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }
  65% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform: scale(1.04);
    filter: blur(5px);
  }
}

@keyframes heroTitleReveal {
  0% {
    transform: translateY(110%);
    opacity: 0;
    filter: blur(8px);
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes heroSupportReveal {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-intro-logo {
    display: none !important;
  }
  .hero-spotlight-glow,
  .hero-spotlight-glow::before,
  .hero-title__text,
  .hero__sub--reveal,
  .store-badges--reveal {
    animation: none;
    opacity: 1;
  }
}

@media (max-width: 600px) {
  .hero-spotlight-glow::before {
    top: -150px;
    width: 120vw;
    height: 560px;
    filter: blur(16px);
  }
}