.hero {
  background: var(--color-bg-white);
}

.hero__bg {
  background: var(--color-bg-white);
  overflow: hidden;
}

.hero__waves-wrap {
  position: absolute;
  inset: -8% -4% -8% -2%;
  z-index: 1;
  pointer-events: none;
  transform: translate3d(var(--hero-parallax-x, 0), var(--hero-parallax-y, 0), 0) scale(var(--hero-parallax-scale, 1));
  transition: transform 0.35s var(--ease-out);
  will-change: transform;
}

.hero__waves {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__wave {
  transform-box: fill-box;
  transform-origin: 100% 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero__wave-accent {
  transform-box: fill-box;
  transform-origin: 0 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero__ambient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero__ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
  -webkit-filter: blur(52px);
  opacity: 0.72;
  mix-blend-mode: soft-light;
}

.hero__ambient-glow--1 {
  width: min(58vw, 580px);
  height: min(58vw, 580px);
  top: 4%;
  right: -10%;
  background: radial-gradient(circle, rgba(255, 200, 50, 0.92) 0%, transparent 62%);
}

.hero__ambient-glow--2 {
  width: min(46vw, 480px);
  height: min(46vw, 480px);
  bottom: 6%;
  right: 8%;
  background: radial-gradient(circle, rgba(243, 112, 33, 0.85) 0%, transparent 65%);
}

.hero__ambient-shine {
  position: absolute;
  inset: -24% -14%;
  background: linear-gradient(
    118deg,
    transparent 32%,
    rgba(255, 255, 255, 0.22) 44%,
    rgba(255, 240, 210, 0.48) 50%,
    rgba(255, 255, 255, 0.22) 56%,
    transparent 68%
  );
  transform: translate3d(-130%, 0, 0) skewX(-14deg);
}

.hero__overlay {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.88) 38%, rgba(255, 255, 255, 0.2) 58%, transparent 72%);
}

.hero__title span {
  color: var(--color-brand);
}

.hero .btn--primary {
  background: var(--color-brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
}

.hero .btn--primary:hover {
  background: var(--color-brand-dark);
  color: #fff;
  box-shadow: 0 10px 32px rgba(var(--color-brand-rgb), 0.35);
}

.hero .btn--outline {
  color: var(--color-navy);
  border-color: rgba(117, 119, 119, 0.45);
}

.hero .btn--outline:hover {
  background: var(--color-brand-soft);
  border-color: rgba(var(--color-brand-rgb), 0.55);
  color: var(--color-brand-dark);
}

.hero .btn--primary:active {
  transform: translate3d(0, 0, 0) scale(0.97);
  box-shadow: 0 2px 10px rgba(var(--color-brand-rgb), 0.32);
}

.hero .btn--outline:active {
  transform: scale(0.97);
  background: rgba(var(--color-brand-rgb), 0.12);
}

.hero.is-hero-ready .hero__wave--1,
.hero.is-hero-ready .hero__wave--2,
.hero.is-hero-ready .hero__wave--3,
.hero.is-hero-ready .hero__wave-accent {
  opacity: 1;
}

.hero__wave--1,
.hero__wave--2,
.hero__wave--3,
.hero__wave-accent {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__ambient-glow--1 {
    animation: heroGlowPulse1 6s ease-in-out infinite alternate;
  }

  .hero__ambient-glow--2 {
    animation: heroGlowPulse2 7.5s ease-in-out infinite alternate-reverse;
  }

  .hero__ambient-shine {
    animation: heroShineSweep 8s var(--ease-in-out) infinite;
  }

  .hero.is-hero-ready .hero__wave--1 {
    animation: heroWaveEnter1 0.95s var(--ease-out) forwards, heroWaveDrift1 11s var(--ease-in-out) 0.95s infinite;
  }

  .hero.is-hero-ready .hero__wave--2 {
    animation: heroWaveEnter2 1.05s var(--ease-out) 0.1s forwards, heroWaveDrift2 9s var(--ease-in-out) 1.15s infinite;
  }

  .hero.is-hero-ready .hero__wave--3 {
    animation: heroWaveEnter3 1.15s var(--ease-out) 0.2s forwards, heroWaveDrift3 7.5s var(--ease-in-out) 1.35s infinite;
  }

  .hero.is-hero-ready .hero__wave-accent {
    animation: heroAccentEnter 0.9s var(--ease-out) 0.28s forwards, heroAccentDrift 10s var(--ease-in-out) 1.18s infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__wave--1,
  .hero__wave--2,
  .hero__wave--3,
  .hero__wave-accent {
    opacity: 1;
  }

  .hero__ambient-glow,
  .hero__ambient-shine {
    display: none;
  }

  .hero__waves-wrap {
    transform: none;
    transition: none;
    will-change: auto;
  }
}

@keyframes heroWaveEnter1 {
  from {
    opacity: 0;
    transform: translate3d(14%, 4%, 0) scale(0.9) rotate(1.5deg);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
}

@keyframes heroWaveEnter2 {
  from {
    opacity: 0;
    transform: translate3d(18%, 5%, 0) scale(0.88) rotate(2deg);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
}

@keyframes heroWaveEnter3 {
  from {
    opacity: 0;
    transform: translate3d(22%, 6%, 0) scale(0.86) rotate(2.5deg);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
}

@keyframes heroAccentEnter {
  from {
    opacity: 0;
    transform: translate3d(-24px, -16px, 0) scale(0.78) rotate(-4deg);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
}

@keyframes heroWaveDrift1 {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }

  30% {
    transform: translate3d(-5.5%, 2.8%, 0) scale(1.045) rotate(-0.8deg);
  }

  65% {
    transform: translate3d(-2.5%, -2.2%, 0) scale(1.022) rotate(0.5deg);
  }
}

@keyframes heroWaveDrift2 {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }

  35% {
    transform: translate3d(-7%, 2%, 0) scale(1.055) rotate(-1.2deg);
  }

  70% {
    transform: translate3d(-3.5%, -2.8%, 0) scale(1.028) rotate(0.7deg);
  }
}

@keyframes heroWaveDrift3 {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }

  40% {
    transform: translate3d(-8.5%, 3.5%, 0) scale(1.065) rotate(-1.5deg);
  }

  75% {
    transform: translate3d(-4.5%, -2%, 0) scale(1.032) rotate(0.9deg);
  }
}

@keyframes heroAccentDrift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }

  50% {
    transform: translate3d(4%, 5%, 0) scale(1.12) rotate(3deg);
  }
}

@keyframes heroGlowPulse1 {
  from {
    transform: translate3d(0, 0, 0) scale(0.92);
    opacity: 0.55;
  }

  to {
    transform: translate3d(-6%, 4%, 0) scale(1.22);
    opacity: 0.82;
  }
}

@keyframes heroGlowPulse2 {
  from {
    transform: translate3d(0, 0, 0) scale(0.94);
    opacity: 0.48;
  }

  to {
    transform: translate3d(5%, -5%, 0) scale(1.18);
    opacity: 0.75;
  }
}

@keyframes heroShineSweep {
  0%,
  12% {
    transform: translate3d(-130%, 0, 0) skewX(-14deg);
    opacity: 0;
  }

  24% {
    opacity: 1;
  }

  40%,
  100% {
    transform: translate3d(130%, 0, 0) skewX(-14deg);
    opacity: 0;
  }
}

@media (max-width: 1024px) {
  .hero__overlay {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.9) 48%, rgba(255, 255, 255, 0.35) 68%, transparent 82%);
  }

  .hero__waves-wrap {
    inset: -2% 0 -2% 0;
  }

  .hero__ambient-glow {
    filter: blur(36px);
    -webkit-filter: blur(36px);
  }
}

@media (max-width: 767px) {
  .hero {
    background: transparent;
  }

  .hero__bg {
    background: transparent;
  }

  .hero__overlay {
    background: transparent;
  }

  .hero__waves-wrap {
    inset: -18% -34% -16% -28%;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: 50% 50%;
  }

  .hero__wave {
    transform-origin: 100% 50%;
  }

  .hero__ambient-glow--1 {
    width: 58vw;
    height: 58vw;
    top: 4%;
    right: -12%;
    bottom: auto;
    left: auto;
  }

  .hero__ambient-glow--2 {
    width: 44vw;
    height: 44vw;
    bottom: -8%;
    right: 6%;
    left: auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero.is-hero-paused .hero__wave,
  .hero.is-hero-paused .hero__wave-accent,
  .hero.is-hero-paused .hero__ambient-glow,
  .hero.is-hero-paused .hero__ambient-shine {
    animation-play-state: paused;
  }
}