/* Home v3 · Live Wire intro scatters while the hero rises into it · nav recolours per section · glitch sound + hover glitch · mascot footer.
   Kugali colour: white ground, ink tiers, red for brand. Display = ZCOOL KuaiLe (logo font), body = Figtree. */
:root{
  --bg:#fff;--ink:#121212;--ink-75:rgb(18 18 18/.75);--ink-50:rgb(18 18 18/.5);--ink-12:rgb(18 18 18/.12);--ink-04:rgb(18 18 18/.04);
  --red:#FF0000;--cyan:#00E5FF;--glow:rgb(255 0 0/.16);--disc:#E9D500;
  --toli:"ZCOOL KuaiLe","Figtree",sans-serif;--f:"Figtree",ui-sans-serif,system-ui,sans-serif;--m:"JetBrains Mono",ui-monospace,monospace;
  --g:clamp(16px,4vw,56px);--skew:-7deg}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--f)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.m{font:700 11px var(--m);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-50)}
.t{font-family:var(--toli);font-weight:400;letter-spacing:-.01em;line-height:.92;text-wrap:balance}
.u{background:linear-gradient(var(--red),var(--red)) 0 100%/100% 2px no-repeat;transition:background-size .2s,color .2s}
.u:hover{background-size:100% 100%;color:#fff}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
section,footer{position:relative}

/* ---------- NAV: recolours per section ---------- */
nav.top{--lf:var(--red);--ls:#fff;--lk:#fff;--jb:var(--red);--jt:#fff;--nb:transparent;
  position:fixed;inset:0 0 auto 0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px var(--g);
  color:var(--lk);background:var(--nb);backdrop-filter:blur(var(--blur,0px));transition:background .4s,color .4s}
nav.top[data-tone=hero]{--lf:var(--ink);--ls:var(--red);--lk:var(--ink);--jb:var(--red);--jt:#fff;--nb:rgb(255 255 255/.7);--blur:12px}
nav.top[data-tone=work]{--lf:var(--red);--ls:var(--ink);--lk:var(--ink);--jb:var(--ink);--jt:#fff;--nb:rgb(255 255 255/.7);--blur:12px}
nav.top[data-tone=studio]{--lf:var(--ink);--ls:var(--cyan);--lk:var(--ink);--jb:var(--cyan);--jt:var(--ink);--nb:rgb(255 255 255/.7);--blur:12px}
nav.top[data-tone=club]{--lf:#fff;--ls:var(--red);--lk:#fff;--jb:#fff;--jt:var(--ink);--nb:rgb(18 18 18/.6);--blur:12px}
nav.top[data-tone=foot]{--lf:var(--red);--ls:var(--ink);--lk:var(--ink);--jb:var(--disc);--jt:var(--ink);--nb:rgb(255 255 255/.7);--blur:12px}
nav.top .mark{width:46px;height:40px;display:block}
nav.top .mark .s{fill:var(--ls);transition:fill .4s}
nav.top .mark .f{fill:var(--lf);transition:fill .4s}
nav.top .links{display:flex;gap:clamp(12px,2.6vw,30px);font-weight:700;align-items:center}
nav.top .join{background:var(--jb);color:var(--jt);padding:8px 16px;border-radius:99px;transition:background .4s,color .4s,transform .15s}
nav.top .join:hover{transform:translateY(-2px) rotate(-2deg)}
.mute{all:unset;position:fixed;left:14px;bottom:14px;z-index:40;width:30px;height:30px;border-radius:50%;background:rgb(18 18 18/.75);color:#fff;display:grid;place-items:center;cursor:pointer}
.mute[aria-pressed=false] i b{height:2px!important;animation:none!important;opacity:.5}
.mute i{display:inline-flex;gap:2px;align-items:end;height:12px}
.mute i b{width:2px;background:currentColor;height:3px}
.mute[aria-pressed=true].live i b{animation:eq .7s ease-in-out infinite alternate}
.mute i b:nth-child(2){animation-delay:.2s!important}.mute i b:nth-child(3){animation-delay:.35s!important}
.snd{all:unset;cursor:pointer;display:inline-flex;gap:6px;align-items:center;font:700 11px var(--m);letter-spacing:.08em;text-transform:uppercase}
.snd i{display:inline-flex;gap:2px;align-items:end;height:12px}
.snd i b{width:2px;background:currentColor;height:3px}
.snd[aria-pressed=true] i b{animation:eq .7s ease-in-out infinite alternate}
.snd[aria-pressed=true] i b:nth-child(2){animation-delay:.2s}.snd[aria-pressed=true] i b:nth-child(3){animation-delay:.35s}
@keyframes eq{to{height:12px}}
@media(max-width:600px){nav.top .links a:not(.join){display:none}}

/* ---------- mascot ---------- */
.mascot .body{animation:bob 2.4s ease-in-out infinite}
.mascot .bang{animation:spark 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom}
.mascot .eye{animation:blink 4s infinite;transform-box:fill-box;transform-origin:center}
.mascot.walk .legL{animation:leg .5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:top}
.mascot.walk .legR{animation:leg .5s ease-in-out infinite alternate-reverse;transform-box:fill-box;transform-origin:top}
@keyframes bob{50%{transform:translateY(-10px)}}
@keyframes spark{50%{transform:rotate(8deg) translateY(-6px)}}
@keyframes blink{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}}
@keyframes leg{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}

/* ---------- glitch (shared) ---------- */
.glitching{animation:jit .28s steps(2) 1}
@keyframes jit{0%{transform:translate(0)}25%{transform:translate(-8px,3px) skewX(-6deg)}50%{transform:translate(6px,-2px)}75%{transform:translate(-3px,0) skewX(4deg)}100%{transform:translate(0)}}

/* ---------- 0 · INTRO (Live Wire) — hero rises into it ---------- */
.intro{height:190vh}
.intro .pin{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;background:rgb(var(--bgc,0 0 0))}
.intro svg{width:min(90vw,1150px);overflow:visible}
.intro .fg path{stroke:var(--red);stroke-width:7;fill:transparent;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:ink .9s cubic-bezier(.7,0,.2,1) forwards,fillin .35s forwards;animation-delay:var(--d),calc(var(--d) + .9s)}
.intro .sh path{opacity:0;animation:fade .3s forwards;animation-delay:1.9s;transition:fill .3s}
@keyframes ink{to{stroke-dashoffset:0}}
@keyframes fillin{to{fill:var(--red)}}
@keyframes fade{to{opacity:1}}
.intro .tag{position:absolute;left:50%;top:calc(50% + min(24vw,300px));translate:-50% 0;text-align:center;display:grid;gap:10px;justify-items:center;color:#fff;opacity:var(--hint,1);animation:fade .6s 2s both;width:max-content;max-width:90vw}
.intro .tag b{font:400 clamp(22px,2.6vw,36px)/1 var(--toli)}
.intro .tag .m{color:rgb(255 255 255/.6)}
.intro .tag .cue{display:inline-block;animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(6px)}}
.intro .ghost{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;visibility:hidden;mix-blend-mode:screen}
.intro .ghost.on{visibility:visible}
.intro .ghost svg{width:min(90vw,1150px)}
.intro svg.rgb{filter:drop-shadow(-10px 0 var(--cyan)) drop-shadow(10px 0 rgb(255 0 0/.8))}
.scan{position:absolute;left:0;right:0;height:3px;background:rgb(255 255 255/.5);visibility:hidden}
.scan.on{visibility:visible}
.spark{position:absolute;height:12px;background:var(--red);transform:skewX(var(--skew));visibility:hidden;opacity:var(--hint,1)}
.spark.on{visibility:visible}
.spark.c{background:var(--cyan)}

/* ---------- 1 · HERO (overlaps the intro's tail) ---------- */
.hero{margin-top:-60vh;z-index:5;overflow-x:clip;padding:22vh var(--g) 12vh;min-height:100vh;display:grid;align-content:end}
.glow{position:absolute;pointer-events:none;width:70vmax;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent);filter:blur(10px);left:60%;top:30%;translate:-50% -50%}
.hero .walker{position:absolute;width:clamp(90px,10vw,150px);top:12vh;animation:cross 16s linear infinite}
@keyframes cross{from{left:-15%}to{left:105%}}
.hero h1{font-size:clamp(56px,10vw,170px);max-width:12ch;position:relative}
.hero h1 .w3{color:var(--red);display:inline-block}
.ideas span{display:inline-block}
.ideas.play .w1{animation:inL .7s cubic-bezier(.2,.9,.2,1.2) both}
.ideas.play .w2{animation:drop .6s .25s cubic-bezier(.3,1.6,.5,1) both}
.ideas.play .w3{animation:jit .3s .7s steps(2) 2}
.ideas.play .w4{animation:pop .7s 1.2s cubic-bezier(.3,1.8,.5,1) both;transform-origin:left bottom}
@keyframes inL{from{transform:translateX(-60%) skewX(-12deg);opacity:0}}
@keyframes drop{from{transform:translateY(-120%) rotate(-12deg);opacity:0}}
@keyframes pop{0%{transform:scale(0) rotate(-20deg);opacity:0}70%{transform:scale(1.15) rotate(4deg)}100%{transform:none;opacity:1}}
.ideas .w4.boom{animation:boom .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes boom{40%{transform:scale(1.18) rotate(-5deg)}}
.hero .row{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-top:32px;position:relative}
.hero .row p{max-width:42ch;color:var(--ink-75);font-size:19px}

.pipe{list-style:none;display:flex;flex-wrap:wrap;gap:10px 0;margin-top:36px;position:relative;counter-reset:s}
.pipe li{display:grid;gap:4px;padding:12px 30px 12px 18px;position:relative;border-top:3px solid var(--ink);min-width:0}
.pipe li::after{content:"";position:absolute;right:8px;top:24px;width:12px;height:3px;background:var(--red);transform:skewX(var(--skew))}
.pipe li:last-child::after{display:none}
.pipe b{font-size:clamp(24px,2.4vw,36px);line-height:1}
.pipe li.ip{border-top-color:var(--red)}
.pipe li.ip b{color:var(--red)}
.pipe li:hover b{animation:jit .28s steps(2) 1}
/* ---------- 2 · WORK ---------- */
.railhead{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:24px var(--g) 28px;flex-wrap:wrap}
.railhead h2{font-size:clamp(44px,5.6vw,92px)}
.bar{display:flex;gap:8px;flex-wrap:wrap}
.bar button{all:unset;cursor:pointer;padding:8px 16px;border:1px solid var(--ink-12);border-radius:99px;font-weight:700}
.bar button[aria-pressed=true]{background:var(--ink);color:#fff}
.rail{display:flex;gap:clamp(16px,2vw,28px);overflow-x:auto;padding:0 var(--g) 24px;scroll-padding-inline:var(--g);scroll-snap-type:x mandatory;scrollbar-width:thin}
.tile{flex:0 0 min(84vw,440px);scroll-snap-align:start;display:grid;grid-template-rows:auto 1fr;gap:16px;align-content:start}
.tile[hidden]{display:none}
.frame{aspect-ratio:4/3;overflow:hidden;background:var(--ink-04);border-radius:6px;position:relative;isolation:isolate}
.frame img{width:100%;height:100%;object-fit:cover}
/* hover glitch: two tinted copies split apart and slice */
.frame::before,.frame::after{content:"";position:absolute;inset:0;background:var(--src) var(--pos,center)/cover;opacity:0;pointer-events:none;z-index:1}
.frame::before{background-color:var(--red);background-blend-mode:multiply;mix-blend-mode:screen}
.frame::after{background-color:var(--cyan);background-blend-mode:multiply;mix-blend-mode:screen}
.tile:hover .frame::before,.tile:focus-visible .frame::before{opacity:.85;animation:gA .5s steps(1) infinite}
.tile:hover .frame::after,.tile:focus-visible .frame::after{opacity:.85;animation:gB .5s steps(1) infinite}
.tile .frame-link:hover .frame img,.tile h3 a:hover~* .frame img{animation:gC .5s steps(1) infinite}
@keyframes gA{0%{transform:translate(-10px,0);clip-path:inset(10% 0 60% 0)}25%{transform:translate(8px,2px);clip-path:inset(55% 0 20% 0)}50%{transform:translate(-4px,-2px);clip-path:inset(30% 0 45% 0)}75%{transform:translate(12px,0);clip-path:inset(75% 0 5% 0)}}
@keyframes gB{0%{transform:translate(10px,0);clip-path:inset(40% 0 35% 0)}25%{transform:translate(-8px,-2px);clip-path:inset(5% 0 80% 0)}50%{transform:translate(6px,2px);clip-path:inset(65% 0 15% 0)}75%{transform:translate(-12px,0);clip-path:inset(20% 0 60% 0)}}
@keyframes gC{0%,100%{transform:none}30%{transform:translateX(-3px) skewX(-2deg)}60%{transform:translateX(3px)}}
.tile .tag{position:absolute;top:12px;left:12px;background:#fff;color:var(--ink);padding:4px 10px;border-radius:99px;z-index:2}
.tile .tag.new{background:var(--red);color:#fff}
.tile .body{display:flex;flex-direction:column;gap:8px}
.tile h3{font-size:clamp(30px,2.6vw,40px)}
.tile p{color:var(--ink-75);font-size:16px;max-width:38ch}
.tile .cta{font-weight:700;margin-top:auto;padding-top:6px;align-self:flex-start}
.rail{scrollbar-width:none}.rail::-webkit-scrollbar{display:none}
.scrub{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:8px var(--g) 110px}
.scrub .track{position:relative;height:56px;cursor:pointer;touch-action:none}
.scrub .track::before{content:"";position:absolute;left:0;right:0;bottom:6px;height:4px;background:var(--ink-12);transform:skewX(var(--skew))}
.scrub .fill{position:absolute;left:0;bottom:6px;height:4px;width:0;background:var(--red);transform:skewX(var(--skew));transform-origin:left}
.scrub .rider{position:absolute;bottom:8px;width:36px;left:0;transition:left .08s linear}
.scrub .nb{all:unset;cursor:pointer;width:46px;height:46px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font:22px var(--toli);transition:background .15s,color .15s,transform .15s}
.scrub .nb:hover{background:var(--red);border-color:var(--red);color:#fff;transform:rotate(-8deg)}
.scrub .nb:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.scrub .count{font-size:22px;min-width:5ch;text-align:right}
@media(max-width:560px){.scrub{grid-template-columns:auto minmax(0,1fr) auto}.scrub .count{display:none}}

/* ---------- 3 · STUDIO ---------- */
.studio{padding:120px var(--g);overflow:hidden;border-top:1px solid var(--ink-12)}
.studio .big{font-size:clamp(60px,11vw,190px);position:relative;z-index:2;max-width:11ch}
.studio .big .o{display:inline-block;width:.74em;height:.6em;border:.13em solid var(--red);transform:skewX(-2deg);vertical-align:baseline}
.peek{position:absolute;right:-30px;top:120px;width:clamp(120px,14vw,220px);rotate:-18deg;z-index:1}
.peek .bubble{animation:bub 2.6s steps(1) infinite;position:absolute;left:-150px;top:10px;background:#fff;border:3px solid var(--ink);border-radius:20px;padding:8px 14px;font:20px var(--toli);rotate:18deg;white-space:nowrap}
@keyframes bub{0%,76%,100%{text-shadow:none;transform:none;border-color:var(--ink);clip-path:none}
78%{text-shadow:-5px 0 var(--cyan),5px 0 var(--red);transform:translate(-8px,2px) skewX(-12deg);border-color:var(--red)}
80%{text-shadow:6px 0 var(--cyan),-6px 0 var(--red);transform:translate(7px,-3px);clip-path:inset(0 0 45% 0)}
82%{text-shadow:none;transform:translate(-3px,0) skewX(8deg);border-color:var(--cyan);clip-path:inset(40% 0 0 0)}
84%{text-shadow:-4px 0 var(--red),4px 0 var(--cyan);transform:translate(10px,1px) scaleX(1.06);clip-path:none}
86%{text-shadow:none;transform:none}
90%{text-shadow:3px 0 var(--cyan);transform:translate(-5px,0) skewX(-6deg);border-color:var(--red)}
92%{text-shadow:none;transform:none;border-color:var(--ink)}}
.studio .cols{display:grid;grid-template-columns:1fr 1fr;gap:40px var(--g);margin-top:56px;position:relative;z-index:2}
.studio .cols p{font-size:clamp(20px,1.8vw,26px);max-width:34ch;color:var(--ink-75)}
.people{display:grid;border-top:2px solid var(--ink)}
.people>*{display:grid;grid-template-columns:48px 1fr auto;gap:16px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--ink-12);font:clamp(28px,2.8vw,42px)/1 var(--toli);transition:padding .25s,color .2s}
.people a:hover{color:var(--red);padding-left:14px}
.people .m{align-self:center}
@media(max-width:760px){.studio .cols{grid-template-columns:1fr}.peek{top:40px;width:110px}.peek .bubble{left:-120px;top:-34px;font-size:15px;padding:6px 10px}}

/* ---------- 4 · CLUB ---------- */
.club{background:var(--ink);color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:48px var(--g);align-items:center;padding:120px var(--g)}
.club .m{color:rgb(255 255 255/.55)}
.club h2{font-size:clamp(48px,6.4vw,108px)}
.club h2 span{color:var(--red)}
.club p{font-size:19px;max-width:40ch;color:rgb(255 255 255/.75);margin:20px 0 28px}
.notify{display:flex;max-width:460px}
.notify input{flex:1;min-width:0;padding:15px 18px;font:inherit;border:2px solid #fff;border-radius:99px 0 0 99px;background:transparent;color:#fff}
.notify button{padding:15px 22px;font:700 12px var(--m);text-transform:uppercase;border:0;border-radius:0 99px 99px 0;background:var(--red);color:#fff;cursor:pointer}
.ok{display:none;margin-top:10px}
.notify.done+.ok{display:block}
.card{aspect-ratio:1.586;border-radius:22px;background:#000;position:relative;overflow:hidden;padding:26px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 40px 80px #0009;transform:perspective(900px) rotateY(var(--ry,-12deg)) rotateX(var(--rx,5deg));transition:transform .2s;border:1px solid #fff2}
.card::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,#f000,#f004,#fff3,#f000 40%);animation:spin 6s linear infinite;mix-blend-mode:screen}
@keyframes spin{to{rotate:360deg}}
.card .mascot{position:absolute;right:6%;top:8%;width:28%}
.card .nm{font:clamp(26px,3vw,42px) var(--toli);position:relative;text-transform:uppercase}
.card .row{display:flex;justify-content:space-between;position:relative}
@media(max-width:860px){.club{grid-template-columns:1fr}}

/* ---------- 5 · FOOTER: the mascot plays frisbee ---------- */
footer{padding:120px var(--g) 0;overflow:hidden}
.yard{position:relative;height:min(70vh,560px);display:grid;place-items:end center;cursor:pointer}
.yard .ground{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink)}
.yard .mascot{width:clamp(130px,15vw,210px);position:relative;z-index:2;transform-origin:bottom center}
.yard .mascot.hop{animation:hop .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes hop{0%{transform:translateY(0) scale(1.1,.85)}40%{transform:translateY(-160px) rotate(-360deg)}100%{transform:translateY(0)}}
.yard .disc{position:absolute;bottom:42%;left:50%;width:70px;height:20px;border-radius:50%;background:var(--disc);box-shadow:inset 0 -5px 0 rgb(0 0 0/.25);offset-path:path("M0 0 C 260 -260, 520 -160, 560 40 C 520 -60, 240 -300, 0 0 C -240 -300, -520 -60, -560 40 C -520 -160, -260 -260, 0 0");animation:fly 5s cubic-bezier(.45,0,.55,1) infinite;z-index:3}
@keyframes fly{to{offset-distance:100%}}
.yard .say{position:absolute;bottom:62%;left:50%;translate:-10% 0;background:#fff;border:3px solid var(--ink);border-radius:22px;padding:10px 18px;font:clamp(22px,2.4vw,32px) var(--toli);white-space:nowrap;z-index:4}
.yard .say::after{content:"";position:absolute;left:24px;bottom:-16px;border:9px solid transparent;border-top:12px solid var(--ink)}
.yard .hint{position:absolute;bottom:14px;right:0}
footer .meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px;padding:28px 0 36px}
footer .contact{font-size:clamp(20px,2vw,28px);font-weight:800}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.intro .fg path{stroke-dashoffset:0;fill:var(--red)}.intro .sh path{opacity:1}.yard .disc{offset-distance:20%}}

.tile .frame-link{display:block}
.tile h3 a:hover{color:var(--red)}
.tile p{user-select:text}