/* Motion only: no colours, backgrounds or layout change here. Used with assets/motion.js on the site pages. */
  .mo .page { animation: mo-page .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes mo-page { from { opacity: 0; } to { opacity: 1; } }
/* headings: each word slides up out of a mask, one after another */
.mo .split.reveal { opacity: 1; transform: none; filter: none; }
.mw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.mwi { display: inline-block; transform: translateY(108%); transition: transform 1.05s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 55ms + 80ms); }
.split.in .mwi { transform: none; }
/* buttons follow the pointer slightly and spring back */
.mag { transition: transform .45s cubic-bezier(.2, .8, .2, 1), background .2s, color .2s, border-color .2s, opacity .2s; will-change: transform; }
.btn .arr { display: inline-block; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.btn:hover .arr { transform: translateX(4px); }
/* the explainer video grows into place (driven by motion.js) */
.mo .hero-video { transform-origin: 50% 80%; will-change: transform, opacity; }
@media print { .mwi { transform: none !important; } .mo .page { animation: none; } }
/* opening intro: the logo draws itself on the page colour, then a window opens out of it and reveals the site */
html.intro .page, html.intro.mo .page, html.intro .sitebar { opacity: 0; animation: intro-safe .01s 1.8s forwards; }

@keyframes intro-safe { to { opacity: 1; } }
.intro-ov { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.intro-win { position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-radius: 28px; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 200vmax var(--bg); transition: width .6s cubic-bezier(.76, 0, .24, 1), height .6s cubic-bezier(.76, 0, .24, 1), border-radius .6s cubic-bezier(.76, 0, .24, 1); }
.intro-open .intro-win { width: 102vw; height: 102vh; border-radius: 0; }
.intro-logo { position: relative; display: flex; align-items: center; gap: .9rem; color: var(--ink); font: 600 clamp(2rem, 5vw, 3.2rem)/1 var(--f-sans, Inter, sans-serif); letter-spacing: -.045em;
  transition: opacity .25s ease, transform .6s cubic-bezier(.76, 0, .24, 1); }
.intro-open .intro-logo { opacity: 0; transform: scale(.92); }
.intro-logo svg { width: 1.25em; height: 1.25em; overflow: visible; }
.intro-logo path { stroke: currentColor; stroke-dasharray: 1; stroke-dashoffset: 1; animation: intro-draw .38s cubic-bezier(.65, 0, .35, 1) .02s forwards; }
.intro-logo .i2 { animation-delay: .16s; }
.intro-logo .i3 { fill: var(--accent); transform-box: fill-box; transform-origin: center; transform: scale(0); animation: intro-pop .3s cubic-bezier(.3, 1.6, .5, 1) .32s forwards; }
.intro-word { display: inline-block; overflow: hidden; padding-bottom: .08em; }
.intro-word span { display: inline-block; transform: translateY(110%); animation: intro-rise .45s cubic-bezier(.2, .8, .2, 1) .1s forwards; }
@keyframes intro-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-pop { to { transform: scale(1); } }
@keyframes intro-rise { to { transform: none; } }
/* the page's own entrance waits for the window */
html.intro-open.mo .page { animation: mo-page .5s cubic-bezier(.2, .8, .2, 1) both; }
html.intro .split.in .mwi { transform: translateY(108%); }   /* headings wait for the window, then slide up */
@media (prefers-reduced-motion: reduce) { .intro-ov { display: none; } html.intro .page, html.intro .sitebar { opacity: 1; animation: none; } }

/* cards rise into view like a curtain lifting (the clip is removed once they are in) */
.mo .curtain.reveal { opacity: 1; filter: none; transform: translateY(40px) scale(.97); clip-path: inset(100% 0 0 0 round var(--r, 14px));
  transition: clip-path 1.1s cubic-bezier(.77, 0, .18, 1), transform 1.2s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
.mo .curtain.reveal.in { transform: none; clip-path: inset(-40px -40px -40px -40px round var(--r, 14px)); }
.mo .curtain.reveal.curtained { clip-path: none; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.mo .curtain.reveal.d1 { --d: .08s; } .mo .curtain.reveal.d2 { --d: .16s; } .mo .curtain.reveal.d3 { --d: .24s; } .mo .curtain.reveal.d4 { --d: .32s; }

/* 3D tilt and a light that follows the mouse */
.tilt { position: relative; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .4s, border-color .3s; will-change: transform; }
.tilt:hover { box-shadow: 0 30px 60px -28px rgba(20, 12, 4, .35); }
.sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%); }
.tilt:hover .sheen { opacity: 1; }

/* cursor ring */
.cur { position: fixed; left: 0; top: 0; z-index: 1001; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; pointer-events: none;
  border: 1.5px solid color-mix(in srgb, var(--accent) 75%, transparent); opacity: 0; transition: opacity .3s, width .35s cubic-bezier(.2, .8, .2, 1), height .35s cubic-bezier(.2, .8, .2, 1), margin .35s cubic-bezier(.2, .8, .2, 1), background .3s, border-color .3s; }
.cur.on { opacity: 1; }
.cur.big { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: transparent; }
.cur.press { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
.dl-open .cur, .intro .cur { opacity: 0; }

/* scroll progress line */
.scroll-line { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 70; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
  background: linear-gradient(90deg, var(--accent), var(--flare)); }
@media print { .cur, .scroll-line, .leave-ov, .sheen { display: none !important; } .mo .curtain.reveal { clip-path: none !important; transform: none !important; } }
@media (prefers-reduced-motion: reduce) { .cur, .scroll-line, .leave-ov, .sheen { display: none; } }
.cur.off { opacity: 0; }
.scroll-line.gone { display: none; }