/* Layout: mobile-first on cobalt. The name is made of particles that scatter near your finger and under falling projects;
   scrolling morphs it through what I build, then work stacks up as cards and the full list wipes colour on hover. */
:root{
  --bg:#2b3dff;--ink:#ffffff;--ink-2:#d9dcff;--muted:#a9b0ff;--line:rgba(255,255,255,.22);--dark:#0d0f1f;
  --saas:#b6f0d8;--shop:#ffc2cf;--ops:#e3e7ff;--web:#ffe27a;--play:#d9f28f;--lead:#ffb38a;
  --display:"Archivo",system-ui,sans-serif;--body:"Instrument Sans",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
  --pad:20px;
}
@media(min-width:760px){:root{--pad:40px}}
*{box-sizing:border-box}
/* overflow-x:clip on both, not hidden: iOS Safari ignores hidden on body alone, and hidden on html would turn
   body into a scroll container and break every position:sticky on the page */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
@supports not (overflow:clip){body{overflow-x:hidden}}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cond{font-stretch:62%!important;font-variation-settings:"wdth" 62!important;text-transform:uppercase}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* loader: years count up, curtain lifts */
.pre{position:fixed;inset:0;z-index:70;background:var(--ink);color:var(--bg);display:grid;place-items:center;transition:transform .9s cubic-bezier(.76,0,.24,1)}
.pre.go{transform:translateY(-100%)}
.pre b{font:900 clamp(96px,34vw,320px)/1 var(--display);font-variation-settings:"wdth" 62;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pre small{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom));left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;font:12px var(--mono)}

.nav{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top)) var(--pad) 14px;font:600 14px var(--body);mix-blend-mode:difference;color:#fff}
.nav{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.nav.hide{transform:translateY(-100%)}
.nav b{font:900 18px var(--display);font-variation-settings:"wdth" 70}
.nav nav{display:flex;align-items:center;gap:18px}
.lang{display:flex;border:1.5px solid currentColor;border-radius:99px;padding:2px}
.lang button{border:0;background:none;border-radius:99px;padding:4px 9px;font:600 11px var(--mono);cursor:pointer;color:inherit}
.lang button[aria-pressed=true]{background:#fff;color:#000}

/* particle stage: hero + four word panels share one sticky canvas */
/* clip: the sticky canvas's negative margin lets it ride 100vh past the stage, over the next section */
.stage{position:relative;overflow:clip}
.stage>canvas{position:sticky;top:0;display:block;width:100%;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;pointer-events:none}
.hero{position:relative;height:100vh;height:100svh;overflow:hidden;touch-action:pan-y}
.hero .sub{position:absolute;top:45%;left:var(--pad);right:var(--pad);max-width:32ch;font-size:clamp(17px,2.2vw,21px);color:var(--ink-2);opacity:0;transform:translateY(12px);transition:opacity .8s .4s,transform .8s .4s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.ready .hero .sub{opacity:1;transform:none}
.hint{display:none;position:absolute;left:var(--pad);top:60%;font:12px var(--mono);color:var(--muted)}
.body{position:absolute;left:0;top:0;z-index:3;will-change:transform;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.chip{height:44px;padding:0 18px;border-radius:22px;background:var(--ink);color:var(--dark);font:700 15px var(--body);box-shadow:0 6px 0 rgba(0,0,0,.18)}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--c);margin-right:8px;box-shadow:0 0 0 1.5px var(--dark)}
.blob{border-radius:50%;background:var(--c);color:var(--dark);font:900 15px/1.05 var(--display);font-variation-settings:"wdth" 75;text-transform:uppercase;text-align:center;white-space:normal;padding:10px;box-shadow:0 8px 0 rgba(0,0,0,.18)}
@media(min-width:760px){.hint{display:block}.chip{height:52px;border-radius:26px;font-size:17px;padding:0 22px}.blob{font-size:19px}}
.panel{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--pad) calc(36px + env(safe-area-inset-bottom));pointer-events:none;overflow:hidden;overflow:clip}
/* caption: one proof number and the flagship project behind it */
.cap{position:relative;z-index:2;display:grid;gap:12px;max-width:540px;opacity:.15;transform:translateY(22px);transition:opacity .6s,transform .8s cubic-bezier(.2,.8,.2,1)}
.panel.on .cap{opacity:1;transform:none}
.cap .k{font:12px var(--mono);color:var(--c)}
.cap .big-row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.cap .big{font:900 clamp(68px,18vw,128px)/.82 var(--display);color:var(--c)}
.cap .unit{font:600 17px/1.25 var(--body);max-width:17ch;padding-bottom:6px}
.cap p{color:var(--ink-2);max-width:46ch;font-size:15px}
.cap .foot{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;font:12px var(--mono);color:var(--ink-2)}
.cap .see{pointer-events:auto;min-height:44px;padding:0 18px;border:0;border-radius:99px;background:var(--c);color:var(--dark);font:700 15px var(--body);cursor:pointer;transition:transform .25s}
.cap .see:hover{transform:translateY(-2px)}
/* floating screens: parallax drives `translate` (JS), the tilt is `rotate` and the slow bob is `margin-top`,
   so the three never overwrite each other. Phones: tucked top-right above the word. */
.float{position:absolute;z-index:1;right:var(--pad);top:calc(104px + env(safe-area-inset-top));width:min(52vw,220px);aspect-ratio:16/10;pointer-events:none;opacity:0;transition:opacity .8s}
.panel.on .float{opacity:1}
.fl{position:absolute;will-change:translate}
.fl img{display:block;width:100%;object-fit:cover;object-position:top}
.fl-win{inset:0;border-radius:10px;overflow:hidden;background:var(--dark);box-shadow:0 30px 60px -20px rgba(5,8,40,.55),0 0 0 1px rgba(255,255,255,.08);rotate:-4deg;animation:bob 6s ease-in-out infinite}
.fl-win .bar{display:flex;gap:5px;align-items:center;height:18px;padding:0 9px;background:#1a1d33}
.fl-win .bar i{width:6px;height:6px;border-radius:50%;background:#ff8f8f}.fl-win .bar i+i{background:#ffd66b}.fl-win .bar i+i+i{background:#8fe3b0}
.fl-win img{height:calc(100% - 18px)}
.fl-ph{left:-14%;bottom:-18%;width:27%;aspect-ratio:9/19;border-radius:14px;overflow:hidden;border:3px solid var(--dark);background:var(--dark);box-shadow:0 26px 50px -16px rgba(5,8,40,.6);rotate:7deg;animation:bob 5s -2s ease-in-out infinite}
.fl-ph img{height:100%}
.only-ph .fl-ph{width:34%;left:22%;bottom:-8%}
.only-ph .fl-ph+.fl-ph{left:60%;top:-14%;bottom:auto;rotate:-6deg;animation-delay:-4s}
.fl-tag{right:-4%;top:-12%;padding:6px 11px;border-radius:99px;background:var(--c);color:var(--dark);font:700 11px var(--body);white-space:nowrap;box-shadow:0 12px 24px -10px rgba(5,8,40,.5);rotate:3deg;animation:bob 4s -1s ease-in-out infinite}
.only-ph .fl-tag{right:auto;left:0;top:auto;bottom:4%}
@keyframes bob{0%,100%{margin-top:0}50%{margin-top:-12px}}
@media(min-width:1000px){
  .float{top:auto;bottom:9%;right:calc(var(--pad) + 2%);width:auto;height:min(42%,calc(42vw * 10 / 16))}
  .fl-win{border-radius:12px}.fl-win .bar{height:22px}.fl-win img{height:calc(100% - 22px)}
  .fl-ph{border-width:5px;border-radius:22px}
  .fl-tag{padding:8px 14px;font-size:13px;top:-9%}
}

/* skill stack: "full stack, literally". Each layer is a slab: a top face plus two side faces folded down in 3D.
   Its height in the stack is --i * --gap; picking a layer lifts the ones above (.up) and nudges it out (.on). */
.skills{padding:110px var(--pad) 40px}
.skills .sec-h{flex-direction:column;align-items:flex-start;justify-content:flex-start}
.skills .sec-h p{color:var(--ink-2);max-width:36ch;flex-basis:100%}
.sk-wrap{display:grid;gap:12px;align-items:center}
.sk-scene{height:450px;display:grid;place-items:end center;padding-bottom:36px;perspective:2200px}
.iso{--gap:40px;--up:54px;position:relative;width:180px;height:180px;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-42deg);transition:transform .25s ease-out}
.slab{all:unset;position:absolute;inset:0;transform-style:preserve-3d;cursor:pointer;
  transform:translateZ(calc(var(--i) * var(--gap) + var(--lift,0px))) translateX(var(--out,0px));transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .5s}
.slab:not(.drop){transform:translateZ(700px);opacity:0}
.slab.up{--lift:var(--up)}
.slab.on{--out:22px}
.slab:hover:not(.on){--out:8px}
.slab .top{position:absolute;inset:0;border-radius:5px;background:var(--c) repeating-linear-gradient(90deg,transparent 0 20px,rgba(13,15,31,.07) 20px 21px)}
.slab .s1,.slab .s2{position:absolute}
.slab .s1{left:0;top:100%;width:100%;height:24px;transform-origin:top;transform:rotateX(-90deg);display:flex;align-items:center;padding-left:10px;background:color-mix(in srgb,var(--c) 72%,#0d0f1f)}
.slab .s1 b{font:900 13px/1 var(--display);font-variation-settings:"wdth" 70;text-transform:uppercase;letter-spacing:.04em;color:var(--dark);white-space:nowrap}
.slab .s2{left:100%;top:0;width:24px;height:100%;transform-origin:left;transform:rotateY(90deg);background:color-mix(in srgb,var(--c) 55%,#0d0f1f)}
.slab:focus-visible .top{outline:3px solid var(--ink);outline-offset:3px}
.sk-panel{display:grid;gap:14px;align-content:start;min-height:340px}
.sk-panel .k{font:12px var(--mono);color:var(--c)}
.sk-panel h3{font:900 clamp(56px,13vw,104px)/.86 var(--display);color:var(--c)}
.sk-panel p{color:var(--ink-2);max-width:40ch}
.sk-panel .chips{display:flex;flex-wrap:wrap;gap:8px}
.sk-panel .chips span{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:99px;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.3);font-size:15px;font-weight:600;animation:chip .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--n) * 45ms)}
.sk-panel .chips span:has(i){padding-left:5px}
.sk-panel .chips i{flex:none;width:26px;height:26px;margin-right:9px;border-radius:50%;background:#fff;display:grid;place-items:center}
.sk-panel .chips i img{width:15px;height:15px;display:block}
@keyframes chip{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
.sk-panel .layers{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.sk-panel .layers button{min-height:44px;padding:0 13px;border-radius:99px;border:1.5px solid var(--c);background:none;font:600 13px var(--body);cursor:pointer}
.sk-panel .layers button[aria-pressed=true]{background:var(--c);color:var(--dark)}
@media(min-width:760px){
  .sk-scene{height:540px;padding-bottom:60px}
  .iso{--gap:50px;--up:60px;width:230px;height:230px}
  .slab .s1 b{font-size:15px}
}
/* wide screens: one screen tall. Stack on the left, heading and layer panel stacked on the right */
@media(min-width:1000px){
  .skills{min-height:100vh;min-height:100svh;padding:90px var(--pad) 40px;display:grid;grid-template-columns:1.1fr 1fr;grid-template-areas:"scene head" "scene panel";column-gap:32px;align-content:center}
  .sk-wrap{display:contents}
  .skills .sec-h{grid-area:head;margin-bottom:22px;align-self:end}
  .skills .sec-h h2{font-size:clamp(56px,6.4vw,112px)}
  .sk-scene{grid-area:scene;height:min(620px,calc(100svh - 130px));padding-bottom:50px}
  .sk-panel{grid-area:panel;min-height:0}
  .sk-panel h3{font-size:clamp(48px,4.6vw,80px)}
  .iso{--gap:54px;--up:66px;width:260px;height:260px}
  .slab.on{--out:40px}
}

/* stacking cards */
.work{padding:110px var(--pad) 40px}
.sec-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px;margin-bottom:28px}
.sec-h h2{font:900 clamp(56px,15vw,170px)/.82 var(--display)}
.sec-h span{font:12px var(--mono);color:var(--muted);white-space:nowrap}
@media(max-width:560px){.sec-h span{width:100%}}
.stack{display:grid;gap:24px}
.card{position:sticky;top:calc(70px + var(--i) * 14px);height:calc(100vh - 86px - var(--i) * 14px);height:calc(100svh - 86px - var(--i) * 14px);max-height:880px;border-radius:28px;background:var(--c);color:var(--dark);padding:22px;display:flex;flex-direction:column;gap:18px;overflow:hidden;transform-origin:50% 0;will-change:transform;box-shadow:0 -10px 40px -20px rgba(0,0,40,.5)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--dark);opacity:var(--dim,0);pointer-events:none;will-change:opacity}
.card:not(:has(.dev)){height:auto;min-height:56vh;min-height:56svh}
.card .info{display:flex;flex-direction:column;gap:12px;min-width:0}
.card:not(:has(.dev)) .info{flex:1}
.card .top{display:flex;justify-content:space-between;gap:12px;font:500 12px var(--mono);white-space:nowrap}
.card .top span:first-child{overflow:hidden;text-overflow:ellipsis}
.card h3{font:900 clamp(44px,13vw,150px)/.84 var(--display);overflow-wrap:anywhere}
.card:not(:has(.dev)) h3{margin-top:auto}
.card .tag{font-size:clamp(16px,2.1vw,21px);line-height:1.4;max-width:36ch;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.card .meta{display:flex;flex-wrap:wrap;gap:8px}
.card .meta span,.card .meta a{font:12px var(--mono);border:1.5px solid var(--dark);border-radius:99px;padding:5px 10px}
.card .meta a{background:var(--dark);color:var(--c)}

/* device stage: sized from its own box (container units) so it always fits the rest of the card */
.dev{position:relative;flex:1;min-height:170px;container-type:size}
.dev .browser{position:absolute;left:0;top:0;width:min(100cqw,150cqh);margin:0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(13,15,31,.06),0 2px 6px rgba(13,15,31,.06),0 34px 60px -30px rgba(0,0,40,.5)}
.dev.app .browser{width:min(92cqw,146cqh)}
.dev .bar{display:flex;align-items:center;gap:5px;height:24px;padding:0 10px;background:#f1f2f6;border-bottom:1px solid rgba(13,15,31,.06)}
.dev .bar i{width:7px;height:7px;flex:none;border-radius:50%;background:#d5d7df}
.dev .bar em{margin:0 auto;flex:0 1 240px;min-width:0;height:14px;border-radius:7px;background:#fff;box-shadow:0 0 0 1px rgba(13,15,31,.07);font:normal 9px/14px var(--mono);color:#6b6f80;padding:0 8px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transform:translateX(-14px)}
.dev .browser img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.dev .phones-d{position:absolute;right:0;bottom:0;height:min(66cqh,100cqw);display:flex;align-items:flex-end;gap:12px}
.dev:not(.web) .phones-d{right:50%;transform:translateX(50%);height:100cqh}
.dev .phone{height:100%;margin:0;padding:3px;background:#fff;border-radius:clamp(14px,4cqh,26px);box-shadow:0 0 0 1px rgba(13,15,31,.06),0 2px 6px rgba(13,15,31,.08),0 34px 50px -26px rgba(0,0,40,.6)}
.dev .phone:first-child:not(:only-child){height:86%}
.dev .phone img{display:block;height:100%;width:auto;border-radius:clamp(11px,3.6cqh,23px)}
@media(min-width:900px){
  .card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);column-gap:44px;padding:40px}
  .card:not(:has(.dev)){grid-template-columns:1fr}
  .card .info{justify-content:flex-end}
  .card .info .top{margin-bottom:auto}
  .card h3{font-size:clamp(64px,8vw,128px)}
  .dev{height:100%;min-height:0}
}

/* role badge: sits right under the title so my part in a project is seen first */
.role{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;align-self:start;background:var(--dark);color:var(--c);border-radius:14px;padding:8px 14px;max-width:100%}
.role small{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;opacity:.75}
.role b{font:700 15px/1.25 var(--body)}
.card .role,.dlg .role{margin:0}

/* list: rows wipe to category colour */
.index{padding:80px var(--pad) 60px}
.filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:18px;padding-bottom:2px}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:none;border:1.5px solid var(--ink);background:none;border-radius:99px;padding:8px 14px;font:600 14px var(--body);cursor:pointer}
.filters button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.rows{border-top:2px solid var(--ink)}
/* project list: a grid of cards, filtered by kind of work; no dates */
.filters button{display:inline-flex;align-items:center;gap:8px}
.filters button i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.tgrid{display:grid;gap:16px;padding-top:22px;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
@media(max-width:560px){.tgrid{gap:12px}}
/* all projects at once: parallax columns, cards tilt up as they enter and lean toward the cursor */
.mason{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:18px;align-items:start;padding:30px 0 120px}
.mcol{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;min-width:0;will-change:transform}
.mc{min-width:0;transform-origin:50% 100%;will-change:transform,opacity}
.mason .tli{width:100%;transition:transform .25s ease-out,color .3s;transform-style:preserve-3d}
.mason .tli::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.28),transparent 45%)}
@media(hover:hover){.mason .tli:hover::after{opacity:1}}
@media(max-width:699px){.mason{gap:14px;padding-bottom:40px}.mcol{gap:14px}}
.tli-dot{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--c);vertical-align:0}
.tli{all:unset;box-sizing:border-box;position:relative;isolation:isolate;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:20px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);transition:transform .4s cubic-bezier(.2,.9,.2,1),color .3s}
.tli::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--c);transform:translateY(101%);transition:transform .5s cubic-bezier(.7,0,.2,1)}
.tli:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.tli-img{display:block;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#fff;box-shadow:0 14px 28px -18px rgba(0,0,40,.6)}
.tli-ph{display:flex;justify-content:center;gap:10px;padding:10px 10px 0;background:var(--dark)}
.tli-ph img{width:auto!important;height:100%!important;aspect-ratio:9/18;object-fit:cover;object-position:top;border-radius:10px 10px 0 0;flex:none}
.tli-cover{display:grid;place-items:center;background:var(--c);color:var(--dark)}
.tli-cover b{font:900 76px/1 var(--display);font-variation-settings:"wdth" 62;opacity:.85}
.tli-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s cubic-bezier(.2,.9,.2,1)}
.tli-t{font:900 clamp(26px,3.2vw,36px)/.9 var(--display);font-variation-settings:"wdth" 62;text-transform:uppercase}
.tli-tag{font-size:15px;line-height:1.4;color:var(--ink-2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;transition:color .3s}
.tli-foot{margin-top:auto;font:12px var(--mono);color:var(--muted);transition:color .3s}
@media(hover:hover){
  .tli:hover{transform:translateY(-4px);color:var(--dark)}
  .tli:hover::before{transform:none}
  .tli:hover .tli-tag,.tli:hover .tli-foot{color:var(--dark)}
  .tli:hover .tli-img img{transform:scale(1.04)}
}
.noscript{padding:120px var(--pad) 40px;display:grid;gap:14px}
.noscript li{margin-bottom:8px}

/* contact */
/* A brief builder: pick what you need and when, the particles spell your pick and a ready WhatsApp message is typed out.
   --c follows the picked kind of work (or the cycling word before a pick). */
.contact{--c:var(--web);background:var(--dark);padding:72px var(--pad) calc(32px + env(safe-area-inset-bottom));display:grid;gap:22px}
.contact .top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;font:12px var(--mono);color:#8c90b0}
.live{display:inline-flex;align-items:center;gap:8px;color:#c7cae6}
.live i{width:8px;height:8px;border-radius:50%;background:#5bf0a5;animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(91,240,165,.6)}70%,100%{box-shadow:0 0 0 8px rgba(91,240,165,0)}}
.contact .lab{font:12px var(--mono);color:#8c90b0}
.halo-wrap{position:relative;height:min(40vw,340px);min-height:200px}
.halo-wrap canvas{position:absolute;inset:0;width:100%;height:100%}
.contact .q{display:grid;gap:12px}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.pick{border:1.5px solid #34385e;background:transparent;border-radius:99px;padding:10px 16px;font:600 15px var(--body);color:#e3e5ff;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .15s}
.pick:active{transform:scale(.96)}
.pick[aria-pressed=true]{background:var(--cc,var(--c));border-color:var(--cc,var(--c));color:var(--dark)}
.pick.sm{padding:8px 14px;font-size:14px}
.bubble{justify-self:start;max-width:min(520px,100%);background:#1b1e38;border-radius:18px 18px 18px 4px;padding:14px 16px 10px;font-size:15px;color:#e8eaff}
.bubble small{display:block;text-align:right;font:11px var(--mono);color:#7d82a8;margin-top:4px}
.bubble .caret{display:inline-block;width:2px;height:1em;background:var(--c);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.contact .go{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.mag{display:inline-flex;align-items:center;gap:12px;background:var(--c);color:var(--dark);border-radius:99px;padding:20px 28px;font:700 18px var(--body);transition:transform .2s ease-out,background .35s}
.mag svg{width:22px;height:22px;flex:none}
.reach{display:flex;flex-wrap:wrap;gap:10px 22px;font:14px var(--mono);color:#c7cae6}
.reach a{text-decoration:underline;text-underline-offset:3px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;font:12px var(--mono);color:#8c90b0;padding-top:28px;border-top:1px solid #23264a}
.totop{background:none;border:1px solid #34385e;border-radius:99px;padding:8px 14px;color:#c7cae6;font:12px var(--mono);cursor:pointer}
.totop:hover{border-color:var(--c);color:var(--c)}
@media(min-width:900px){
  .contact{grid-template-columns:1fr 1fr;column-gap:56px}
  .contact .top,.halo-wrap,.contact .go,.contact .foot{grid-column:1/-1}
  .contact .q{grid-column:1}
  .bubble{grid-column:2;grid-row:3/span 2;align-self:center}
}
@media(prefers-reduced-motion:reduce){.live i,.bubble .caret{animation:none}}

/* ---- hoop game: shoot projects into the hoop; the photo card absorbs them and levels up ---- */
.hp-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.hp-cv.front{z-index:5}
.hp-pole{position:absolute;z-index:1;width:18px;background:linear-gradient(90deg,#141733,#2a2f63 45%,#141733);border-radius:4px 4px 0 0;pointer-events:none}
.hp-bb{position:absolute;z-index:1;pointer-events:none;background:#fff;border:4px solid var(--dark);border-radius:16px;box-shadow:0 7px 0 rgba(0,0,0,.2)}
.hp-bb .sq{position:absolute;left:50%;bottom:10%;width:38%;height:42%;transform:translateX(-50%);border:3px solid var(--bg);border-radius:6px}
.hp-bb .hp-score{position:absolute;left:50%;top:9px;transform:translateX(-50%);background:var(--dark);color:var(--web)}
.hp-bb .hp-score.pop{transform:translateX(-50%) scale(1.5)}
/* the board and card lean toward the cursor (--yaw/--pitch are set on the hero from script) */
.hp-bb,.hp-card{transform:perspective(900px) rotateY(var(--yaw,0deg)) rotateX(var(--pitch,0deg))}
.hp-score{font:700 11px var(--mono);color:var(--dark);background:var(--web);padding:2px 7px;border-radius:5px;transition:transform .2s cubic-bezier(.3,1.8,.5,1)}
.hp-score.pop{transform:scale(1.5)}
.hp-aura{position:absolute;z-index:1;pointer-events:none;opacity:min(1,calc(var(--p,0) * 3));transform:scale(calc(.92 + var(--p,0) * .3));transform-origin:50% 70%;transition:opacity .5s,transform .5s}
.hp-aura i{position:absolute;inset:-10% -14% -4%;border-radius:46% 46% 22% 22%;background:radial-gradient(60% 70% at 50% 62%,rgba(255,246,170,.95),rgba(255,200,40,.75) 45%,rgba(255,130,0,0) 72%);filter:blur(10px);animation:flame .45s ease-in-out infinite alternate}
.hp-aura i:nth-child(2){inset:-26% -10% -2%;opacity:.85;animation-duration:.33s;animation-delay:-.2s;
  clip-path:polygon(0 100%,4% 40%,12% 62%,18% 18%,28% 50%,36% 4%,46% 42%,54% 0,62% 40%,72% 6%,80% 52%,88% 20%,94% 60%,100% 34%,100% 100%)}
.hp-aura i:nth-child(3){inset:-40% -4% 10%;opacity:calc(var(--p,0) * 1.2 - .3);filter:blur(4px);animation-duration:.52s;
  background:linear-gradient(0deg,rgba(255,226,122,.9),rgba(255,255,255,0));clip-path:polygon(0 100%,8% 30%,16% 70%,26% 10%,34% 64%,44% 0,52% 58%,62% 6%,70% 60%,80% 14%,88% 66%,96% 24%,100% 100%)}
@keyframes flame{from{transform:scaleY(1) translateY(0)}to{transform:scaleY(1.07) translateY(-4%)}}
.hp-card.hit{animation:shake .35s}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}
@keyframes shake{20%{transform:translate(-4px,1px) rotate(-1.5deg)}40%{transform:translate(4px,-1px) rotate(1.5deg)}60%{transform:translate(-3px,0) rotate(-1deg)}80%{transform:translate(2px,0)}}
.hp-reset{position:absolute;z-index:6;border:3px solid var(--dark);background:var(--web);color:var(--dark);border-radius:99px;padding:9px 16px;font:700 14px var(--body);cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.25);
  opacity:0;transform:translate(-50%,8px) scale(.8);pointer-events:none;white-space:nowrap;transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1),left .6s,top .6s}
.hp-reset.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.hp-reset.on:active{transform:translate(-50%,3px);box-shadow:0 2px 0 rgba(0,0,0,.25)}
/* Player card. Every tier changes shape (the clip-path morphs between 12-point outlines), metal,
   pattern and ornaments, not just colour. Sizes scale with the card through --u (1% of its width). */
.hp-card{position:absolute;z-index:1;pointer-events:none;transition:filter .6s;filter:drop-shadow(0 18px 22px rgba(0,0,40,.45))}
.fut[data-tier=special]{filter:drop-shadow(0 0 calc(var(--u) * 5) rgba(255,214,90,.75)) drop-shadow(0 18px 22px rgba(0,0,40,.5))}
.fut .face{position:absolute;inset:0;overflow:hidden;color:var(--fi);background:var(--fb);transition:clip-path .8s cubic-bezier(.3,1.2,.5,1),color .6s}
.fut .pat,.fut .rays,.fut .sheen,.fut .aur,.fut .stars{position:absolute;inset:0;pointer-events:none;transition:opacity .6s}
.fut .frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.fut .frame polygon{fill:none;vector-effect:non-scaling-stroke;transition:all .8s cubic-bezier(.3,1.2,.5,1)}
.fut .frame .o{stroke-width:3;stroke:var(--edge)}
.fut .frame .i{stroke-width:1.2;stroke:var(--edge2)}

/* metals */
.fut[data-tier=bronze]{--fb:linear-gradient(155deg,#f6c79b 0%,#c9864f 22%,#8a4f27 48%,#d49a63 70%,#6b3a1c 100%);--fi:#2e1606;--edge:#5a2e12;--edge2:rgba(255,220,180,.55);--glow:rgba(255,190,130,.6)}
.fut[data-tier=silver]{--fb:linear-gradient(155deg,#ffffff 0%,#dfe3ec 20%,#8f97ab 45%,#f3f5fa 68%,#767d93 100%);--fi:#161a28;--edge:#4b5166;--edge2:rgba(255,255,255,.9);--glow:rgba(255,255,255,.8)}
.fut[data-tier=gold]{--fb:linear-gradient(155deg,#fff6c4 0%,#ffd75a 20%,#c8901a 45%,#ffe58a 66%,#9a6a0c 100%);--fi:#2b1d00;--edge:#7a5200;--edge2:rgba(255,250,220,.9);--glow:rgba(255,230,140,.9)}
.fut[data-tier=special]{--fb:linear-gradient(160deg,#0b0e2a 0%,#1d2a9e 38%,#0a0c22 72%,#2b3dff 100%);--fi:#fff;--edge:#ffcf3a;--edge2:rgba(255,236,160,.85);--glow:rgba(255,214,90,.95)}

/* patterns: brushed bronze, diamond-cut silver, sunburst gold, aurora and stars for special */
.fut .pat{opacity:.9}
.fut[data-tier=bronze] .pat{background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),radial-gradient(120% 80% at 50% 35%,transparent 40%,rgba(40,15,0,.35))}
.fut[data-tier=silver] .pat{background:repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 1px,transparent 1px calc(var(--u) * 7)),repeating-linear-gradient(-45deg,rgba(40,45,70,.12) 0 1px,transparent 1px calc(var(--u) * 7)),radial-gradient(120% 80% at 50% 30%,transparent 45%,rgba(20,25,45,.3))}
.fut[data-tier=gold] .pat{background:radial-gradient(70% 45% at 50% 36%,rgba(255,255,230,.65),transparent 70%),radial-gradient(130% 90% at 50% 30%,transparent 50%,rgba(90,55,0,.35))}
.fut[data-tier=special] .pat{background:radial-gradient(60% 40% at 50% 34%,rgba(255,214,90,.35),transparent 70%),radial-gradient(130% 90% at 50% 30%,transparent 50%,rgba(0,0,0,.45))}
.fut .rays{opacity:0;background:repeating-conic-gradient(from 0deg at 50% 36%,rgba(255,255,255,.28) 0 5deg,transparent 5deg 15deg);-webkit-mask:radial-gradient(60% 50% at 50% 36%,#000 30%,transparent 75%);mask:radial-gradient(60% 50% at 50% 36%,#000 30%,transparent 75%);animation:spin 24s linear infinite}
.fut[data-tier=gold] .rays{opacity:.9}
.fut[data-tier=special] .rays{opacity:.45;background:repeating-conic-gradient(from 0deg at 50% 36%,rgba(255,214,90,.35) 0 4deg,transparent 4deg 12deg)}
@keyframes spin{to{transform:rotate(360deg)}}
.fut .aur{opacity:0;background:radial-gradient(40% 30% at 20% 20%,rgba(120,140,255,.7),transparent 70%),radial-gradient(35% 28% at 80% 30%,rgba(255,200,60,.45),transparent 70%),radial-gradient(45% 30% at 50% 80%,rgba(160,80,255,.45),transparent 70%);filter:blur(calc(var(--u) * 3));animation:aur 6s ease-in-out infinite alternate}
.fut[data-tier=special] .aur{opacity:1}
@keyframes aur{to{transform:translate(4%,-3%) scale(1.15) rotate(8deg)}}
.fut .stars{opacity:0;background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 82% 12%,#fff,transparent),radial-gradient(1.4px 1.4px at 70% 46%,#ffe9a6,transparent),radial-gradient(1px 1px at 22% 52%,#fff,transparent),radial-gradient(1.2px 1.2px at 88% 70%,#fff,transparent),radial-gradient(1px 1px at 8% 78%,#ffe9a6,transparent),radial-gradient(1.3px 1.3px at 40% 8%,#fff,transparent),radial-gradient(1px 1px at 58% 88%,#fff,transparent);animation:tw 2.4s ease-in-out infinite alternate}
.fut[data-tier=special] .stars{opacity:1}
@keyframes tw{to{opacity:.4}}
/* a band of light sweeps across every few seconds */
.fut .sheen{background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);background-size:300% 100%;animation:sheen 4.5s ease-in-out infinite;mix-blend-mode:overlay}
.fut[data-tier=bronze] .sheen{opacity:.5}
@keyframes sheen{0%,55%{background-position:120% 0}100%{background-position:-60% 0}}

/* photo with a rim light in the tier's colour */
.fut .cut{position:absolute;right:-4%;top:6%;width:72%;filter:drop-shadow(0 0 calc(var(--u) * 2.4) var(--glow));-webkit-mask:linear-gradient(#000 66%,transparent 94%);mask:linear-gradient(#000 66%,transparent 94%);transition:filter .6s}
.fut .crest{position:absolute;left:50%;top:1.2%;width:calc(var(--u) * 34);transform:translateX(-50%);color:var(--edge);opacity:0;transition:opacity .6s;filter:drop-shadow(0 1px 0 var(--edge2))}
.fut[data-tier=gold] .crest,.fut[data-tier=special] .crest{opacity:1}
.fut .top{position:absolute;left:10%;top:13%;display:grid;justify-items:center;gap:calc(var(--u) * 1.4);z-index:1}
.fut .ovr{font:900 calc(var(--u) * 22)/0.82 var(--display);font-variation-settings:"wdth" 70;text-shadow:0 1px 0 var(--edge2)}
.fut[data-tier=special] .ovr,.fut[data-tier=gold] .ovr{background:linear-gradient(180deg,var(--o1),var(--o2) 55%,var(--o3));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
.fut[data-tier=gold]{--o1:#4a3200;--o2:#2b1d00;--o3:#6b4a00}
.fut[data-tier=special]{--o1:#fff6c8;--o2:#ffcf3a;--o3:#b8860b}
.fut .pos{font:800 calc(var(--u) * 7.5)/1 var(--display);font-variation-settings:"wdth" 70;letter-spacing:.06em}
.fut .flag{font:600 calc(var(--u) * 4.2)/1 var(--mono);padding:calc(var(--u) * 1) calc(var(--u) * 1.6);border:1px solid var(--edge);border-radius:2px}
.fut .nm{position:absolute;left:8%;right:8%;top:55.5%;text-align:center;font:900 calc(var(--u) * 10)/1 var(--display);font-variation-settings:"wdth" 64;text-transform:uppercase;letter-spacing:.04em}
.fut .div{position:absolute;left:14%;right:14%;top:63.6%;height:calc(var(--u) * 3.4);color:var(--edge)}
.fut .attrs{position:absolute;left:13%;right:13%;top:67.2%;display:grid;grid-template-columns:repeat(6,1fr);gap:calc(var(--u) * 2.2) calc(var(--u) * 1.5)}
.fut .at{grid-column:span 2;display:grid;justify-items:center;gap:calc(var(--u) * .8);opacity:.35;transition:opacity .4s}
.fut .at b{font:900 calc(var(--u) * 8.4)/1 var(--display);font-variation-settings:"wdth" 70}
.fut .at i{font:600 calc(var(--u) * 3.3)/1 var(--mono);font-style:normal;opacity:.8;text-transform:uppercase;letter-spacing:0;white-space:nowrap}
.fut .at:nth-child(4){grid-column:2/span 2}
.fut .at.on{opacity:1}
.fut .at.new{animation:unlock .7s cubic-bezier(.3,1.8,.5,1)}
@keyframes unlock{0%{transform:scale(.4)}60%{transform:scale(1.5)}100%{transform:none}}
.fut .emb{position:absolute;left:50%;bottom:3.6%;width:calc(var(--u) * 9);height:calc(var(--u) * 9);transform:translateX(-50%);color:var(--edge);filter:drop-shadow(0 1px 0 var(--edge2))}
.fut .tier{position:absolute;left:50%;bottom:-11%;transform:translateX(-50%);font:600 calc(var(--u) * 4)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#fff;opacity:.75;white-space:nowrap}
.fut .holo{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:color-dodge;transition:opacity .6s;
  background:linear-gradient(115deg,transparent 25%,rgba(255,120,210,.5) 38%,rgba(120,230,255,.5) 50%,rgba(255,236,120,.5) 62%,transparent 75%);background-size:300% 100%;animation:holo 3s linear infinite}
.fut[data-tier=special] .holo{opacity:.45}
@keyframes holo{from{background-position:100% 0}to{background-position:-100% 0}}
.fut .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.fut.hit .flash{animation:flash .45s ease-out}
.hp-wo{position:absolute;inset:0;z-index:6;pointer-events:none;background:radial-gradient(60% 60% at 50% 52%,rgba(13,15,31,.2),rgba(13,15,31,.88));opacity:0;animation:woIn .8s ease-out forwards}
@keyframes woIn{to{opacity:1}}
.hp-wo-rays{position:absolute;left:50%;top:52%;width:180vmax;height:180vmax;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,rgba(255,214,90,.16) 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(closest-side,#000 10%,transparent 70%);mask:radial-gradient(closest-side,#000 10%,transparent 70%);animation:woSpin 30s linear infinite;opacity:0;transition:opacity 1s}
.hp-wo.on .hp-wo-rays{opacity:1}
@keyframes woSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hp-wo-t{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 74px);text-align:center;font:600 12px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--web);opacity:0;transform:translateY(-8px);transition:opacity .6s .2s,transform .6s .2s}
.hp-wo.on .hp-wo-t{opacity:1;transform:none}
.fut.floaty .face{animation:fl 3.2s ease-in-out infinite}
.fut.floaty .tier{opacity:0} /* the caption above says it already */
@keyframes fl{50%{transform:translateY(-1.8%)}}
.hp-cta{position:absolute;z-index:8;display:flex;align-items:center;gap:14px;transform:translate(-50%,14px);opacity:0;pointer-events:none;transition:opacity .4s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.hp-cta.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.hp-hire{text-decoration:none;display:inline-flex;align-items:center;gap:10px;background:var(--web);color:var(--dark);border:3px solid var(--dark);border-radius:99px;padding:15px 26px;font:800 18px var(--body);box-shadow:0 6px 0 rgba(0,0,0,.3),0 0 30px rgba(255,214,90,.55);transition:transform .2s ease-out;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 6px 0 rgba(0,0,0,.3),0 0 46px rgba(255,214,90,.9)}}
.hp-again{border:0;background:none;color:#e3e5ff;font:600 13px var(--mono);cursor:pointer;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@media(max-width:699px){.hp-cta{flex-direction:column;gap:10px}.hp-hire{padding:13px 22px;font-size:16px}}
.hp-toast{position:absolute;z-index:6;pointer-events:none;background:var(--dark);color:#fff;border-radius:14px;padding:10px 14px;font:600 14px/1.25 var(--body);box-shadow:0 20px 40px -18px rgba(0,0,0,.6);opacity:0;transform:translateY(10px) scale(.9);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1);max-width:240px}
.hp-toast.on{opacity:1;transform:none}
.hp-toast small{display:block;font:500 10px var(--mono);color:var(--web);letter-spacing:.06em;margin-bottom:3px}
.hp-toast span{display:block;font:500 12px var(--body);color:#c7cae6;margin-top:2px}

/* phone views: framed screenshots, shown beside the desktop shot */
.phones{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px}
.phones::-webkit-scrollbar{display:none}
.phones img{flex:none;height:min(300px,52vw);aspect-ratio:9/18;object-fit:cover;object-position:top;border-radius:20px;border:3px solid #fff;background:#fff;box-shadow:0 0 0 1px rgba(13,15,31,.06),0 18px 30px -18px rgba(0,0,40,.45);display:block}
.dlg .phones{margin:6px 0}
.phones.art img{aspect-ratio:1/1;height:min(240px,62vw);border-radius:14px}
.dlg-shot{margin:6px 0;border:3px solid var(--dark);border-radius:16px;overflow:hidden;background:#fff}
.dlg-shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}

/* detail dialog */
.dlg{border:0;padding:0;margin:0;width:100%;max-width:none;height:100%;max-height:none;background:transparent;color:var(--dark);overflow:auto;overscroll-behavior:contain}
.dlg::backdrop{background:rgba(13,15,31,.7)}
.dlg[open]{display:flex;justify-content:center;align-items:flex-start;animation:dlg-up .45s cubic-bezier(.2,.8,.2,1)}
@keyframes dlg-up{from{transform:translateY(40px);opacity:0}}
.dlg-in{position:relative;width:100%;max-width:820px;margin-top:8vh;min-height:92%;background:var(--c);border-radius:28px 28px 0 0;padding:24px var(--pad) calc(40px + env(safe-area-inset-bottom));display:grid;gap:14px;align-content:start}
@media(min-width:760px){.dlg-in{min-height:0;margin:5vh 0;border-radius:28px;padding:40px}}
.dlg-x{all:unset;cursor:pointer;justify-self:end;font:600 12px var(--mono);border:1.5px solid var(--dark);border-radius:99px;padding:6px 12px}
.dlg-k{font:500 12px var(--mono)}
.dlg h3{font:900 clamp(52px,15vw,120px)/.86 var(--display);overflow-wrap:anywhere}
.dlg-tag{font-size:clamp(18px,2.4vw,22px);line-height:1.35;font-weight:600}
.dlg-story{line-height:1.5}
.dlg h4{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;margin-top:10px}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.facts li{font:600 16px/1.35 var(--body);border:1.5px solid var(--dark);border-radius:14px;padding:10px 14px}
.dlg-impact{background:var(--dark);color:var(--c);border-radius:16px;padding:14px 16px;font-weight:600;line-height:1.4}
.tl{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--dark);display:grid;gap:22px}
.tl>li{position:relative;display:grid;gap:6px}
.tl>li::before{content:"";position:absolute;left:-25px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--dark)}
.tl-y{font:500 12px var(--mono)}
.tl b{font:900 26px/1 var(--display);font-variation-settings:"wdth" 70;text-transform:uppercase}
.tl ul{margin:4px 0 0;padding-left:18px;display:grid;gap:6px;font-size:15px}
.dlg .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.dlg .meta span,.dlg .meta a{font:12px var(--mono);border:1.5px solid var(--dark);border-radius:99px;padding:5px 10px}
.dlg .meta a{background:var(--dark);color:var(--c)}

/* paged scrolling (app.js): one invisible marker per card marks where that card lands */
.stack{position:relative}
.stack .snap{position:absolute;left:0;width:1px;height:1px;pointer-events:none}

/* scroll reveals: only when JS has set .fx, so content never stays hidden without it */
.fx .sec-h h2{clip-path:inset(0 0 100% 0);transform:translateY(35%);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1),transform 1.1s cubic-bezier(.2,.8,.2,1)}
.fx .sec-h h2.in{clip-path:inset(-10% -5% -15% -5%);transform:none}
.fx .rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0) * 45ms)}
.fx .rv.in{opacity:1;transform:none}
.fx .card>*{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.fx .card.in>*{opacity:1;transform:none}
.fx .card.in>:nth-child(2){transition-delay:.08s}.fx .card.in>:nth-child(3){transition-delay:.16s}.fx .card.in>:nth-child(4){transition-delay:.24s}.fx .card.in>:nth-child(5){transition-delay:.32s}

/* cursor (mouse only) */
.cur{position:fixed;left:0;top:0;z-index:80;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;display:none;place-items:center;transition:width .3s cubic-bezier(.2,.9,.2,1),height .3s cubic-bezier(.2,.9,.2,1),margin .3s cubic-bezier(.2,.9,.2,1)}
.cur span{font:700 11px var(--mono);color:#000;text-transform:uppercase;letter-spacing:.06em;opacity:0;transition:opacity .2s}
.cur.l{width:84px;height:84px;margin:-42px 0 0 -42px}.cur.l span{opacity:1}
.cur.m{width:48px;height:48px;margin:-24px 0 0 -24px}
@media(hover:hover) and (pointer:fine){.cur{display:grid}.body,.card{cursor:none}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.cap{opacity:1;transform:none}.hero .sub{opacity:1;transform:none}}