@layer hpds-motion {
  html.hpds-js body.hpds-enabled.hpds-module-motion [data-hpds-animate] {
    opacity: 0;
    transition-duration: var(--hpds-motion-duration, var(--hpds-duration-slow));
    transition-property: opacity, transform;
    transition-timing-function: var(--hpds-ease-emphasis);
    will-change: opacity, transform;
  }

  html.hpds-js body.hpds-enabled.hpds-module-motion [data-hpds-animate="fade-up"] { transform: translateY(1.5rem); }
  html.hpds-js body.hpds-enabled.hpds-module-motion [data-hpds-animate="fade-down"] { transform: translateY(-1.5rem); }
  html.hpds-js body.hpds-enabled.hpds-module-motion [data-hpds-animate="fade-inline"] { transform: translateX(1.5rem); }
  html.hpds-js body.hpds-enabled.hpds-module-motion [data-hpds-animate="scale"] { transform: scale(0.975); }

  html.hpds-js body.hpds-enabled.hpds-module-motion [data-hpds-animate].is-visible {
    opacity: 1;
    transform: none;
  }

  body.hpds-enabled.hpds-module-motion .hpds-motion-media {
    animation: hpds-background-drift var(--hpds-motion-duration, 18s) var(--hpds-ease-standard) infinite alternate;
    transform: scale(1.035);
    transform-origin: var(--hpds-motion-origin, 50% 50%);
    will-change: transform;
  }

  body.hpds-enabled.hpds-module-motion .hpds-motion-texture::before {
    animation: hpds-texture-shift var(--hpds-motion-duration, 24s) linear infinite;
    background-image: var(--hpds-motion-texture, none);
    background-position: 0 0;
    background-repeat: repeat;
    content: "";
    inset: 0;
    opacity: var(--hpds-motion-opacity, 0.12);
    pointer-events: none;
    position: absolute;
  }

  body.hpds-enabled.hpds-module-motion .hpds-motion-track {
    animation: hpds-track var(--hpds-motion-duration, 24s) linear infinite;
    inline-size: max-content;
  }

  body.hpds-enabled.hpds-module-motion :where(.hpds-brand-runway, .hpds-motion-marquee):hover .hpds-motion-track,
  body.hpds-enabled.hpds-module-motion :where(.hpds-brand-runway, .hpds-motion-marquee):focus-within .hpds-motion-track {
    animation-play-state: paused;
  }

  html.hpds-js body.hpds-enabled.hpds-module-motion [data-hpds-animate="clip-reveal"] {
    clip-path: inset(0 100% 0 0);
    opacity: 1;
    transform: none;
    transition-property: clip-path;
  }

  html.hpds-js body.hpds-enabled.hpds-module-motion [data-hpds-animate="clip-reveal"].is-visible {
    clip-path: inset(0 0 0 0);
  }

  body.hpds-enabled.hpds-module-motion .hpds-signature-reveal {
    overflow: hidden;
    position: relative;
  }

  body.hpds-enabled.hpds-module-motion .hpds-signature-reveal__media {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 900ms var(--hpds-ease-signature, var(--hpds-ease-emphasis));
  }

  body.hpds-enabled.hpds-module-motion .hpds-signature-reveal.is-visible .hpds-signature-reveal__media {
    clip-path: inset(0 0 0 0);
  }

  body.hpds-enabled.hpds-module-motion [data-hpds-stagger] > * {
    transition-delay: calc(var(--hpds-stagger-index, 0) * 70ms);
  }

  @keyframes hpds-background-drift {
    from { transform: scale(1.035) translate3d(0, 0, 0); }
    to { transform: scale(1.075) translate3d(0.75%, -0.5%, 0); }
  }

  @keyframes hpds-texture-shift {
    to { background-position: 12rem 7rem; }
  }

  @keyframes hpds-track {
    to { transform: translateX(50%); }
  }

  @media (prefers-reduced-motion: reduce) {
    html.hpds-js body.hpds-enabled.hpds-module-motion [data-hpds-animate],
    body.hpds-enabled.hpds-module-motion .hpds-motion-media,
    body.hpds-enabled.hpds-module-motion .hpds-motion-texture::before,
    body.hpds-enabled.hpds-module-motion .hpds-motion-track,
    body.hpds-enabled.hpds-module-motion .hpds-signature-reveal__media {
      animation: none;
      clip-path: none;
      opacity: 1;
      scroll-behavior: auto;
      transform: none;
      transition: none;
    }
  }
}