/* PerFit scroll scenes. */
.motion-hero-track { position: relative; }
.motion-hero-track.is-pinned > .hero { position: sticky; top: 0; }
.motion-on .motion-hero-track.is-pinned .hero-film { z-index: 2; contain: layout paint; }
.motion-on .motion-hero-track.is-pinned .request-note { z-index: 3; }
.motion-on .ur-proof { position: relative; z-index: 4; background: var(--ivory); }

/* Lines travel through a mask, keeping the original font and line breaks. */
.motion-line { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.motion-line > span { display: block; }
.motion-on [data-motion-title]:not(.motion-visible) .motion-line > span { transform: translate3d(0, 112%, 0); }
.motion-on [data-motion-title] .motion-line > span {
  transition: transform 1s cubic-bezier(.19,1,.22,1);
  transition-delay: calc(var(--line-order, 0) * 85ms);
}
.motion-on .motion-enter {
  transition: transform 1.05s cubic-bezier(.19,1,.22,1), opacity .8s ease;
  transition-delay: var(--motion-delay, 0ms);
}
.motion-on .motion-enter:not(.motion-visible) { opacity: 0; transform: translate3d(0, 38px, 0); }
.motion-on .motion-enter.motion-panel:not(.motion-visible) { transform: translate3d(0, 68px, 0) scale(.975); }
.motion-on .ur-studio.motion-enter { transform-origin: 50% 20%; }
.motion-on .loop-demo.motion-enter { transform-origin: 50% 0; }
.motion-on .trend-band { clip-path: inset(0 var(--motion-inset, 0px)); }
.motion-on .motion-ink { color: rgb(var(--motion-color, 21,21,21)); }
.motion-on .proof-head::after { transform-origin: left; }
.motion-page-progress { position: fixed; inset: 0 0 auto; z-index: 91; height: 2px; pointer-events: none; background: #faf7f2; mix-blend-mode: difference; transform: scaleX(0); transform-origin: 0 50%; }
html:not(.motion-on) .motion-page-progress { display: none; }
.motion-on .faq details { transition-delay: 0ms; }

/* Scroll scenes preserve the approved layouts at the end of each sequence. */
.motion-ur-track, .motion-gallery-track, .motion-demand-track, .motion-loop-track { display: contents; }
.motion-gallery-orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.motion-gallery-orbit > .cyl { left: 0; top: 0; }
.motion-agent-title, .motion-loop-phrase { display: inline-block; transform-origin: 0 0; }
.motion-scenes .motion-ur-track, .motion-scenes .motion-gallery-track,
.motion-scenes .motion-demand-track, .motion-scenes .motion-loop-track { display: block; position: relative; }
.motion-scenes .motion-ur-track { background: var(--ivory); z-index: 4; }
.motion-scenes .motion-ur-track > .ur-proof { position: sticky; }
.motion-scenes .ur-phone { position: relative; z-index: 3; will-change: transform; }
.motion-scenes .trend-band { clip-path: none; overflow: clip; }
.motion-scenes .motion-gallery-track { margin: 64px 0 72px; }
.motion-scenes .motion-gallery-track > .roll { position: sticky; margin: 0; }
.motion-scenes .motion-gallery-orbit { will-change: transform; }
.motion-scenes .motion-demand-track { background: #151515; }
.motion-scenes .motion-demand-track > .brands { position: sticky; transform-origin: 50% 60%; }
.motion-scenes .how { position: relative; z-index: 5; background: var(--ivory); box-shadow: 0 -24px 80px #1515150c; }
.motion-scenes .motion-loop-track { margin-bottom: clamp(20px, 2.5vw, 36px); }
.motion-scenes .motion-loop-track > .loop-title { position: sticky; margin-bottom: 0; }
.motion-scenes .loop-title .eyebrow { width: fit-content; }
.motion-scenes .motion-agent-title, .motion-scenes .motion-loop-phrase { will-change: transform; }
.motion-scenes #how-title { text-wrap: nowrap; }

@media (max-width: 820px) {
  .motion-on .motion-enter:not(.motion-visible) { transform: translate3d(0,24px,0); }
  .motion-on .motion-enter.motion-panel:not(.motion-visible) { transform: translate3d(0,36px,0); }
}
@media (prefers-reduced-motion: reduce) {
  .motion-on .motion-enter, .motion-on .motion-line > span { transition: none !important; transform: none !important; opacity: 1 !important; }
  .motion-on .trend-band { clip-path: none; }
}