@media (prefers-reduced-motion: no-preference) {
  @keyframes content-arrive {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes brand-arrive {
    from {
      opacity: .45;
      transform: scale(1.035);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes banner-sheen {
    0% {
      opacity: 0;
      transform: translateX(-160%) skewX(-18deg);
    }
    20% {
      opacity: .75;
    }
    80% {
      opacity: .45;
    }
    100% {
      opacity: 0;
      transform: translateX(400%) skewX(-18deg);
    }
  }

  @keyframes quote-arrive {
    from {
      opacity: .25;
      transform: translateY(7px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .hero-copy > .eyebrow,
  .hero h1,
  .hero-description,
  .hero-detail,
  .hero .button-row,
  .hero-person {
    animation: content-arrive .7s cubic-bezier(.2, .7, .2, 1) backwards;
  }

  .hero h1 { animation-delay: .08s; }
  .hero-description { animation-delay: .16s; }
  .hero-detail { animation-delay: .24s; }
  .hero .button-row { animation-delay: .32s; }
  .hero-person { animation-delay: .4s; }

  .hero-brand-art {
    animation: brand-arrive 1.25s ease-out backwards;
  }

  .brand-showcase {
    position: relative;
  }

  .brand-showcase::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, #55dcff1c, #e8f3f91a, transparent);
    pointer-events: none;
    opacity: 0;
    animation: banner-sheen 3s ease-in-out .45s backwards;
  }

  .motion-reveal {
    animation: content-arrive .65s cubic-bezier(.2, .7, .2, 1) var(--motion-delay, 0ms) backwards;
  }

  #testimonial-carousel .published-review {
    animation: quote-arrive .38s ease-out;
  }

  .main-nav a:not(.nav-cta) {
    position: relative;
  }

  .main-nav a:not(.nav-cta)::after {
    content: '';
    position: absolute;
    inset: auto 0 3px;
    height: 1px;
    background: var(--cyan);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
  }

  .main-nav a:not(.nav-cta):is(:hover, :focus-visible, [aria-current])::after {
    transform: scaleX(1);
  }

  @media (hover: hover) and (pointer: fine) {
    .service-preview,
    .explore-links > a,
    .library-starter,
    .music-track {
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }

    .service-preview:hover,
    .library-starter:hover {
      transform: translateY(-5px);
      border-color: var(--cyan);
      box-shadow: 0 14px 32px #00000024, 0 0 24px #55dcff09;
    }

    .explore-links > a:hover,
    .music-track:hover {
      transform: translateY(-3px);
    }

    .testimonial-controls button {
      transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
    }

    .testimonial-controls button:hover {
      transform: scale(1.08);
      background: #173d52;
    }
  }
}