/* ===== motion layer ===== */
.loader{display:none}
.js .loader{display:block;position:fixed;inset:0;z-index:100;background:#0b0b0b;color:#fff;opacity:1;transition:opacity .6s ease}
.js .loader.out{opacity:0;pointer-events:none}
.js .loader.in{opacity:0;animation:ldin .45s ease forwards}
@keyframes ldin{to{opacity:1}}
.ld-lens{position:absolute;left:50%;top:50%;height:clamp(140px,13vw,220px);display:flex;gap:clamp(70px,7vw,120px);transform:translate(-50%,-50%)}
.ld-lens svg{height:100%;width:auto;overflow:visible}
.ld-shape{fill:transparent;stroke:#fff;stroke-width:.8;stroke-dasharray:520;stroke-dashoffset:520;transition:stroke-dashoffset 1s cubic-bezier(.77,0,.175,1),fill .35s ease}
.ld-gap{fill:#0b0b0b}
.loader.draw .ld-shape{stroke-dashoffset:0}
.loader.fill .ld-shape{fill:#fff;stroke-dashoffset:0}
.loader.quick .ld-shape{transition:none}
.ld-count{position:absolute;right:var(--m);top:50%;transform:translateY(-50%);font-variant-numeric:tabular-nums}
.loader.quick .ld-count{display:none}

/* line reveal */
.split .ln{display:block;overflow:hidden;padding-bottom:.22em;margin-bottom:-.22em}
.split .ln-in{display:block;transform:translateY(110%);transition:transform 1s cubic-bezier(.77,0,.175,1)}
.split.shown .ln-in{transform:none}
.split .w{display:inline}

/* image reveal */
.js [data-reveal]{overflow:hidden}
.js [data-reveal] img{clip-path:inset(100% 0 0 0);transform:scale(1.12);transition:clip-path 1.2s cubic-bezier(.77,0,.175,1),transform 1.6s cubic-bezier(.23,1,.32,1)}
.js [data-reveal].shown img{clip-path:inset(0 0 0 0);transform:none}

/* chrome fades in after loader */
.js .nav,.js .logo.small,.js .proj .back,.js .foot-l,.js .foot-r{opacity:0;transition:opacity .8s ease .2s}
.js.ready .nav,.js.ready .logo.small,.js.ready .proj .back,.js.ready .foot-l,.js.ready .foot-r{opacity:1}

/* underline grow on links */
a.u{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:.08em;transition:background-size .5s cubic-bezier(.77,0,.175,1)}
@media (hover:hover){a.u:hover{background-size:0 1px;background-position:100% 100%}}
.nav a,.list a{transition:opacity .2s ease}
@media (hover:hover){.nav a:not(.u):hover{opacity:.55}}

/* lens floating over the about photo */
.float-lens{position:fixed;left:50%;top:50%;width:9.05vw;height:9.05vw;transform:translate(-50%,-50%) scale(.6);opacity:0;z-index:25;pointer-events:none;transition:opacity .4s ease,transform .7s cubic-bezier(.23,1,.32,1)}
.float-lens.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.float-lens svg{width:100%;height:100%}
.about .photo img{transition:filter 1.4s ease}
.about .photo::after{content:"";position:absolute;inset:0;background:#0b0b0b;opacity:.35;pointer-events:none}

/* project screens: alternate frames like a case-study board */
.proj .shots figure{overflow:hidden}
@media (prefers-reduced-motion:reduce){.js .loader{display:none}.split .ln-in{transform:none!important;transition:none}.js [data-reveal] img{clip-path:none;transform:none}}

@media (max-width:760px){.float-lens{display:none}}

.float-lens{color:#efefec}.float-lens rect.gap{fill:#0b0b0b}

/* staggered rise for list items */
.js [data-rise]{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform 1s cubic-bezier(.23,1,.32,1)}
.js [data-rise].shown{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-rise]{opacity:1;transform:none}}