/* Bettina Anne Sam — portfolio styles */
:root{
  --studio:#E4E3DF; --paper:#F4F3F0; --card:#FFFFFF; --ink:#16181D; --ink-2:#565A63; --line:rgba(22,24,29,.13);
  --blue:#2340FF; --night:#111318; --night-2:#1B1E26; --on-night:#EDECE8; --on-night-2:#9EA2AB;
  --display:"Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --text:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand:"Caveat", "Comic Sans MS", cursive;
  --ease:cubic-bezier(.2,.8,.15,1);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --studio:#1B1D22; --paper:#15171B; --card:#22252C; --ink:#EDECE8; --ink-2:#A6A9B1; --line:rgba(237,236,232,.13); --blue:#7389FF; }
}
:root[data-theme="dark"]{ --studio:#1B1D22; --paper:#15171B; --card:#22252C; --ink:#EDECE8; --ink-2:#A6A9B1; --line:rgba(237,236,232,.13); --blue:#7389FF; }
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--studio); color:var(--ink); font-family:var(--text); font-size:1.1rem; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body.loading{overflow:hidden}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit}
:focus-visible{outline:2.5px solid var(--blue); outline-offset:3px; border-radius:6px}
h1,h2,h3,h4{font-family:var(--display); font-weight:750; letter-spacing:-.025em; line-height:1.02; margin:0}
p{margin:0}
.wrap{width:min(1220px, 100% - 2*clamp(20px,4vw,56px)); margin-inline:auto}
.above{position:relative; z-index:2}
#gl{position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; display:block}
.sec-title{font-size:clamp(2.7rem,6.4vw,5.8rem); letter-spacing:-.05em}
.sec-sub{margin-top:1rem; font-size:1.2rem; color:var(--ink-2); max-width:36rem}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.btn{font-family:var(--display); font-weight:650; font-size:1rem; text-decoration:none; padding:.8rem 1.3rem; border-radius:999px; border:1.5px solid var(--ink); display:inline-flex; align-items:center; gap:.55rem; transition:background .25s, color .25s, border-color .25s; background:transparent; color:var(--ink); will-change:transform; cursor:pointer}
.btn.solid{background:var(--ink); color:var(--studio)}
.btn:hover{background:var(--blue); border-color:var(--blue); color:#fff}
.btn svg{width:18px; height:18px; flex:none}
.live-dot{display:inline-block; width:.5rem; height:.5rem; border-radius:50%; background:#20C46B; box-shadow:0 0 0 0 rgba(32,196,107,.6); animation:pulse 2s infinite; flex:none}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(32,196,107,0)}100%{box-shadow:0 0 0 0 rgba(32,196,107,0)}}

/* ---------- LOADER ---------- */
#loader{position:fixed; inset:0; z-index:100}
#loader.out{pointer-events:none}
.lhalf{position:absolute; left:0; right:0; height:50.5%; background-color:#111318; background-image:radial-gradient(rgba(237,236,232,.08) 1.2px, transparent 1.5px); background-size:26px 26px; transition:transform 1.05s cubic-bezier(.76,0,.24,1)}
.lhalf.top{top:0} .lhalf.bot{bottom:0; transition-delay:.05s}
#loader.out .lhalf.top{transform:translateY(-101%)} #loader.out .lhalf.bot{transform:translateY(101%)}
.lstage{position:absolute; inset:0; color:#EDECE8; background:radial-gradient(600px circle at 50% 46%, rgba(35,64,255,.28), transparent 70%); transition:opacity .45s, transform .8s var(--ease)}
#loader.out .lstage{opacity:0; transform:scale(1.15)}
.ltop{position:absolute; top:calc(22px + env(safe-area-inset-top,0px)); left:24px; display:flex; align-items:center; gap:.6rem; font-family:var(--display); font-weight:700; font-size:.95rem; opacity:.85}
.ltop svg{width:32px; height:32px}
.lcenter{position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:1rem}
.hello-wrap{display:grid; justify-items:center; gap:.5rem; transition:opacity .4s, transform .6s var(--ease)}
.named .hello-wrap{opacity:0; transform:translateY(-30px) scale(.9)}
.hello{font-family:var(--display),"Noto Sans Tamil","Latha","Nirmala UI",system-ui,sans-serif; font-weight:800; font-size:clamp(3.6rem,12vw,9rem); line-height:1.05; letter-spacing:-.04em; display:flex; align-items:center; gap:.25em}
.hello::before{content:""; width:.22em; height:.22em; border-radius:50%; background:#20C46B; flex:none}
.hello.pop{animation:helloPop .32s var(--ease)}
@keyframes helloPop{from{transform:translateY(18%) scale(.9); opacity:.2; filter:blur(4px)}to{transform:none; opacity:1; filter:none}}
.hlang{font-family:var(--hand); font-weight:700; font-size:clamp(1.4rem,2.6vw,2rem); color:#FFC93C; min-height:1.2em}
.lname{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; pointer-events:none}
.lname .im{font-family:var(--hand); font-weight:700; font-size:clamp(1.8rem,3.4vw,2.8rem); color:#FFC93C; opacity:0; transform:translateY(20px) rotate(-4deg); transition:opacity .5s, transform .6s var(--ease)}
.named .lname .im{opacity:1; transform:rotate(-4deg)}
.lname .ln{display:block; overflow:hidden; font-family:var(--display); font-weight:800; font-size:clamp(3.6rem,14.5vw,12.5rem); line-height:.9; letter-spacing:-.06em; padding:0 .05em .04em}
.lname .ln span{display:inline-block; transform:translateY(105%); transition:transform .9s cubic-bezier(.2,.9,.1,1); transition-delay:calc(.15s + var(--i)*45ms)}
.lname .ln2{color:transparent; -webkit-text-stroke:2px #EDECE8}
.named .lname .ln span{transform:none}
.lfoot{position:absolute; left:24px; right:24px; bottom:calc(24px + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; gap:1rem; font-family:var(--display); font-weight:700; font-size:.95rem; color:rgba(237,236,232,.75)}
.lfoot .lbar{flex:1; height:3px; border-radius:3px; background:rgba(237,236,232,.14); overflow:hidden}
.lfoot .lbar i{display:block; height:100%; width:0; background:linear-gradient(90deg,#7389FF,#20C46B,#FFC93C)}
.lfoot b{font-variant-numeric:tabular-nums; min-width:3.2ch; text-align:right; color:#EDECE8}

/* ---------- CURSOR ---------- */
#pc,#clabel,#trailc{position:fixed; z-index:90; left:0; top:0; pointer-events:none; display:none}
.has-cursor #pc,.has-cursor #clabel,.has-cursor #trailc{display:block}
#trailc{z-index:88; width:100%; height:100%}
#pc{width:34px; height:26px; margin:-13px 0 0 -34px; transform-origin:34px 13px}
#pc .inner{width:100%; height:100%; transform-origin:100% 50%; transition:scale .3s var(--ease)}
#pc.hot .inner{scale:1.35}
#pc svg{width:100%; height:100%; overflow:visible; filter:drop-shadow(0 4px 4px rgba(0,0,0,.22))}
#clabel{margin:22px 0 0 20px; font-family:var(--display); font-weight:650; font-size:.9rem; color:#fff; background:var(--blue); padding:.38rem .75rem; border-radius:999px; white-space:nowrap; opacity:0; scale:.6; transition:opacity .2s, scale .3s var(--ease)}
#clabel.on{opacity:1; scale:1}
.spark{position:fixed; z-index:89; left:0; top:0; width:10px; height:10px; margin:-5px 0 0 -5px; pointer-events:none; clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.has-cursor, .has-cursor *{cursor:none !important}

/* ---------- BUTTERFLIES ---------- */
#flies{position:fixed; inset:0; z-index:15; pointer-events:none; overflow:hidden}
.fly{position:absolute; left:0; top:0; width:40px; height:30px; margin:-15px 0 0 -20px; will-change:transform; filter:drop-shadow(0 6px 6px rgba(20,22,28,.18))}
.fly svg{width:100%; height:100%; overflow:visible}
.fly .wl,.fly .wr{transform-box:view-box; animation:flap .18s ease-in-out infinite alternate}
.fly .wl{transform-origin:17px 15px} .fly .wr{transform-origin:17px 15px}
@keyframes flap{from{transform:scaleX(1)}to{transform:scaleX(.18)}}
.fly.slow .wl,.fly.slow .wr{animation-duration:.42s}

/* reveal */
.rv{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0s)}
.rv.in{opacity:1; transform:none}
.split .w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em}
.split .w>span{display:inline-block; transform:translateY(110%); transition:transform 1s var(--ease); transition-delay:calc(var(--k)*55ms)}
.split.in .w>span{transform:none}
.split{--base:var(--ink); --c1:var(--blue); --c2:#16A35A; --c3:#FF5B37}
.journey .split,.contact .split{--base:var(--on-night); --c1:#7389FF; --c2:#20C46B; --c3:#FFC93C}
.split.in .w{overflow:visible}
.split .c{display:inline-block; animation:titleWave 3.2s ease-in-out infinite; animation-delay:calc(var(--j)*-.2s); transition:transform .5s var(--ease)}
.split .c:hover{transform:scale(1.2) rotate(-8deg)}
@keyframes titleWave{0%,100%{translate:0 0; color:var(--base)}25%{translate:0 -9%; color:var(--c1)}50%{translate:0 0; color:var(--c2)}75%{translate:0 5%; color:var(--c3)}}

/* ---------- HERO ---------- */
.hero{position:relative; height:100svh; min-height:620px; overflow:hidden; background:var(--studio)}
.hero-name{position:absolute; z-index:0; left:0; right:0; bottom:calc(84px + 2svh); font-family:var(--display); font-weight:800; font-size:min(9.8vw, 17svh); line-height:.84; letter-spacing:-.055em; color:var(--ink); padding-inline:clamp(14px,2.4vw,40px); user-select:none}
.hero-name .l1,.hero-name .l2{display:block; white-space:nowrap}
.hero-name .l2{text-align:left}
.hero-name .ch{display:inline-block; transform:translateY(105%); opacity:0; font-variation-settings:"wght" 800}
.go .hero-name .ch{animation:rise .9s var(--ease) forwards; animation-delay:calc(.5s + var(--i)*45ms)}
@keyframes rise{to{transform:none; opacity:1}}
.hero-figure{position:absolute; z-index:0; bottom:0; left:72%; transform:translateX(-50%); height:min(90svh, 960px); aspect-ratio:632/900; pointer-events:none}
.hero-figure img{width:100%; height:100%; object-fit:contain; object-position:bottom; opacity:0}
.no-gl .hero-figure{z-index:1}
.no-gl .hero-figure img{opacity:1}
.halo{position:absolute; z-index:0; left:0; top:0; width:0; height:0; pointer-events:none; opacity:0; scale:.7; transition:opacity 1s, scale 1.4s var(--ease)}
.go .halo{opacity:1; scale:1; transition-delay:1.8s}
.halo .disc,.halo .ring{position:absolute; left:50%; top:40%; translate:-50% -50%; border-radius:50%}
.halo .disc{display:none}
.halo .ring{border:1.5px dashed var(--line); animation:rot linear infinite}
.halo .r1{width:92%; aspect-ratio:1; animation-duration:26s}
.halo .r2{width:132%; aspect-ratio:1; animation-duration:38s; animation-direction:reverse}
.halo .r3{width:172%; aspect-ratio:1; animation-duration:52s}
.orb-i{position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; background:var(--card); box-shadow:0 8px 18px rgba(20,22,28,.16); display:grid; place-items:center; transform:rotate(var(--a)) translateX(var(--rad)) rotate(calc(-1 * var(--a)))}
.orb-i svg{width:24px; height:24px; animation:rot 26s linear infinite reverse}
.ring.r2 .orb-i svg{animation:rot 38s linear infinite}
.ring.r3 .orb-i svg{animation:rot 52s linear infinite reverse}
@media (max-width:900px){.orb-i{width:34px; height:34px; margin:-17px 0 0 -17px} .orb-i svg{width:18px; height:18px} .halo .r3{display:none}}
.badges{position:absolute; z-index:3; left:0; top:0; width:0; height:0; pointer-events:none}
.badge{position:absolute; font-family:var(--display); font-weight:700; font-size:clamp(.85rem,1vw,1rem); padding:.5rem .85rem; border-radius:14px; box-shadow:0 10px 24px rgba(20,22,28,.18); white-space:nowrap; opacity:0; scale:.4; transition:opacity .5s, scale .7s var(--ease); pointer-events:auto}
.badge b{display:block; font-size:1.5em; letter-spacing:-.03em; line-height:1}
.go .badge{opacity:1; scale:1; transition-delay:calc(2.6s + var(--n)*.15s)}
.badge .bob{display:block; animation:bob 4s ease-in-out infinite; animation-delay:calc(var(--n)*-1.3s)}
@keyframes bob{50%{transform:translateY(-8px) rotate(var(--tw,2deg))}}
.b1{left:-14%; top:30%; background:#2340FF; color:#fff; rotate:-6deg}
.b2{right:-12%; top:24%; background:#FFD23F; color:#1C1A10; rotate:5deg}
.b3{right:-14%; top:50%; background:#FF5B37; color:#1A0E0A; rotate:4deg}
.b4{right:-9%; top:74%; background:#16181D; color:#EDECE8; rotate:-4deg}
.hero-copy{position:absolute; z-index:2; left:clamp(20px,4vw,56px); top:calc(env(safe-area-inset-top,0px) + clamp(20px,4svh,56px)); width:min(32rem, 38vw)}
.hero-copy .hi{font-family:var(--hand); font-weight:700; font-size:2.5rem; line-height:1; color:var(--blue); transform:rotate(-3deg); display:inline-block; margin-bottom:.5rem}
.hero-copy .lede{font-size:clamp(1.05rem,1.3vw,1.25rem); line-height:1.5}
.hero-copy .roles{margin-top:.7rem; font-family:var(--display); font-weight:650; font-size:1.05rem; height:1.5em; overflow:hidden; position:relative}
.roles .r{position:absolute; left:0; top:0; transition:transform .6s var(--ease), opacity .6s; opacity:0; transform:translateY(100%); display:flex; align-items:center; gap:.55rem; white-space:nowrap}
.roles .r.on{opacity:1; transform:none}
.roles .r.out{opacity:0; transform:translateY(-100%)}
.roles .r::before{content:""; width:.55rem; height:.55rem; border-radius:50%; background:var(--blue)}
.hero-copy .actions{margin-top:1rem; display:flex; gap:.6rem; flex-wrap:wrap}
.hero-copy{opacity:0; transform:translateY(10px); transition:opacity .8s ease, transform .8s ease}
.go .hero-copy{opacity:1; transform:none; transition-delay:1.6s}
.hero-aside{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.8rem}
.pill{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--display); font-weight:600; font-size:.88rem; padding:.42rem .8rem; border-radius:999px; background:var(--card); border:1px solid var(--line); text-decoration:none; color:var(--ink); white-space:nowrap}
a.pill:hover{border-color:var(--blue); color:var(--blue)}
.pill svg{width:16px; height:16px}
.vis-hide{display:none !important}

.psst{margin-top:.9rem; font-family:var(--hand); font-weight:700; font-size:1.35rem; color:var(--ink-2); transform:rotate(-1.5deg)}
@media (pointer:coarse){.psst{display:none}}

/* ---------- MARQUEE ---------- */
.marq{position:relative; z-index:2; background:var(--ink); color:var(--studio); overflow:hidden; padding:1rem 0}
.marq.alt{background:var(--blue); color:#fff}
.marq .track{display:flex; width:max-content; will-change:transform}
.marq span{font-family:var(--display); font-weight:750; font-size:clamp(1.5rem,3.2vw,2.6rem); letter-spacing:-.03em; padding-right:2.2rem; white-space:nowrap; display:inline-flex; align-items:center; gap:2.2rem}
.marq span::after{content:""; width:.7em; height:.7em; background:currentColor; clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}

/* ---------- ABOUT ---------- */
.about{position:relative; background:var(--paper); padding:clamp(90px,12vw,160px) 0}
.about-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(40px,6vw,96px); align-items:start}
.about h2{font-size:clamp(2.8rem,6vw,5.4rem); letter-spacing:-.05em}
.about .body{margin-top:1.8rem; display:grid; gap:1.05rem; font-size:1.2rem; max-width:38rem}
.side{display:grid; gap:14px; position:sticky; top:40px}
.sbox{background:var(--card); border:1.5px solid var(--ink); border-radius:22px; padding:1.25rem 1.35rem; box-shadow:5px 5px 0 var(--ink)}
.sbox h3{font-size:1.05rem; display:flex; align-items:center; gap:.55rem}
.sbox p{margin-top:.45rem; font-size:1.05rem; line-height:1.5}
.sbox.blue{background:var(--blue); color:#fff; border-color:var(--ink)}
.sbox.blue .btn{margin-top:1rem; background:#fff; color:#16181D; border-color:#fff}
.sbox.blue .btn:hover{background:#16181D; color:#fff; border-color:#16181D}
.stats{margin-top:2.6rem; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; max-width:44rem}
.stat{border-top:2px solid var(--ink); padding-top:.8rem}
.stat b{display:block; font-family:var(--display); font-weight:750; font-size:clamp(2rem,3.4vw,2.9rem); letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums}
.stat span{display:block; margin-top:.4rem; color:var(--ink-2); font-size:.98rem; line-height:1.35}

/* ---------- WORK ---------- */
.work{position:relative; background:var(--studio); padding:clamp(90px,12vw,160px) 0}
.filters{display:flex; gap:.45rem; flex-wrap:wrap; margin-top:2rem}
.filters button{font-family:var(--display); font-weight:650; font-size:.98rem; padding:.55rem 1rem; border-radius:999px; border:1.5px solid var(--ink); background:transparent; color:var(--ink); transition:background .25s, color .25s; cursor:pointer}
.filters button.on{background:var(--ink); color:var(--studio)}
.filters button em{font-style:normal; opacity:.55; margin-left:.3rem}
.grid{margin-top:clamp(28px,4vw,44px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,26px)}
.card{position:relative; background:var(--card); border-radius:26px; color:var(--ink); border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .5s var(--ease), box-shadow .4s, opacity .5s}
.card.rv.in{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.card:hover{box-shadow:0 26px 50px rgba(20,22,28,.16); transition:transform .12s linear, box-shadow .4s}
.card.hide,.card.more-hidden{display:none}
.card .face{aspect-ratio:4/3; position:relative; overflow:hidden; display:grid; place-items:center; border-radius:25px 25px 0 0; text-decoration:none}
.card .face::after{content:""; position:absolute; inset:0; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.26), transparent 60%); opacity:0; transition:opacity .3s; pointer-events:none}
.card:hover .face::after{opacity:1}
.card .face>svg{width:92%; height:92%; overflow:visible}
.card .txt{padding:1.15rem 1.3rem 1.3rem; display:flex; flex-direction:column; gap:.45rem; flex:1}
.card h3{font-size:1.55rem; letter-spacing:-.035em}
.card .where{font-size:.92rem; color:var(--ink-2); font-family:var(--display); font-weight:600}
.card p{font-size:1.02rem; line-height:1.5; color:var(--ink-2)}
.card .stack{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.2rem}
.card .stack i{font-style:normal; font-size:.82rem; padding:.2rem .55rem; border-radius:999px; background:var(--studio); color:var(--ink-2)}
.card .acts{margin-top:auto; padding-top:.8rem; display:flex; gap:.5rem; flex-wrap:wrap}
.sm{font-family:var(--display); font-weight:650; font-size:.92rem; text-decoration:none; padding:.5rem .9rem; border-radius:999px; border:1.5px solid var(--ink); display:inline-flex; align-items:center; gap:.45rem; transition:background .25s, color .25s, border-color .25s}
.sm svg{width:16px; height:16px}
.sm.live{background:var(--ink); color:var(--card)}
.sm:hover{background:var(--blue); color:#fff; border-color:var(--blue)}
.proud{position:absolute; z-index:3; top:-12px; right:16px; background:#FFE066; color:#1C1A10; font-family:var(--hand); font-weight:700; font-size:1.3rem; padding:.15rem .7rem; border-radius:8px; transform:rotate(4deg); box-shadow:0 3px 0 rgba(0,0,0,.12)}
.newtag{background:#20C46B; color:#06210F}
.more-wrap{display:flex; justify-content:center; margin-top:clamp(28px,4vw,44px)}
.more-wrap .btn svg{transition:transform .4s var(--ease)}
.more-wrap.open .btn svg{transform:rotate(180deg)}
.more-note{margin-top:1.4rem; text-align:center; color:var(--ink-2)}
/* face animations */
.lbl{font-family:Caveat, cursive; font-weight:700}
.env-dot{offset-path:path("M60 270 C 80 130, 160 60, 250 54 C 320 50, 350 110, 352 270 Z"); animation:fly 6s linear infinite}
@keyframes fly{from{offset-distance:0%}to{offset-distance:100%}}
.ping{transform-box:fill-box; transform-origin:center; animation:ping 2.6s ease-out infinite}
.ping.p2{animation-delay:.9s} .ping.p3{animation-delay:1.7s}
.ping.slow{animation-duration:4.5s} .ping.slow.p2{animation-delay:1.5s} .ping.slow.p3{animation-delay:3s}
@keyframes ping{from{transform:scale(.2); opacity:.95}to{transform:scale(1.6); opacity:0}}
.f-air{perspective:700px}
.cube{--c:clamp(92px,10vw,124px); width:var(--c); height:var(--c); position:relative; transform-style:preserve-3d; animation:spin 12s linear infinite}
.cube div{position:absolute; inset:0; border:2px solid rgba(255,255,255,.92); background:rgba(255,255,255,.07)}
.cube .q1{transform:translateZ(calc(var(--c)/2))} .cube .q2{transform:rotateY(180deg) translateZ(calc(var(--c)/2))}
.cube .q3{transform:rotateY(90deg) translateZ(calc(var(--c)/2))} .cube .q4{transform:rotateY(-90deg) translateZ(calc(var(--c)/2))}
.cube .q5{transform:rotateX(90deg) translateZ(calc(var(--c)/2))} .cube .q6{transform:rotateX(-90deg) translateZ(calc(var(--c)/2))}
@keyframes spin{from{transform:rotateX(-22deg) rotateY(0)}to{transform:rotateX(-22deg) rotateY(360deg)}}
.card:hover .cube{animation-duration:3s}
.f-air .note{position:absolute; right:7%; bottom:7%; color:#fff; font-size:1.6rem; transform:rotate(-5deg)}
.rot{transform-box:view-box; transform-origin:200px 150px; animation:rot 8s linear infinite}
.rot.r2{animation-duration:13s; animation-direction:reverse} .rot.r3{animation-duration:20s}
@keyframes rot{to{transform:rotate(360deg)}}
.orb{transform-box:view-box; transform-origin:200px 120px; animation:rot 3s linear infinite}
.orb.o2{animation-duration:4.4s; animation-direction:reverse}
.bobsvg{animation:bobs 3s ease-in-out infinite} .bobsvg.d2{animation-delay:-1.5s}
@keyframes bobs{50%{transform:translateY(-8px)}}
.optmove{animation:optm 4s var(--ease) infinite}
@keyframes optm{0%,15%{transform:translateY(0)}30%,45%{transform:translateY(42px)}60%,100%{transform:translateY(84px)}}
.tick{stroke-dasharray:40; stroke-dashoffset:40; animation:tick 4s ease infinite}
@keyframes tick{0%,62%{stroke-dashoffset:40}75%,100%{stroke-dashoffset:0}}
.knobrun{animation:knob 2.6s var(--ease) infinite alternate}
@keyframes knob{0%{transform:translateX(0)}30%{transform:translateX(190px)}50%{transform:translateX(40px)}75%{transform:translateX(150px)}100%{transform:translateX(230px)}}
.arc{animation:arc 1.2s ease-in-out infinite} .arc.a2{animation-delay:.2s} .arc.a3{animation-delay:.4s}
@keyframes arc{50%{opacity:.15}}
.wavemove{animation:swell 5s linear infinite}
@keyframes swell{to{transform:translateX(-200px)}}
.diver{animation:dive 6s ease-in-out infinite}
@keyframes dive{0%{transform:translateY(0)}80%{transform:translateY(170px)}100%{transform:translateY(0)}}
.bub{animation:up 3s linear infinite; opacity:.8} .bub.b2{animation-delay:1s} .bub.b3{animation-delay:2s}
@keyframes up{to{transform:translateY(-70px); opacity:0}}
.type{stroke-dasharray:200; stroke-dashoffset:200; animation:type 5s steps(18) infinite}
.type.t2{animation-delay:.9s} .type.t3{animation-delay:1.8s} .type.t4{animation-delay:2.7s}
@keyframes type{0%{stroke-dashoffset:200}30%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0; opacity:0}}
.caret{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.bladeA{transform-box:view-box; transform-origin:200px 150px; animation:snipA 1.4s ease-in-out infinite}
.bladeB{transform-box:view-box; transform-origin:200px 150px; animation:snipB 1.4s ease-in-out infinite}
@keyframes snipA{50%{transform:rotate(-14deg)}} @keyframes snipB{50%{transform:rotate(14deg)}}
.shimmer{animation:shim 3s linear infinite}
@keyframes shim{0%{opacity:.55}50%{opacity:1}100%{opacity:.55}}
.glow{transform-box:fill-box; transform-origin:center; animation:glow 3s ease-in-out infinite}
@keyframes glow{50%{transform:scale(1.25); opacity:.6}}

/* ---------- JOURNEY ---------- */
.journey{position:relative; background:var(--night); color:var(--on-night); padding:clamp(90px,12vw,150px) 0 clamp(70px,9vw,120px)}
.journey .sec-sub{color:var(--on-night-2)}
.hud{position:sticky; top:14px; z-index:5; margin-top:2rem; display:flex; align-items:center; gap:1rem; background:rgba(27,30,38,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(237,236,232,.12); border-radius:18px; padding:.8rem 1rem; max-width:640px}
.hud .lvl{font-family:var(--display); font-weight:800; font-size:1.6rem; letter-spacing:-.03em; color:#7389FF; white-space:nowrap; font-variant-numeric:tabular-nums}
.hud .what{flex:1; min-width:0}
.hud .what b{display:block; font-family:var(--display); font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.xp{margin-top:.4rem; height:8px; border-radius:8px; background:rgba(237,236,232,.12); overflow:hidden}
.xp i{display:block; height:100%; width:0; background:linear-gradient(90deg,#7389FF,#20C46B); border-radius:8px}
.hud .xpn{font-family:var(--display); font-weight:700; font-size:.9rem; color:var(--on-night-2); white-space:nowrap; font-variant-numeric:tabular-nums}
.road{position:relative; margin-top:clamp(40px,6vw,70px)}
.road svg.path{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.lv{position:relative; min-height:470px; display:flex}
.lv .node{position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; background:var(--night); border:3px solid rgba(237,236,232,.4); transition:background .4s, border-color .4s, scale .5s var(--ease); z-index:2}
.lv.on .node{background:#7389FF; border-color:#7389FF; scale:1.25}
.lv.now .node{border-color:#20C46B}
.lv.now.on .node{background:#20C46B}
.lv.now .node::after{content:""; position:absolute; inset:-10px; border-radius:50%; border:2px solid #20C46B; animation:ring 1.8s ease-out infinite}
@keyframes ring{from{transform:scale(.6); opacity:1}to{transform:scale(1.7); opacity:0}}
.lvcard{width:min(40%,430px); background:var(--night-2); border:1px solid rgba(237,236,232,.1); border-radius:24px; padding:1.3rem 1.4rem 1.4rem; opacity:.25; transform:translateY(30px) scale(.96); transition:opacity .6s, transform .7s var(--ease), border-color .5s; align-self:flex-start}
.lv.on .lvcard{opacity:1; transform:none; border-color:rgba(115,137,255,.45)}
.lv.now.on .lvcard{border-color:rgba(32,196,107,.65)}
.lv.L .lvcard{margin-left:calc(20% + 34px)}
.lv.R .lvcard{margin-left:auto; margin-right:calc(20% + 34px)}
.lvcard .top{display:flex; justify-content:space-between; align-items:baseline; gap:1rem}
.lvcard .lv-n{font-family:var(--display); font-weight:800; font-size:.92rem; color:#7389FF; letter-spacing:.01em}
.lv.now .lv-n{color:#20C46B}
.lvcard .yr{font-family:var(--hand); font-weight:700; font-size:1.5rem; color:var(--on-night-2)}
.lvcard h3{margin-top:.4rem; font-size:1.6rem; letter-spacing:-.03em}
.lvcard .org{margin-top:.25rem; color:var(--on-night-2); font-size:1rem}
.lvcard p{margin-top:.7rem; color:#C9CBD1; font-size:1.02rem; line-height:1.55}
.unlock{margin-top:.9rem; display:flex; flex-wrap:wrap; gap:.4rem; align-items:center}
.unlock span:first-child{font-family:var(--hand); font-size:1.3rem; color:#FFD23F; margin-right:.2rem}
.unlock i{font-style:normal; font-size:.85rem; padding:.22rem .6rem; border-radius:999px; background:rgba(115,137,255,.16); color:#C7CFFF; transform:scale(0); transition:transform .5s var(--ease); transition-delay:calc(.3s + var(--k)*.08s)}
.lv.on .unlock i{transform:none}
.lv.next .lvcard{border-style:dashed}
.marker{position:absolute; left:0; top:0; width:40px; height:36px; margin:-18px 0 0 -20px; z-index:4; pointer-events:none}
.marker svg{width:100%; height:100%; overflow:visible}
.marker .wl,.marker .wr{transform-box:view-box; transform-origin:17px 15px; animation:flap .2s ease-in-out infinite alternate}

.mem{position:absolute; top:-30px; height:460px; pointer-events:none; z-index:1}
.lv.L .mem{left:calc(64% + 10px); right:1%} .lv.R .mem{left:1%; right:calc(64% + 10px)}
.bigyr{position:absolute; left:50%; top:24%; translate:-50% 0; font-family:var(--display); font-weight:800; font-size:clamp(6rem,11vw,10.5rem); letter-spacing:-.06em; line-height:1; color:transparent; -webkit-text-stroke:1.5px rgba(115,137,255,.28); white-space:nowrap; will-change:transform}
.lv.now .bigyr{-webkit-text-stroke-color:rgba(32,196,107,.4)}
.mstuff{position:absolute; left:50%; top:46px; translate:-50% 0; transform:scale(.3) rotate(calc(var(--r) * 3)); opacity:0; transition:transform .9s cubic-bezier(.3,1.7,.45,1), opacity .35s; transition-delay:.2s}
.lv.on .mstuff{opacity:1; transform:scale(1) rotate(var(--r))}
.mpol{margin:0; background:#fff; padding:8px 8px 36px; border-radius:5px; width:clamp(170px,15vw,220px); box-shadow:0 18px 40px rgba(0,0,0,.45); position:relative}
.mpol img{width:100%; height:auto; border-radius:2px}
.mpol figcaption{position:absolute; left:6px; right:6px; bottom:9px; text-align:center; font-family:var(--hand); font-weight:700; font-size:1.15rem; line-height:1; color:#2b2d33}
.mpol.two{position:absolute; left:46%; top:52%; rotate:14deg}
.mnote{width:200px; min-height:170px; background:#FFE066; color:#1C1A10; padding:1.1rem 1rem; font-family:var(--hand); font-weight:700; font-size:1.65rem; line-height:1.12; box-shadow:0 16px 34px rgba(0,0,0,.4); border-radius:3px}
.mmyst{width:210px; height:210px; border:2.5px dashed rgba(237,236,232,.45); border-radius:22px; display:grid; place-items:center; align-content:center; gap:.4rem; text-align:center; color:#EDECE8; font-family:var(--hand); font-weight:700; font-size:1.5rem; line-height:1.1}
.mmyst b{font-family:var(--display); font-size:4.4rem; line-height:.9; color:#FFC93C; animation:wobble 2.2s ease-in-out infinite}
@keyframes wobble{50%{transform:rotate(12deg) scale(1.1)}}
.coin{position:absolute; font-size:2.1rem; line-height:1; animation:coinBob 2.6s ease-in-out infinite; filter:drop-shadow(0 6px 8px rgba(0,0,0,.4)); opacity:0; transition:opacity .4s .5s}
.lv.on .coin{opacity:1}
.coin.got{visibility:hidden}
@keyframes coinBob{50%{translate:0 -12px; rotate:8deg}}
.coin-fly{position:fixed; left:0; top:0; z-index:60; font-size:2.1rem; line-height:1; pointer-events:none}
.score{font-family:var(--display); font-weight:800; font-size:1rem; padding:.35rem .75rem; border-radius:999px; background:rgba(255,201,60,.16); color:#FFC93C; white-space:nowrap; font-variant-numeric:tabular-nums}
.score.bump{animation:jelly .5s}
@media (max-width:900px){.mem{display:none} .score{font-size:.9rem}}

/* ---------- WINS ---------- */
.wins{position:relative; background:var(--paper); padding:clamp(90px,12vw,160px) 0}
.board{position:relative; margin-top:clamp(30px,4vw,50px); height:clamp(640px,62vw,820px); border-radius:28px; background:var(--studio); background-image:radial-gradient(rgba(22,24,29,.13) 1.2px, transparent 1.4px); background-size:22px 22px; overflow:hidden; border:1px solid var(--line)}
.polaroid{position:absolute; width:clamp(150px,14.2vw,206px); background:#fff; padding:10px 10px 50px; border-radius:6px; box-shadow:0 16px 36px rgba(20,22,28,.18), 0 2px 6px rgba(20,22,28,.08); touch-action:none; user-select:none; transition:box-shadow .3s}
.polaroid.drag{box-shadow:0 30px 60px rgba(20,22,28,.28); transition:none}
.polaroid img{width:100%; height:auto; border-radius:2px; pointer-events:none}
.polaroid figcaption{position:absolute; left:8px; right:8px; bottom:12px; text-align:center; font-family:var(--hand); font-weight:700; font-size:1.2rem; line-height:1; color:#2b2d33}
.polaroid .tape,.mpol .tape{position:absolute; z-index:2; top:-12px; left:50%; width:80px; height:24px; transform:translateX(-50%) rotate(var(--tr,-3deg)); background:var(--tc,rgba(255,224,102,.85)); box-shadow:0 1px 2px rgba(0,0,0,.08)}
.polaroid .tape-old{background:rgba(255,224,102,.8)}
.board-hint{position:absolute; right:22px; bottom:16px; font-family:var(--hand); font-size:1.4rem; color:var(--ink-2)}
.win-list{margin-top:clamp(36px,5vw,60px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,22px)}
.win{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:1.3rem 1.35rem; transition:transform .4s var(--ease)}
.win:hover{transform:translateY(-5px) rotate(-.8deg)}
.win .big{font-family:var(--display); font-weight:750; font-size:2.2rem; letter-spacing:-.04em; line-height:1; color:var(--blue)}
.win h3{margin-top:.6rem; font-size:1.2rem; letter-spacing:-.015em}
.win p{margin-top:.3rem; color:var(--ink-2); font-size:1rem; line-height:1.5}

/* ---------- TOOLBOX ---------- */
.tools{position:relative; background:var(--studio); padding:clamp(90px,12vw,160px) 0 clamp(70px,9vw,120px)}
.tools-top{display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap}
.arena{position:relative; margin-top:clamp(28px,4vw,44px); height:clamp(480px,46vw,580px); border-radius:28px; background:var(--paper); background-image:radial-gradient(var(--line) 1.2px, transparent 1.4px); background-size:24px 24px; border:1.5px solid var(--ink); overflow:hidden; touch-action:pan-y}
.ball{position:absolute; left:0; top:0; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2em; text-align:center; font-family:var(--display); font-weight:700; line-height:1; letter-spacing:-.01em; user-select:none; touch-action:none; will-change:transform; box-shadow:inset 0 -6px 0 rgba(0,0,0,.12), 0 6px 14px rgba(20,22,28,.18)}
.ball svg{width:42%; height:42%; flex:none}
.ball span{font-size:.62em; opacity:.92; padding:0 6px}
.ball.textonly span{font-size:.95em; opacity:1}
.arena-label{position:absolute; left:22px; top:16px; font-family:var(--hand); font-size:1.45rem; color:var(--ink-2); pointer-events:none}

/* ---------- CERTS ---------- */
.certs{position:relative; background:var(--paper); padding:clamp(90px,12vw,160px) 0; overflow:hidden}
.medals{margin-top:clamp(32px,4vw,52px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,24px)}
.medal{position:relative; background:var(--card); border:1.5px solid var(--ink); border-radius:24px; padding:1.4rem 1.4rem 1.5rem 7.4rem; min-height:150px; box-shadow:5px 5px 0 var(--ink); transition:transform .4s var(--ease)}
.medal:hover{transform:translateY(-4px) rotate(-1deg)}
.medal svg{position:absolute; left:1.2rem; top:1.1rem; width:5.2rem; height:6.6rem; overflow:visible}
.medal .mcoin{transform-box:fill-box; transform-origin:center; transition:transform .8s var(--ease)}
.medal:hover .mcoin{transform:rotateY(180deg)}
.medal .by{font-family:var(--display); font-weight:650; font-size:.9rem; color:var(--ink-2)}
.medal h3{margin-top:.25rem; font-size:1.3rem; letter-spacing:-.02em; line-height:1.1}
.medal .x{margin-top:.5rem; font-family:var(--hand); font-weight:700; font-size:1.5rem; color:var(--blue); line-height:1}
.tally{margin-top:clamp(28px,4vw,44px); display:flex; flex-wrap:wrap; gap:.5rem}
.tally span{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--display); font-weight:650; font-size:.95rem; padding:.45rem .85rem; border-radius:999px; background:var(--card); border:1px solid var(--line)}
.tally svg{width:16px; height:16px}
.tally b{font-weight:800; color:var(--blue)}
.belt{margin-top:1.4rem; display:grid; gap:14px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.belt .row{display:flex; width:max-content; gap:14px; will-change:transform}
.ticket{flex:none; width:270px; background:var(--card); border-radius:16px; padding:.95rem 1.05rem; display:flex; gap:.85rem; align-items:center; border:1px solid var(--line); position:relative}
.ticket::before,.ticket::after{content:""; position:absolute; top:50%; width:16px; height:16px; border-radius:50%; background:var(--paper); transform:translateY(-50%)}
.ticket::before{left:-9px} .ticket::after{right:-9px}
.ticket .ico{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none; color:#fff; font-family:var(--display); font-weight:800; font-size:.9rem}
.ticket .ico svg{width:22px; height:22px}
.ticket h4{font-size:1rem; letter-spacing:-.01em; line-height:1.2}
.ticket small{display:block; margin-top:.15rem; color:var(--ink-2); font-size:.85rem}
.all-certs{margin-top:1.6rem; display:none; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.all-certs.open{display:grid}
.all-certs .ticket{width:auto}
.certs .toggle{margin-top:1.6rem}

/* ---------- CONTACT ---------- */
.contact{position:relative; background:var(--night); color:var(--on-night); padding:clamp(90px,12vw,150px) 0 calc(120px + env(safe-area-inset-bottom,0px)); overflow:hidden}
.contact .big{font-family:var(--display); font-weight:800; font-size:clamp(4.4rem,15vw,13rem); letter-spacing:-.06em; line-height:.86; user-select:none}
.contact .big .lt{display:inline-block; transition:transform .5s var(--ease); animation:hiFloat 3.2s ease-in-out infinite; animation-delay:calc(var(--i)*-.22s)}
@keyframes hiFloat{0%,100%{translate:0 0; color:var(--on-night)}25%{translate:0 -9%; color:#7389FF}50%{translate:0 0; color:#20C46B}75%{translate:0 5%; color:#FFC93C}}
.hi-row{display:flex; align-items:center; justify-content:space-between; gap:2rem}
.spinner{position:relative; flex:none; width:clamp(130px,15vw,200px); aspect-ratio:1}
.spinner>svg:first-child{width:100%; height:100%; animation:rot 16s linear infinite}
.spinner text{font-family:var(--display); font-weight:700; font-size:17px; fill:#EDECE8; letter-spacing:.5px}
.spinner .mid{position:absolute; left:50%; top:50%; width:42%; height:42%; translate:-50% -50%; overflow:visible}
.spinner .mid .wl,.spinner .mid .wr{transform-box:view-box; transform-origin:17px 15px; animation:flap .3s ease-in-out infinite alternate}
.scribble{position:relative; display:inline-block; margin-top:.6rem; font-family:var(--hand); font-weight:700; font-size:clamp(1.7rem,3.4vw,2.8rem); color:#FFC93C; line-height:1.1}
.scribble svg{display:block; width:100%; height:16px; margin-top:4px}
.scribble path{stroke-dasharray:460; stroke-dashoffset:460; transition:stroke-dashoffset 1.6s var(--ease) .3s}
.scribble.in path{stroke-dashoffset:0}
.contact .big .lt:hover{transform:scale(1.18) rotate(-8deg)}
.contact .wave{display:inline-block; transform-origin:70% 70%; animation:wave 2.4s ease-in-out infinite}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(12deg)}40%{transform:rotate(-4deg)}}
.contact .note{margin-top:1.4rem; color:#B9BCC4; max-width:38rem; font-size:1.25rem}
.c-grid{margin-top:clamp(40px,6vw,70px); display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(16px,2.4vw,28px)}
.composer{background:var(--night-2); border:1px solid rgba(237,236,232,.1); border-radius:28px; padding:clamp(20px,3vw,34px)}
.composer h3{font-size:1.6rem; letter-spacing:-.03em}
.composer .q{margin-top:1.2rem; font-family:var(--hand); font-size:1.5rem; color:var(--on-night-2)}
.chips{margin-top:.5rem; display:flex; flex-wrap:wrap; gap:.45rem}
.chips button{font-family:var(--display); font-weight:650; font-size:.98rem; padding:.55rem 1rem; border-radius:999px; border:1.5px solid rgba(237,236,232,.25); background:transparent; color:var(--on-night); cursor:pointer; transition:background .25s, border-color .25s, transform .3s var(--ease)}
.chips button:hover{transform:translateY(-2px)}
.chips button.on{background:#7389FF; border-color:#7389FF; color:#0B0D12}
.field{margin-top:1rem; display:grid; gap:.35rem}
.field label{font-family:var(--display); font-weight:600; font-size:.95rem; color:var(--on-night-2)}
.field input,.field textarea{width:100%; font:inherit; font-size:1.05rem; color:var(--on-night); background:rgba(0,0,0,.25); border:1.5px solid rgba(237,236,232,.14); border-radius:14px; padding:.8rem .95rem; transition:border-color .25s}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field textarea:focus{outline:none; border-color:#7389FF}
.send{margin-top:1.2rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.send .btn{background:#7389FF; border-color:#7389FF; color:#0B0D12}
.send .btn:hover{background:#EDECE8; border-color:#EDECE8}
.send small{color:var(--on-night-2); font-size:.92rem}
.plane{transition:transform .9s var(--ease), opacity .9s}
.sent .plane{transform:translate(160px,-120px) rotate(-20deg); opacity:0}
.c-side{display:grid; gap:12px; align-content:start}
.ccard{display:flex; align-items:center; gap:1rem; background:var(--night-2); border:1px solid rgba(237,236,232,.1); border-radius:20px; padding:1rem 1.15rem; text-decoration:none; color:var(--on-night); transition:transform .35s var(--ease), border-color .3s, background .3s; cursor:pointer; width:100%; text-align:left}
.ccard:hover{transform:translateX(6px); border-color:rgba(115,137,255,.6)}
.ccard .ic{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; flex:none}
.ccard .ic svg{width:22px; height:22px}
.ccard b{display:block; font-family:var(--display); font-size:1.08rem}
.ccard small{display:block; color:var(--on-night-2); font-size:.92rem; overflow-wrap:anywhere}
.ccard.resume{background:#2340FF; border-color:#2340FF}
.ccard.resume small{color:rgba(255,255,255,.8)}
.ccard.resume .ic{background:#fff; color:#2340FF}
.visitbox{background:linear-gradient(135deg,#1B1E26,#232838); border:1px solid rgba(237,236,232,.1); border-radius:20px; padding:1.1rem 1.2rem}
.visitbox .n{font-family:var(--display); font-weight:800; font-size:clamp(2.4rem,4vw,3.4rem); letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; margin-top:.3rem}
.visitbox small{display:flex; align-items:center; gap:.5rem; color:var(--on-night-2); font-size:.95rem}
.foot{margin-top:clamp(70px,9vw,110px); padding-top:1.3rem; border-top:1px solid rgba(237,236,232,.12); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; color:#9599A3; font-size:.95rem}
#caught{position:fixed; z-index:21; left:16px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); font-family:var(--display); font-weight:800; font-size:.95rem; padding:.5rem .9rem; border-radius:999px; background:#FFC93C; color:#1C1A10; box-shadow:0 8px 20px rgba(0,0,0,.18); transform:translateY(160%); transition:transform .6s var(--ease)}
#caught.show{transform:none}
#caught.bump{animation:jelly .5s}
.fold-plane{position:fixed; z-index:96; left:0; top:0; width:80px; height:60px; margin:-30px 0 0 -40px; pointer-events:none}
.fold-plane svg{width:100%; height:100%; overflow:visible; filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.dontpress{font-family:var(--display); font-weight:650; font-size:.92rem; padding:.5rem .95rem; border-radius:999px; border:1.5px dashed rgba(237,236,232,.4); background:transparent; color:#EDECE8; cursor:pointer; transition:background .25s, border-color .25s, transform .3s var(--ease)}
.dontpress:hover{background:#FF5B37; border-color:#FF5B37; color:#1A0E0A; transform:rotate(-3deg) scale(1.06)}
#toast{position:fixed; z-index:95; width:max-content; max-width:min(420px, calc(100% - 32px)); text-align:center; line-height:1.35; left:50%; bottom:calc(84px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,20px); background:#20C46B; color:#06210F; font-family:var(--display); font-weight:700; padding:.7rem 1.15rem; border-radius:18px; opacity:0; transition:opacity .3s, transform .4s var(--ease); pointer-events:none}
#toast.on{opacity:1; transform:translate(-50%,0)}

/* ---------- SCROLL PLANE ---------- */
#sp{position:fixed; z-index:19; top:0; right:0; bottom:0; width:56px; pointer-events:none; opacity:0; transition:opacity .6s}
.go #sp{opacity:1; transition-delay:2.5s}
#spc{position:absolute; inset:0; width:100%; height:100%}
#spp{position:absolute; left:0; top:0; width:30px; height:23px; margin:-11px 0 0 -15px; filter:drop-shadow(0 4px 5px rgba(0,0,0,.25))}
#spp svg{width:100%; height:100%; overflow:visible}
@media (max-width:900px){#sp{width:30px} #spp{width:22px; height:17px; margin:-8px 0 0 -11px}}
@media (prefers-reduced-motion:reduce){#sp{display:none}}

/* ---------- PULL CORD ---------- */
#cord{position:fixed; z-index:22; top:0; right:clamp(18px,5vw,80px); width:44px; transform-origin:50% 0; --len:84px}
@media (max-width:900px){#cord{right:6px; --len:34px; scale:.85; transform-origin:50% 0} #cord .pullme{display:none}}
#cord.swing{animation:swing 1.4s cubic-bezier(.3,.6,.4,1)}
@keyframes swing{0%{transform:rotate(0)}15%{transform:rotate(14deg)}35%{transform:rotate(-10deg)}55%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
#cord .line{position:absolute; left:50%; top:0; width:2px; height:var(--len); background:var(--ink-2); translate:-50% 0}
#cord .knob{z-index:1; position:absolute; left:50%; top:var(--len); width:30px; height:40px; translate:-50% 0; border:0; padding:0; background:none; cursor:grab; touch-action:none}
#cord .knob svg{width:100%; height:100%; overflow:visible}
#cord .bulb{fill:#FFF3B0; stroke:var(--ink); stroke-width:1.6; transition:fill .3s, filter .3s}
:root[data-theme="dark"] #cord .bulb{fill:#FFD23F; filter:drop-shadow(0 0 10px rgba(255,210,63,.9))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #cord .bulb{fill:#FFD23F; filter:drop-shadow(0 0 10px rgba(255,210,63,.9))}}
#cord .pullme{position:absolute; top:calc(var(--len) + 10px); right:40px; font-family:var(--hand); font-weight:700; font-size:1.25rem; color:var(--ink-2); white-space:nowrap; transform:rotate(-6deg); opacity:0; transition:opacity .5s}
.go #cord .pullme{opacity:1; transition-delay:3s}
#cord.used .pullme{opacity:0 !important}
#cord:not(.drag) .line,#cord:not(.drag) .knob{transition:height .6s cubic-bezier(.3,1.8,.4,1), top .6s cubic-bezier(.3,1.8,.4,1)}

/* ---------- DOCK ---------- */
.dock{position:fixed; z-index:20; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,160%); display:flex; align-items:center; gap:.15rem; padding:.35rem; border-radius:999px; background:rgba(22,24,29,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 10px 30px rgba(0,0,0,.2); transition:transform .7s var(--ease)}
.go .dock{transform:translate(-50%,0); transition-delay:2s}
.dock a,.dock button{font-family:var(--display); font-weight:600; font-size:.95rem; color:#EDECE8; text-decoration:none; padding:.6rem .95rem; border-radius:999px; border:0; background:none; line-height:1; transition:background .25s, color .25s; white-space:nowrap; cursor:pointer}
.dock a:hover,.dock button:hover{background:rgba(255,255,255,.1)}
.dock .logo-link{padding:.3rem .45rem}
.dock .logo{width:30px; height:30px; display:block; transition:transform .5s var(--ease)}
.dock .logo-link:hover .logo{transform:rotate(-10deg) scale(1.1)}
.dock a.logo-link.cur{background:none}
.dock a.cur{background:#EDECE8; color:#16181D}
.dock button{display:grid; place-items:center; padding:.5rem .7rem}
@media (min-width:901px){.dock .opt-theme{display:none}}
.dock svg{width:18px; height:18px}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .medals{grid-template-columns:1fr}
  .all-certs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 900px){
  .hero{height:auto; min-height:0; display:flex; flex-direction:column; padding-top:calc(env(safe-area-inset-top,0px) + 70px)}
  .hero-name{position:relative; inset:auto; font-size:17.4vw; line-height:.86; padding-inline:16px; order:-1}
  .hero-name .l2{text-align:right}
  .hero-figure{position:relative; left:auto; bottom:auto; transform:none; align-self:center; height:min(66svh, 118vw); margin-top:-3vw}
  .badge{font-size:.8rem; padding:.4rem .65rem}
  .badge.b1{left:-4%} .badge.b2,.badge.b3,.badge.b4{left:auto; right:-4%}
  .hero-copy{position:relative; top:auto; left:auto; width:auto; padding:28px 20px 44px; border-top:1px solid var(--line)}
  .hero-aside .pill{font-size:.82rem; padding:.4rem .7rem}
  .hero-aside .opt{display:none}
  .about-grid{grid-template-columns:1fr}
  .side{position:relative; top:auto}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lv{min-height:0; padding-bottom:42px}
  .lv.L .lvcard,.lv.R .lvcard{width:auto; margin:0 0 0 48px}
  .board{height:auto; display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:28px 20px; background-image:none}
  .polaroid{position:relative; flex:none; width:min(72vw,280px); left:auto !important; top:auto !important; transform:rotate(var(--rot,0deg)) !important; scroll-snap-align:center}
  .board-hint{display:none}
  .win-list{grid-template-columns:1fr}
  .arena{height:640px}
  .c-grid{grid-template-columns:1fr}
  .spinner{width:110px}
  .hi-row{gap:.8rem}
  .dock a{padding:.6rem .7rem; font-size:.88rem}
}
@media (max-width: 560px){
  .grid{grid-template-columns:1fr}
  .all-certs{grid-template-columns:1fr}
  .dock .opt{display:none}
  .medal{padding-left:6.4rem} .medal svg{width:4.4rem}
}
@media (prefers-reduced-motion: reduce){
  .hero-name .ch{transform:none; opacity:1; animation:none !important}
  .hero-copy,.hero-aside{opacity:1; transform:none; transition:none}
  .dock{transform:translate(-50%,0); transition:none}
  .rv{opacity:1; transform:none; transition:none}
  .split .w>span{transform:none; transition:none}
  .badge{opacity:1; scale:1}
  #flies{display:none}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important}
}