/* Motion polish. Everything here is transform / opacity / clip-path, and only applies when JS has marked the page `mo`
   (never under reduced motion). motion.js adds `.in` as things arrive. */
:root { --ease: cubic-bezier(.2, .7, .2, 1); }

/* soft cross-fade between pages */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .28s ease both vtOut; }
::view-transition-new(root) { animation: .5s ease .05s both vtIn; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; } }

/* nav links: a line draws under them instead of just dimming */
.links a { position: relative; padding: 6px 0; }
.links a:hover { opacity: 1; }
.links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.links a:hover::after, .links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* buttons */
.pill-btn { transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease); }
.pill-btn:hover { transform: translateY(-3px); }
.pill-btn:active { transform: translateY(0) scale(.98); }

/* work rows: the picture unveils upward while the image settles, then the title and tag follow */
.mo .row .media { clip-path: inset(0 0 100% 0 round clamp(14px, 1.7vw, 26px)); transition: clip-path 1.3s var(--ease); }
.mo .row .media img { transform: translate3d(0, var(--py, 0px), 0) scale(1.14); transition: transform 1.6s var(--ease); will-change: transform; }
.mo .row.in .media { clip-path: inset(0 0 0 0 round clamp(14px, 1.7vw, 26px)); }
.mo .row.in .media img { transform: translate3d(0, var(--py, 0px), 0) scale(1.08); }
.mo .row.in .card:hover .media img { transform: translate3d(0, var(--py, 0px), 0) scale(1.13); transition-duration: 1.2s; }
.mo .row .copy h2 { opacity: 0; transform: translateY(46px); transition: opacity .9s ease .35s, transform 1.2s var(--ease) .35s; }
.mo .row .copy p { opacity: 0; transform: translateY(16px); transition: opacity .9s ease .6s, transform 1s var(--ease) .6s; }
.mo .row.in .copy h2, .mo .row.in .copy p { opacity: 1; transform: none; }

/* generic arrivals */
/* the legal and contact pages get data-rv from motion.js after load, so hide them from the first paint too (otherwise they flash, fade out and fade back in) */
.mo .legal .eyebrow, .mo .legal h1, .mo .legal .lede, .mo .legal .prose, .mo .contact .eyebrow, .mo .contact h1, .mo .contact .c-form, .mo .contact .c-side,
.mo [data-rv] { opacity: 0; transform: translateY(34px); transition: opacity 1s ease var(--d, 0s), transform 1.2s var(--ease) var(--d, 0s); }
.mo [data-rv].in { opacity: 1; transform: none; }


/* cursor-following glow on the footer wordmark colour is handled in CSS (hover); keep the arrow button lively */
.totop b { transition: transform .5s var(--ease), background .3s; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}