/* Arrival motion. Transform and opacity only — nothing here blurs, and
   nothing wearing backdrop-filter is animated (DESIGN §81, §83). */

.has-motion [data-anim] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .62s cubic-bezier(.22, .61, .36, 1),
              transform .62s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.has-motion [data-anim].is-in { opacity: 1; transform: none; will-change: auto; }

/* Sideways arrivals, for things that read as coming from a direction. */
.has-motion [data-anim="left"]  { transform: translate3d(-22px, 0, 0); }
.has-motion [data-anim="right"] { transform: translate3d(22px, 0, 0); }
.has-motion [data-anim="scale"] { transform: scale(.965); }

/* An SVG line that draws itself. */
.has-motion [data-anim="draw"] { opacity: 1; transform: none; stroke-dasharray: var(--len, 300); stroke-dashoffset: var(--len, 300); transition: stroke-dashoffset 1s ease-out; }
.has-motion [data-anim="draw"].is-in { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .has-motion [data-anim], .has-motion [data-anim].is-in { opacity: 1; transform: none; transition: none; }
  .has-motion [data-anim="draw"] { stroke-dashoffset: 0; transition: none; }
  .has-motion [data-parallax] { transform: none !important; }
}