/* MUUS motion layer. Shared by the homepage and the case template.
   Tokens: MUUS Bible v2 BRAND register (same values as website-plan prototype). */
@font-face{font-family:"Zalando Sans Expanded";src:url(fonts/zalando-sans-expanded-latin-wght-normal.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Zalando Sans SemiExpanded";src:url(fonts/zalando-sans-semiexpanded-latin-wght-normal.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Zalando Sans";src:url(fonts/zalando-sans-latin-wght-normal.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

@view-transition{navigation:auto}

:root{
  --spark:#EEFB87;--butter:#F0EB9A;--void:#0A0A0B;--ink:#1E1E1D;--site:#26251F;--raise:#302E27;--rule:#3A382F;
  --cream:#F4F2E8;--fg2:#D8D4C6;--mute:#A9A69A;--ash:#2B2A27;
  --f-disp:"Zalando Sans Expanded","Zalando Sans",ui-sans-serif,system-ui,sans-serif;
  --f-head:"Zalando Sans SemiExpanded","Zalando Sans",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Zalando Sans",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --m:64px;--ease:cubic-bezier(.23,.88,.26,.92);
  color-scheme:dark;
}
@media (max-width:900px){:root{--m:24px}}
@media (max-width:600px){:root{--m:16px}}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--void);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--site);color:var(--cream);font:500 18px/1.6 var(--f-body);overflow-x:clip}
@media (max-width:600px){body{font-size:16px}}
img,video,canvas{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--spark);color:var(--ink)}
:focus-visible{outline:2px solid var(--spark);outline-offset:3px}

.lbl{font:500 11px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.disp{font-family:var(--f-disp);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.84}
.h1{font:900 clamp(36px,5.2vw,84px)/.92 var(--f-disp);letter-spacing:-.04em;text-transform:uppercase}
.h2{font:800 clamp(22px,2.6vw,40px)/1.12 var(--f-head);letter-spacing:-.01em}
.wrap{padding-inline:var(--m)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* split text helpers: a mask per line or word, the inner span moves */
.sw{display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.sw>span{display:inline-block;will-change:transform}

/* grain: a 128px tile jittered at 8 fps on the compositor */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;background:url(img/grain-128.png);opacity:.06;animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-4%,3%)}33%{transform:translate(3%,-5%)}50%{transform:translate(-6%,-2%)}67%{transform:translate(5%,4%)}83%{transform:translate(-2%,6%)}100%{transform:translate(0,0)}}

/* light leaks: two warm blooms drifting, screen blended */
.leak{position:absolute;pointer-events:none;border-radius:50%;filter:blur(60px);mix-blend-mode:screen;opacity:.0;will-change:transform}
.leak.a{width:60vmax;height:40vmax;left:-20vmax;top:-10vmax;background:radial-gradient(closest-side,rgb(255 150 60 / .55),transparent);animation:leakA 14s var(--ease) infinite alternate}
.leak.b{width:50vmax;height:36vmax;right:-18vmax;bottom:-8vmax;background:radial-gradient(closest-side,rgb(238 251 135 / .35),transparent);animation:leakB 18s var(--ease) infinite alternate}
@keyframes leakA{from{transform:translate(0,0) rotate(0)}to{transform:translate(18vmax,10vmax) rotate(25deg)}}
@keyframes leakB{from{transform:translate(0,0)}to{transform:translate(-14vmax,-12vmax)}}

/* nav: blends over anything */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--m);mix-blend-mode:difference;color:#fff;pointer-events:none}
.nav>*{pointer-events:auto}
.mark{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font:900 18px/1 var(--f-disp);letter-spacing:.02em}
.mark svg{width:18px;height:26px;fill:currentColor}
.nav ul{display:flex;gap:28px;list-style:none}
.nav ul a{font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;display:inline-flex;min-height:44px;align-items:center}
@media (max-width:900px){.nav{flex-wrap:wrap;row-gap:0;padding-top:10px;padding-bottom:4px}.nav ul{order:3;width:100%;gap:16px}.nav ul li:nth-child(n+5){display:none}}

/* buttons: solid spark pill, line button; magnetic wrapper moves, label moves a bit more */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 26px;font:700 16px/1 var(--f-head);text-decoration:none;white-space:nowrap;border-radius:28px;will-change:transform}
.btn>span{display:inline-block;pointer-events:none}
.btn-spark{background:var(--spark);color:var(--ink)}
.btn-line{border:1px solid currentColor;color:var(--cream)}
.btn-line:hover{background:var(--cream);color:var(--ink)}
.btn .arr{font-family:var(--f-mono);font-weight:500}

/* cursor: dot + ring, and a video window for work titles */
.cur,.ring,.peek{position:fixed;left:0;top:0;z-index:80;pointer-events:none;will-change:transform}
.cur{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--cream);mix-blend-mode:difference}
.ring{width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:1px solid rgb(244 242 232 / .5);transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,border-color .3s}
.ring.on{width:84px;height:84px;margin:-42px 0 0 -42px;background:rgb(244 242 232 / .08);border-color:transparent}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:500 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;opacity:0;transition:opacity .2s}
.ring.on b{opacity:1}
.peek{width:340px;height:212px;margin:-106px 0 0 40px;overflow:hidden;clip-path:inset(50% 50% 50% 50%);background:var(--raise)}
.peek video{width:100%;height:100%;object-fit:cover}
.has-cursor,.has-cursor a,.has-cursor button{cursor:none}
@media (hover:none),(pointer:coarse){.cur,.ring,.peek{display:none}}

/* page transition curtain */
.pt{position:fixed;inset:0;z-index:100;background:var(--void);display:grid;place-items:center;pointer-events:none;clip-path:inset(100% 0 0 0)}
.pt svg{width:min(22vw,160px);height:auto;fill:var(--spark)}
.pt.cover{clip-path:inset(0 0 0 0)}

/* reduced motion: still, readable, nothing hidden */
@media (prefers-reduced-motion:reduce){
  .grain,.leak{animation:none}
  *{scroll-behavior:auto}
}
/* visually hidden text and the skip link */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:var(--m);top:12px;z-index:200;padding:12px 18px;background:var(--spark);color:var(--ink);font:700 14px/1 var(--f-head);text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none}