@media (prefers-reduced-motion: no-preference) {
  :root {
    --motion-duration: 460ms;
    --motion-distance: 16px;
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-hero-step: 60ms;
    --motion-content-step: 40ms;
    --motion-log-duration: 300ms;
    --motion-log-start: 200ms;
    --motion-log-step: 26ms;
  }

   
  .motion-ready [data-motion="hero"] {
    animation: motion-rise var(--motion-duration) var(--motion-ease)
      calc(100ms + var(--motion-order, 0) * var(--motion-hero-step)) backwards;
  }

   
  .motion-ready .card.active [data-motion="content"] {
    animation: motion-rise var(--motion-duration) var(--motion-ease)
      calc(80ms + var(--motion-order, 0) * var(--motion-content-step)) backwards;
  }

   
  [data-motion="log"] {
    --motion-log-delay: calc(var(--motion-log-start) + var(--motion-order, 0) * var(--motion-log-step));
  }

  .motion-ready .card.active [data-motion="log"] {
    animation: motion-log-in var(--motion-log-duration) var(--motion-ease)
      var(--motion-log-delay) backwards;
  }

  .motion-ready .card.active [data-motion="log"]::before {
    transform-origin: top;
    animation: motion-line-in var(--motion-log-duration) var(--motion-ease)
      var(--motion-log-delay) backwards;
  }

  .motion-ready .card.active [data-motion="log"]:not(:last-of-type)::after {
    animation: motion-node-in var(--motion-log-duration) ease-out
      var(--motion-log-delay) backwards;
  }

   
  :where([data-motion-button]) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: scale 160ms var(--motion-ease);
  }

  [data-motion-button]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 20%,
      rgba(var(--accent-rgb), 0.12) 38%, rgba(255, 255, 255, 0.38) 50%,
      rgba(var(--accent-rgb), 0.12) 62%, transparent 80%);
    opacity: 0;
    pointer-events: none;
  }

  [data-motion-button]:active {
    scale: 0.96;
  }

  [data-motion-button]:focus-visible::after {
    animation: motion-button-sheen 500ms ease-in-out;
  }

  @media (hover: hover) and (pointer: fine) {
    [data-motion-button]:hover::after {
      animation: motion-button-sheen 500ms ease-in-out;
    }
  }

  @media (max-width: 959px) {
    :root {
      --motion-duration: 340ms;
      --motion-distance: 9px;
      --motion-hero-step: 40ms;
      --motion-content-step: 28ms;
      --motion-log-duration: 220ms;
      --motion-log-start: 150ms;
      --motion-log-step: 20ms;
    }
  }

   
  @keyframes motion-rise {
    from { opacity: 0; translate: 0 var(--motion-distance); }
    to { opacity: 1; translate: 0 0; }
  }

  @keyframes motion-log-in {
    from { opacity: 0; translate: calc(var(--motion-distance) * -0.5) 0; }
    to { opacity: 1; translate: 0 0; }
  }

  @keyframes motion-line-in {
    from { scale: 1 0; }
    to { scale: 1 1; }
  }

  @keyframes motion-node-in {
    from { opacity: 0; scale: 0.65; }
    65% {
      opacity: 1;
      scale: 1.2;
      background-color: var(--accent);
      box-shadow: 0 0 0 2px var(--bg), 0 0 8px rgba(var(--accent-rgb), 0.5);
    }
    to { opacity: 1; scale: 1; }
  }

  @keyframes motion-button-sheen {
    0% { opacity: 0; translate: -110% 0; }
    20%, 65% { opacity: 1; }
    100% { opacity: 0; translate: 110% 0; }
  }
}