@media (prefers-reduced-motion: no-preference) {
  body::before {
    animation: ambient-shift 14s ease-in-out infinite alternate;
  }

  .site-header {
    animation: header-drop 520ms ease both;
  }

  .brand-mark img {
    animation: logo-pulse 4.8s ease-in-out infinite;
  }

  .hero-bg {
    animation: hero-drift 13s ease-in-out infinite alternate;
    transform: translate3d(
        calc(var(--pointer-x, 0) * 18px),
        calc(var(--pointer-y, 0) * 12px),
        0
      )
      scale(1.035);
    transform-origin: center;
    transition: transform 180ms ease-out;
  }

  .hero::after {
    animation: beam-scan 4.8s ease-in-out infinite;
  }

  .hero-copy .eyebrow,
  .hero-copy h1,
  .hero-copy p:not(.eyebrow),
  .hero-actions {
    animation: rise-in 760ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
  }

  .hero-copy .eyebrow {
    animation-delay: 80ms;
  }

  .hero-copy h1 {
    animation-delay: 160ms;
  }

  .hero-copy p:not(.eyebrow) {
    animation-delay: 260ms;
  }

  .hero-actions {
    animation-delay: 360ms;
  }

  .button.primary {
    animation: gradient-flow 4s ease infinite;
    background-size: 180% 180%;
  }

  .has-reveal .section.is-visible {
    animation: rise-in 720ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
  }

  .has-reveal .section.is-visible .product-card {
    animation: card-rise 560ms ease backwards;
  }

  .has-reveal .section.is-visible .product-card:nth-child(2) {
    transition-delay: 90ms;
  }

  .has-reveal .section.is-visible .product-card:nth-child(3) {
    transition-delay: 180ms;
  }

  .has-reveal .section.is-visible .product-card:hover,
  .button:hover {
    transform: translateY(-5px);
  }

  .signal-section img {
    animation: logo-float 5.6s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@keyframes header-drop {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes card-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-drift {
  from {
    background-position: 50% 50%;
  }

  to {
    background-position: 54% 47%;
  }
}

@keyframes ambient-shift {
  from {
    opacity: 0.75;
  }

  to {
    opacity: 1;
  }
}

@keyframes beam-scan {
  0%,
  100% {
    opacity: 0.35;
    transform: translateX(-8%) skewX(-28deg);
  }

  50% {
    opacity: 1;
    transform: translateX(8%) skewX(-28deg);
  }
}

@keyframes gradient-flow {
  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@keyframes logo-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(18, 231, 255, 0));
  }

  50% {
    filter: drop-shadow(0 0 14px rgba(18, 231, 255, 0.55));
  }
}

@keyframes logo-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-12px) rotate(1deg);
  }
}