/* ============ TOKENS ============ */
:root{
  --bg:#0B0F12;
  --ink:#E8EDF0;
  --dim:#8A949B;
  --line:#1E262C;
  --accent:#2DD4BF;                /* dynamic accent color */
  --d:'Bebas Neue',sans-serif;     /* display */
  --m:'Space Mono',monospace;      /* utility */
  --b:'Inter',sans-serif;          /* body */
}

/* ============ BASE ============ */
*{margin:0;padding:0;box-sizing:border-box}
html, body {
  background: var(--bg);
  overscroll-behavior: none;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}
main {
  /* text-shadow removed for clean typography */
}
body{
  color:var(--ink);
  font:400 16px/1.6 var(--b);
  -webkit-font-smoothing:antialiased;
  min-height: 100vh;
}
a{color:inherit;text-decoration:none}
button{background:none;border:none;color:inherit;font:inherit;cursor:pointer}
.lime{color:var(--accent)}
:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
@media(pointer:fine){
  body.has-custom-cursor,body.has-custom-cursor a,body.has-custom-cursor button{cursor:none}
}

/* ============ CUSTOM CURSOR ============ */
.bg-fx {
  position: fixed;
  inset: -30vh 0;
  z-index: 0;
  pointer-events: none;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.25;
  animation: float 20s infinite ease-in-out alternate;
}
.orb-1 {
  width: 50vw; height: 50vw;
  background: var(--accent);
  top: -10vw; left: -10vw;
}
.orb-2 {
  width: 60vw; height: 60vw;
  background: #1a1a1a;
  bottom: -20vw; right: -10vw;
  animation-delay: -10s;
}
@keyframes float {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(8vw, 10vw) scale(1.1); }
}

/* ============ WEBGL CANVAS ============ */
#webgl-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;            /* behind slide text (z2+), above bg orb (z0) */
  pointer-events: none;
}


.cur,.cur-r{position:fixed;top:0;left:0;pointer-events:none;z-index:90;border-radius:50%;opacity:0;transition:opacity .3s,width .25s,height .25s}
.cur{width:8px;height:8px;background:var(--accent);transform:translate(-50%,-50%)}
.cur-r{width:34px;height:34px;border:1px solid var(--ink);mix-blend-mode:difference;
  transform:translate(-50%,-50%)}
.cur-r.big{width:64px;height:64px}
.cur.visible,.cur-r.visible{opacity:1}
@media(pointer:coarse){.cur,.cur-r{display:none}}

body.loading .hud, body.loading main {visibility:hidden}

/* ============ PRELOADER ============ */
.pre{position:fixed;inset:0;z-index:80;background:var(--bg);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(20px,4vw,48px)}
.pre-log{font:400 12px/2 var(--m);color:var(--dim);letter-spacing:.04em}
.pre-log .ok{color:var(--accent)}
.pre-log div{opacity:0}
.pre-num{font:400 clamp(5rem,16vw,12rem)/0.9 var(--d);color:var(--ink);
  align-self:flex-end;letter-spacing:.01em}
.sh{position:fixed;left:0;width:100%;height:50.5%;background:var(--bg);z-index:70}
.sh-t{top:0}.sh-b{bottom:0}

/* ============ HUD (persistent) ============ */
.hud{position:fixed;z-index:40;font:400 11px/1.5 var(--m);
  color:var(--dim);letter-spacing:.08em;text-transform:uppercase}
.hud-tl{top:clamp(18px,3vw,32px);left:clamp(18px,4vw,48px)}
.hud-tl .nm{color:var(--ink)}
.hud-tr{top:clamp(18px,3vw,32px);right:clamp(18px,4vw,48px);display:flex;gap:6px;align-items:center;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 6px 12px;
  border-radius: 20px;}
.lang-b{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--dim);padding:4px 2px}
.lang-b.on{color:var(--accent)}
.lang-b:hover{color:var(--ink)}
.hud-bl{bottom:clamp(18px,3vw,32px);left:clamp(18px,4vw,48px)}
.hud-bl .ix{color:var(--ink)}
.hud-br{bottom:clamp(18px,3vw,32px);right:clamp(18px,4vw,48px);text-align:right}
.hud-br .ck{color:var(--ink)}

/* dot nav */
.dots{position:fixed;right:clamp(14px,2.5vw,30px);top:50%;transform:translateY(-50%);
  z-index:40;display:flex;flex-direction:column;gap:14px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 14px 8px;
  border-radius: 20px;}
.dot{width:22px;height:22px;display:flex;align-items:center;justify-content:center;padding:0}
.dot::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--dim);
  transition:background .3s,transform .3s}
.dot.on::after{background:var(--accent);transform:scale(1.5)}
.dot:hover::after{background:var(--ink)}
@media(max-width:720px){.dots{display:none}.hud-br{display:none}}

/* scroll hint */
.hint{position:fixed;left:50%;bottom:clamp(18px,3vw,30px);transform:translateX(-50%);
  z-index:40;display:flex;flex-direction:column;align-items:center;gap:8px;
  font:400 10px var(--m);color:var(--dim);letter-spacing:.3em;
  transition:opacity .4s}
.hint .hl{width:1px;height:34px;background:var(--line);position:relative;overflow:hidden}
.hint .hl::after{content:'';position:absolute;left:0;top:-50%;width:100%;height:50%;
  background:var(--accent);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{to{top:120%}}
.hint.off{opacity:0;pointer-events:none}

/* ============ SLIDES ============ */
.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.slide.on{z-index:2; visibility: visible; opacity: 1; pointer-events: auto;}
.wrap{height:100dvh;display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(20px,7vw,120px)}

/* per-slide layout variants — break the centered "PPT template" rhythm */
.lay-top .wrap{justify-content:flex-start;padding-top:clamp(72px,13vh,140px)}
.lay-bottom .wrap{justify-content:flex-end;padding-bottom:clamp(72px,13vh,140px)}
.lay-cx .wrap{text-align:center}
.lay-right .wrap{align-items:flex-end;text-align:right}
.lay-right .con-links{align-items:flex-end}

/* line masks */
.ln{overflow:hidden;padding-top:0.2em;margin-top:-0.2em;padding-right:0.15em;margin-right:-0.15em}
.hero-name .ln,.hero-role .ln,.st .ln,.about-big .ln,.con-big .ln{display:block}
.ln-i{display:block;will-change:transform}
.ln-i.split-ch{transform:none}
.ch{display:inline-block;will-change:transform}
.fd{will-change:opacity,transform}

/* eyebrow */
.eb{font:400 12px var(--m);color:var(--dim);letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:clamp(18px,3vh,34px)}
.eb .lime{color:var(--accent)}

/* ---- S1 HERO ---- */
.hero-name{display:flow-root;font:400 clamp(3.6rem,15.5vw,13.5rem)/0.92 var(--d);
  letter-spacing:.015em;color:var(--ink);min-height:1.0em}
.hero-role{display:flow-root;font:400 13px var(--m);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);margin-top:clamp(16px,2.5vh,28px)}
.hero-tag{font:400 12px/1.9 var(--m);color:var(--dim);letter-spacing:.04em;
  margin-top:14px;max-width:560px}

/* ---- statements ---- */
.st{display:flow-root;font:400 clamp(2.7rem,9.5vw,7.8rem)/0.98 var(--d);letter-spacing:.01em;min-height:3.0em}
.st-sub{font:400 12px var(--m);color:var(--dim);letter-spacing:.1em;
  margin-top:clamp(20px,3.5vh,38px)}

/* ---- S3 ABOUT ---- */
.about{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,90px);align-items:center}
.about-big{display:flow-root;font:400 clamp(2.8rem,8vw,6.6rem)/0.96 var(--d);min-height:3.0em}
.about-body{font:400 clamp(.92rem,1.2vw,1.05rem)/1.85 var(--b);color:var(--ink);max-width:46ch; text-shadow: 0 1px 2px #000, 0 0 12px #000;}
.about-facts{font:400 11px var(--m);color:var(--ink);letter-spacing:.08em;
  text-transform:uppercase;margin-top:26px;
  background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 8px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 4px 12px rgba(0,0,0,0.5); width: fit-content;}
@media(max-width:840px){.about{grid-template-columns:1fr;gap:30px}}

/* ---- S4 SKILLS wall ---- */
.srows{border-top:1px solid var(--line)}
.srow{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:clamp(10px,1.7vh,20px) clamp(8px,1vw,18px);
  border-bottom:1px solid var(--line);transition:background .25s}
.srow .ln{transition:transform .3s}
.srow .sw{font:400 clamp(2rem,6.5vw,4.8rem)/1 var(--d);letter-spacing:.02em;
  transition:color .25s}
.srow .ss{font:400 11px var(--m);color:var(--ink);letter-spacing:.1em;
  text-transform:uppercase;text-align:right;transition:color .25s, background .25s;flex-shrink:0;
  background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 4px 12px rgba(0,0,0,0.5);}
@media (hover: hover) {
  .srow:hover,.srow:active{background:var(--accent)}
  .srow:hover .sw,.srow:active .sw{color:#0a0a0a}
  .srow:hover .ln,.srow:active .ln{transform:translateX(10px)}
  .srow:hover .ss,.srow:active .ss{color:#0a0a0a}
}
.srow.s-active{background:var(--accent)}
.srow.s-active .sw{color:#0a0a0a}
.srow.s-active .ln{transform:translateX(10px)}
.srow.s-active .ss{color:#0a0a0a}
@media(max-width:640px){.srow{flex-direction:column;align-items:flex-start;gap:2px}
  .srow .ss{text-align:left}}

/* ---- S5/S6 list rows ---- */
.lrows{border-top:1px solid var(--line)}
.lrow{display:grid;grid-template-columns:clamp(96px,12vw,150px) 1fr;
  gap:6px clamp(16px,3vw,42px);align-items:baseline;
  padding:clamp(14px,2.4vh,26px) clamp(8px,1vw,18px);border-bottom:1px solid var(--line)}
.lrow .yr{font:400 11px var(--m);color:var(--dim);letter-spacing:.08em}
.lrow .tt{font:400 clamp(1.7rem,5vw,3.6rem)/1 var(--d);letter-spacing:.02em}
.lrow .sub{grid-column:2;font:400 11px/1.8 var(--m);color:var(--ink);letter-spacing:.06em;
  background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 8px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 4px 12px rgba(0,0,0,0.5); width: fit-content;}
.bdg{display:inline-block;font:700 9px var(--m);letter-spacing:.18em;color:#0a0a0a;
  background:var(--accent);padding:3px 8px;margin-bottom:6px;vertical-align:middle}
@media(max-width:640px){.lrow{grid-template-columns:1fr}.lrow .sub{grid-column:1}}

/* ---- S8 CONTACT ---- */
.con{align-items:flex-start}
.con-big{display:flow-root;font:400 clamp(3.4rem,13vw,11rem)/0.95 var(--d);min-height:1.1em}
.con-links{margin-top:clamp(26px,5vh,52px);display:flex;flex-direction:column;gap:18px}
.con-l{font:400 clamp(1rem,2.4vw,1.6rem) var(--m);letter-spacing:.02em;
  display:inline-flex;align-items:baseline;gap:16px;width:fit-content;
  transition:color .25s}
.con-l:hover{color:var(--accent)}
.cp{font:400 10px var(--m);color:var(--ink);letter-spacing:.15em;text-transform:uppercase;
  padding:4px 0;transition:color .25s, opacity .25s;opacity:0.7;
  text-shadow: 0 1px 3px #000;}
.cp:hover{color:var(--accent);opacity:1}
.con-foot{font:400 10px var(--m);color:var(--ink);opacity:0.6;letter-spacing:.12em;
  text-transform:uppercase;margin-top:clamp(30px,6vh,64px);
  text-shadow: 0 1px 3px #000;}

/* ============ REDUCED MOTION / NOSCRIPT ============ */
@media(prefers-reduced-motion:reduce){
  .hint .hl::after{animation:none}
}

/* ============ MOBILE TYPOGRAPHY & SPACING ============ */
@media(max-width:640px){
  .wrap{padding:0 24px}
  .hero-name{font-size:clamp(3.2rem, 15vw, 4rem)}
  .st{font-size:clamp(2.4rem, 11vw, 3.5rem)}
  .about-big{font-size:clamp(2.6rem, 12vw, 4rem)}
  .con-big{font-size:clamp(2.8rem, 13vw, 4rem)}
  .lrow .tt{font-size:clamp(1.5rem, 7vw, 2.5rem)}
  .srow .sw{font-size:clamp(1.6rem, 7vw, 2.5rem)}
  /* neutralize editorial layout variants on narrow screens — keep content centered & clear of the HUD */
  .lay-top .wrap,.lay-bottom .wrap{justify-content:center;padding-top:0;padding-bottom:0}
  .lay-right .wrap{align-items:stretch;text-align:left}
  .lay-right .con-links{align-items:flex-start}
  .lrow{padding:clamp(9px,1.5vh,15px) 6px}
  .srow{padding:clamp(8px,1.4vh,14px) 6px}
}

/* landscape phones — very short viewport: shrink type, drop overlapping chrome */
@media (orientation:landscape) and (max-height:500px){
  .dots,.hud-br,.hint{display:none}
  .wrap{padding:0 clamp(20px,6vw,90px)}
  .lay-top .wrap,.lay-bottom .wrap{justify-content:center;padding-top:0;padding-bottom:0}
  .lay-cx .wrap{text-align:center}
  .lay-right .wrap{align-items:flex-end;text-align:right}
  .hero-name{font-size:clamp(2rem,9vh,3.4rem);min-height:0}
  .hero-role{margin-top:8px}.hero-tag{margin-top:8px}
  .st{font-size:clamp(1.5rem,8vh,2.6rem);min-height:0}
  .about-big{font-size:clamp(1.6rem,8vh,2.6rem);min-height:0}
  .con-big{font-size:clamp(2rem,10vh,3.2rem);min-height:0}
  .about{gap:24px}
  .lrow .tt,.srow .sw{font-size:clamp(1.1rem,5.5vh,1.8rem)}
  .lrow{padding:clamp(4px,1.3vh,10px) 8px}
  .srow{padding:clamp(3px,1vh,8px) 8px}
  .eb{margin-bottom:6px}
  .st-sub,.con-foot,.about-facts{margin-top:10px}
}