.js-motion [data-words] .w { display: inline-block; clip-path: inset(-0.4em -0.3em -0.24em -0.3em); }
.js-motion [data-words] .wi {
  display: inline-block; translate: 0 115%; opacity: 0;
  transition: translate 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--wd, 0s), opacity 0.6s ease var(--wd, 0s);
}
.js-motion [data-words].is-in .wi { translate: none; opacity: 1; }

.js-motion [data-reveal] {
  opacity: 0; translate: 0 14px;
  transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--d, 0) * 110ms);
}
.js-motion [data-reveal].is-in { opacity: 1; translate: none; }
.js-motion .aside[data-reveal] {
  rotate: -5deg;
  transition: opacity 0.8s ease, translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), rotate 1s cubic-bezier(0.3, 1.4, 0.5, 1);
  transition-delay: calc(var(--d, 0) * 110ms);
}
.js-motion .aside[data-reveal].is-in { rotate: none; }

.js-motion [data-draw] :is(path, line, polyline) {
  stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len);
  transition: stroke-dashoffset var(--dur, 0.9s) cubic-bezier(0.65, 0, 0.35, 1) calc(var(--ad, 0s) + 0.15s);
}
.js-motion [data-draw].is-in :is(path, line, polyline) { stroke-dashoffset: 0; }

.js-motion [data-card]:not(.is-in) { translate: var(--sx) var(--sy); box-shadow: 0 0 2px var(--c-shadow, rgb(0 0 0 / 0.25)); }
.js-motion [data-card].is-in { animation: card-lift 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
@keyframes card-lift { from { translate: var(--sx) var(--sy); box-shadow: 0 0 2px var(--c-shadow, rgb(0 0 0 / 0.25)); } }
.js-motion [data-card]:not(.is-in) .card-photo,
.js-motion [data-zoom]:not(.is-in) img { scale: 1.06; }
.js-motion [data-card] .card-photo,
.js-motion [data-zoom] img { transition: scale 1.8s cubic-bezier(0.2, 0.7, 0.2, 1); }

.js-motion [data-grow] { scale: 0 1; transform-origin: var(--grow-from, left) center; transition: scale 1s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--d, 0) * 110ms); }
.js-motion [data-grow].is-in { scale: 1 1; }

.js-motion [data-wipe]::before { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--d, 0) * 110ms); }
.js-motion [data-wipe].is-in::before { clip-path: inset(0 0 0 0); }