/* Hero copy — CSS-only motion (survives React hydration) */
#top .ob-hero-eyebrow,
#top .ob-hero-title,
#top .ob-hero-sub,
#top .ob-hero-cta {
  animation: ob-hero-rise 2.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#top .ob-hero-eyebrow {
  animation-delay: 0.35s;
  font-size: clamp(0.72rem, 1.6vw, 0.9rem);
  letter-spacing: 0.32em;
  line-height: 1.6;
  text-shadow: 0 0 32px oklch(74% 0.13 72 / 0.35);
}

#top .ob-hero-title {
  animation-delay: 0.7s;
  font-size: clamp(2.35rem, 6vw + 1rem, 5.25rem) !important;
  line-height: 1.05 !important;
}

#top .ob-hero-title .ob-hero-title-text,
#top .ob-hero-title .text-gradient-warm {
  display: inline-block;
  background-size: 240% auto;
  animation:
    ob-hero-rise 2.2s cubic-bezier(0.16, 1, 0.3, 1) both,
    ob-hero-shimmer 14s ease-in-out infinite;
  animation-delay: 0.7s, 2.2s;
}

#top .ob-hero-sub {
  animation-delay: 1.05s;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem) !important;
  line-height: 1.65 !important;
  max-width: 40rem;
  color: oklch(82% 0.02 75);
}

#top .ob-hero-cta {
  animation-delay: 1.4s;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 0.9rem 2rem !important;
  font-size: 0.95rem !important;
  box-shadow: 0 12px 40px -16px oklch(74% 0.13 72 / 0.75);
}

#top .ob-hero-cta::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 36%,
    oklch(96% 0.04 80 / 0.55) 50%,
    transparent 64%
  );
  transform: translateX(-140%) skewX(-14deg);
  animation: ob-hero-sheen 7s ease-in-out infinite;
  animation-delay: 3s;
  pointer-events: none;
}

#top .ob-hero-cta:hover {
  box-shadow: 0 16px 48px -14px oklch(74% 0.13 72 / 0.9);
}

@keyframes ob-hero-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 2.75rem, 0) scale(0.98);
    filter: blur(12px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes ob-hero-shimmer {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes ob-hero-sheen {
  0%,
  68%,
  100% {
    transform: translateX(-140%) skewX(-14deg);
  }
  76% {
    transform: translateX(140%) skewX(-14deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #top .ob-hero-eyebrow,
  #top .ob-hero-title,
  #top .ob-hero-sub,
  #top .ob-hero-cta,
  #top .ob-hero-title .ob-hero-title-text,
  #top .ob-hero-title .text-gradient-warm {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }

  #top .ob-hero-cta::after {
    animation: none;
  }
}