/* Extra motion shared by every page. All of it switches off for reduced motion. */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); background: linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--acc) 40%, #fff)); pointer-events: none; }

/* nav: slides away while reading down, returns on scroll up, marks the current section */
.nav { transition: transform .45s var(--ease); }
.nav.hide { transform: translateY(-110%); }
.pill a.cur { background: var(--glass2); color: var(--fg); }

/* hero name, letter by letter */
.js .hero-in > h1.split { animation: none; }
.split .ch { display: inline-block; animation: chIn .9s var(--ease) both; animation-delay: calc(.15s + var(--i) * 38ms); }
@keyframes chIn { from { opacity: 0; transform: translateY(.5em) rotate(4deg); filter: blur(8px); } }

/* line art follows the pointer */
.art i { transition: translate .9s var(--ease); }
.art .l1 { translate: calc(var(--ox, 0) * -1px) calc(var(--oy, 0) * -1px); }
.art .l2 { translate: calc(var(--ox, 0) * 1.6px) calc(var(--oy, 0) * 1.6px); }

/* headings and labels come into focus */
.js h2.rv, .js .label.rv { filter: blur(8px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.js h2.rv.in, .js .label.rv.in { filter: none; }

/* timeline dots pop in */
.js .ev:before { transform: scale(0); transition: transform .6s var(--ease) .35s; }
.js .ev.in:before { transform: none; }

/* inner page headers rise in */
.js .page-top .mid > *, .js .page-top .narrow > * { animation: rise .8s var(--ease) both; }
.js .page-top .mid > :nth-child(3), .js .page-top .narrow > :nth-child(3) { animation-delay: .06s; }
.js .page-top .mid > :nth-child(4), .js .page-top .narrow > :nth-child(4) { animation-delay: .12s; }
.js .page-top .mid > :nth-child(5), .js .page-top .narrow > :nth-child(5) { animation-delay: .18s; }
.js .page-top .mid > :nth-child(6), .js .page-top .narrow > :nth-child(6) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
.js .lost .box > * { animation: rise .9s var(--ease) both; }
.js .lost .box > :nth-child(2) { animation-delay: .1s; }
.js .lost .box > :nth-child(3) { animation-delay: .2s; }
.js .lost .box > :nth-child(4) { animation-delay: .3s; }

/* project and team cards: pointer glow and a slight tilt */
.pj { position: relative; overflow: hidden; --mx: 50%; --my: 0%; }
.pj:before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(22rem circle at var(--mx) var(--my), color-mix(in srgb, var(--acc) 18%, transparent), transparent 65%); }
.pj:hover:before { opacity: 1; }
.pj > * { position: relative; }
.pj .go a { transition: letter-spacing .3s var(--ease); }
.pj:hover .go a:first-child { letter-spacing: .06em; }
@media (hover: hover) and (pointer: fine) {
    .js .pj.in { transform: perspective(1000px) translateY(var(--ty, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
    .js .pj.in:hover { --ty: -6px; transition: transform .2s ease-out, background .3s; }
}
.js .pc.in:hover { transform: translateY(-6px); }
.js .skc.in:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
    .progress { display: none; }
    .nav.hide { transform: none; }
    .split .ch, .js .page-top .mid > *, .js .page-top .narrow > *, .js .lost .box > * { animation: none; }
    .js h2.rv, .js .label.rv { filter: none; }
    .js .ev:before { transform: none; transition: none; }
    .art i { transition: none; translate: none !important; }
}

/* once the page has scrolled, only the logo gets a soft blurred backdrop so it stays readable */
.nav { transition: transform .45s var(--ease); }
.logo { padding: .42rem .95rem; margin-left: -.95rem; border-radius: 99px; border: 1px solid transparent; transition: background .3s, border-color .3s, box-shadow .3s, backdrop-filter .3s, -webkit-backdrop-filter .3s; }
.nav.scrolled .logo { background: var(--glass); border-color: var(--edge2); border-top-color: var(--edge); border-left-color: var(--edge); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .1); }