/* ═══════════════════════════════════════════════════════════
   ANGU RAJ — PORTFOLIO ©2026 · "LIVING INK"
   Light lavender · black Anton display · violet accent
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:#EFEDF6;
  --bg-soft:#E6E3F0;
  --ink:#0B0A10;
  --ink-60:rgba(11,10,16,.6);
  --ink-30:rgba(11,10,16,.3);
  --ink-12:rgba(11,10,16,.12);
  --accent:#6C4CF1;
  --accent-ink:#5637D6;
  --dark:#0A0812;
  --dark-2:#12101C;
  --paper:rgba(255,255,255,.55);
  --anton:'Anton',Impact,sans-serif;
  --grotesk:'Space Grotesk',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.65,.05,.36,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}

html{background:var(--bg)}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--grotesk);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden;height:100vh}
/* decorative glows on a FIXED viewport layer — no body-edge seam,
   no dual-tone band, on any screen or scroll state */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120vmax 80vmax at 70% -10%, #F5F3FB 0%, transparent 60%),
    radial-gradient(90vmax 70vmax at 10% 110%, #E4E0F2 0%, transparent 55%),
    var(--bg);
}

::selection{background:var(--accent);color:#fff}
.anton{font-family:var(--anton);font-weight:400;letter-spacing:.01em}
.mono{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.accent{color:var(--accent)}
a{color:inherit;text-decoration:none}
img,canvas{display:block}
ul,ol{list-style:none}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
[hidden]{display:none!important}

/* no text selection / iOS long-press callout on interactive layers */
.intro,.intro *,.intro-name,.hold-badge,#stage,
.hud,.hud *,.customize,.customize *,.sound-toggle,.sound-toggle *,
.hero-name,.word,.word-drum,.stat-ghost,.ribbon,.menu-overlay,.menu-overlay *{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
body.locked{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* ── grain ─────────────────────────────────────────────── */
.grain{
  position:fixed;inset:-50%;z-index:200;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}
  30%{transform:translate(3%,-6%)}50%{transform:translate(-7%,4%)}
  70%{transform:translate(6%,8%)}90%{transform:translate(-4%,3%)}
}

/* ── cursor ────────────────────────────────────────────── */
.cursor{position:fixed;inset:0;z-index:400;pointer-events:none}
.cursor-dot,.cursor-ring{position:absolute;top:0;left:0;border-radius:50%;will-change:transform}
.cursor-dot{width:6px;height:6px;background:var(--ink);margin:-3px 0 0 -3px}
.cursor-ring{
  width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1px solid var(--ink-30);
  transition:transform .25s var(--ease-out),border-color .25s;
}
.cursor.is-hover .cursor-ring{transform:scale(1.7);border-color:var(--accent)}
.cursor.is-down .cursor-ring{transform:scale(.8)}
@media (hover:none){.cursor{display:none}}

/* ── webgl stage ───────────────────────────────────────── */
#stage{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:5;pointer-events:none;
}

/* ── preloader ─────────────────────────────────────────── */
.preloader{
  position:fixed;inset:0;z-index:320;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  transition:opacity .6s var(--ease),visibility .6s;
}
.preloader.done{opacity:0;visibility:hidden}
#preCount{font-size:1.6rem;font-weight:700}
.pre-label{color:var(--ink-60);animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}

/* ── intro ─────────────────────────────────────────────── */
/* .intro (fixed) sits ABOVE the canvas; the giant intro name
   is a separate fixed layer BELOW the canvas (z2 < canvas z5) */
.intro{position:fixed;inset:0;z-index:6;pointer-events:none}
.intro.gone{display:none}
.intro-name{
  position:fixed;top:50%;left:50%;z-index:2;
  transform:translate(-50%,-52%) scaleX(1.16);/* wide, edge-to-edge like the reference */
  font-size:clamp(4.5rem,22.5vw,25rem);white-space:nowrap;line-height:1;
  letter-spacing:-.005em;color:var(--ink);transition:opacity .5s var(--ease);
}
.intro-name.fade{opacity:0}
.intro-gate{
  position:absolute;inset:0;z-index:300;pointer-events:auto;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2.2rem;text-align:center;
  background:linear-gradient(180deg,#C9D4F2 0%,var(--bg) 55%);
  transition:opacity .7s var(--ease),visibility .7s;
}
.intro-gate.gone{opacity:0;visibility:hidden;pointer-events:none}
.intro-kicker{color:var(--ink-60)}
.intro-enter{
  display:flex;align-items:center;gap:1rem;
  font-family:var(--grotesk);font-weight:700;font-size:clamp(1.4rem,3.4vw,2.4rem);
  letter-spacing:.06em;padding:1.1rem 2.4rem;border-radius:999px;
  border:1.5px solid var(--ink);color:var(--ink);
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.intro-enter:hover{background:var(--ink);color:var(--bg);transform:scale(1.04)}
.intro-enter:hover .intro-arrow{transform:translateX(6px)}
.intro-arrow{transition:transform .35s var(--ease)}
.intro-note{color:var(--ink-60);line-height:1.9}

.intro-globe{position:absolute;inset:0;pointer-events:none}
.intro-bar{
  position:absolute;left:2rem;right:2rem;bottom:1.6rem;z-index:120;
  display:flex;justify-content:center;text-align:center;color:var(--ink-60);
}
.intro-hold-label{
  position:absolute;right:0;bottom:0;
  display:flex;align-items:center;gap:.6rem;color:var(--ink);
}
/* cursor-following badge, like the reference */
.hold-badge{
  position:fixed;top:50%;left:50%;z-index:121;pointer-events:none;
  width:92px;height:92px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(120% 120% at 30% 25%,#F4F4F8 0%,#DDDEE6 55%,#C2C3CE 100%);
  box-shadow:0 4px 18px rgba(11,10,16,.14), inset 0 1px 0 rgba(255,255,255,.8);
  color:var(--ink);font-size:.5rem;line-height:1.65;letter-spacing:.13em;
  will-change:transform;
}
@media (hover:none){.hold-badge{display:none}}
.hold-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1s steps(2) infinite}
.hold-ring{
  position:absolute;top:50%;left:50%;width:120px;height:120px;z-index:121;
  transform:translate(-50%,-50%) rotate(-90deg);opacity:0;transition:opacity .3s;
}
.hold-ring.on{opacity:1}
.hold-ring-bg,.hold-ring-fill{fill:none;stroke-width:1.5}
.hold-ring-bg{stroke:var(--ink-12)}
.hold-ring-fill{stroke:var(--accent);stroke-dasharray:264;stroke-dashoffset:264}
.intro-skip{
  position:absolute;top:1.4rem;right:2rem;pointer-events:auto;z-index:122;
  color:var(--ink-60);padding:.5rem .9rem;border:1px solid var(--ink-12);border-radius:999px;
  transition:color .3s,border-color .3s;
}
.intro-skip:hover{color:var(--ink);border-color:var(--ink)}

/* ── hud ───────────────────────────────────────────────── */
.hud{position:fixed;z-index:120;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.hud.hidden{opacity:0;pointer-events:none;transform:translateY(-8px)}
.hud-top{
  top:0;left:0;right:0;display:flex;align-items:center;gap:2rem;
  padding:1.1rem 2rem;
}
.hud-logo{font-weight:700;font-size:.78rem}
.hud-links{display:flex;gap:1.4rem;margin-left:auto}
.hud-links a,.hud-cta{opacity:.75;transition:opacity .25s,color .25s}
.hud-links a:hover,.hud-cta:hover{opacity:1;color:var(--accent-ink)}
.hud-cta{font-weight:700;border:1px solid var(--ink-30);padding:.5rem 1rem;border-radius:999px}
.hud-burger{display:none}

.hud-dock{
  left:50%;bottom:1.1rem;transform:translateX(-50%);
  display:flex;align-items:center;gap:1.6rem;
  background:rgba(11,10,16,.86);color:#EDEAF6;
  padding:.65rem 1.2rem;border-radius:999px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 12px 40px rgba(11,10,16,.25);
}
.hud-dock.hidden{transform:translateX(-50%) translateY(16px)}
.dock-links{display:flex;align-items:center;gap:.9rem}
.dock-links a{opacity:.7;transition:opacity .25s,color .25s}
.dock-links a:hover,.dock-links a.active{opacity:1;color:#B9A6FF}
.dock-star{color:#B9A6FF;font-size:.55rem;opacity:.6}
.dock-meta{opacity:.55;font-size:.6rem}

/* sound toggle */
.sound-toggle{
  position:fixed;left:1.4rem;bottom:1.2rem;z-index:120;
  display:flex;align-items:center;gap:.65rem;
  background:rgba(11,10,16,.86);color:#EDEAF6;
  padding:.55rem 1rem;border-radius:999px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-size:.58rem;letter-spacing:.14em;
}
.sound-toggle .wave{display:flex;align-items:center;gap:2.5px;height:12px}
.sound-toggle .wave i{
  width:1.7px;height:100%;background:#EDEAF6;border-radius:2px;
  animation:wave 1.1s ease-in-out infinite;transform-origin:center;
}
.sound-toggle .wave i:nth-child(2){animation-delay:.14s}
.sound-toggle .wave i:nth-child(3){animation-delay:.28s}
.sound-toggle .wave i:nth-child(4){animation-delay:.42s}
.sound-toggle .wave i:nth-child(5){animation-delay:.56s}
@keyframes wave{0%,100%{transform:scaleY(.22)}50%{transform:scaleY(1)}}
.sound-toggle.off .wave i{animation:none;transform:scaleY(.18);opacity:.5}
/* keep the scroll hint clear of the toggle (specific: beats base rule) */
.hero .hero-scroll{bottom:4.6rem}

/* customize chip */
.customize{
  position:fixed;right:1.4rem;bottom:1.2rem;z-index:120;
  display:flex;align-items:center;gap:.55rem;
  background:rgba(11,10,16,.86);color:#EDEAF6;
  padding:.55rem .9rem;border-radius:999px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:opacity .6s var(--ease);
}
.customize.hidden{opacity:0;pointer-events:none}
.customize-label{opacity:.6;font-size:.58rem}
.customize button{
  width:16px;height:16px;border-radius:50%;background:var(--c);
  border:2px solid transparent;transition:transform .25s var(--ease-out),border-color .25s;
}
.customize button:hover{transform:scale(1.25)}
.customize button.active{border-color:#fff;transform:scale(1.15)}

/* mobile menu */
.menu-overlay{
  position:fixed;inset:0;z-index:250;background:var(--dark);color:#EDEAF6;
  display:flex;flex-direction:column;justify-content:center;gap:2rem;padding:2rem;
}
/* the hamburger itself morphs into ✕ and stays on top of the overlay */
body.menu-open .hud-top{z-index:260}
body.menu-open .hud-logo{color:#EDEAF6;transition:color .3s var(--ease)}
body.menu-open .hud-burger{border-color:rgba(237,234,246,.4)}
body.menu-open .hud-burger span{background:#EDEAF6}
.menu-overlay .f-resume{align-self:flex-start;margin-top:0}
.menu-links{display:flex;flex-direction:column;gap:.4rem}
.menu-links a{font-size:clamp(2.6rem,10vw,4.5rem);line-height:1.1;opacity:.9}
.menu-links a:active{color:#B9A6FF}
.menu-mail{color:#B9A6FF}

/* ── sections base ─────────────────────────────────────── */
.section{position:relative;z-index:10;padding:16vh 6vw}
.section-label{color:var(--ink-60);margin-bottom:3rem}
.section-label .accent{color:var(--accent-ink)}

/* reveal / split animations */
.reveal{opacity:0;transform:translateY(34px)}
.no-js .reveal,.no-motion .reveal{opacity:1;transform:none}
.split .split-line{display:block;overflow:hidden}
.split .split-inner{display:block;transform:translateY(110%)}
.no-js .split-inner,.no-motion .split-inner{transform:none}

/* ── hero ──────────────────────────────────────────────── */
/* no z-index on .hero — its children layer around the canvas:
   giant name (z1) behind jellyfish (z5), role/captions (z12) above */
.hero{
  position:relative;height:100vh;height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
/* hide page content while intro overlay is running */
body.locked .hero-inner,body.locked .hero-caption,body.locked .hero-scroll,body.locked .dive-cue{opacity:0}
body.locked main{visibility:hidden}
.hero-name{
  font-size:clamp(4.2rem,19.5vw,19rem);line-height:.98;white-space:nowrap;
  position:relative;z-index:11;/* above canvas (z5) — name in front, jellyfish behind */
}
.hero-line{display:inline-block}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero-glass{width:min(88vw,1440px);height:auto;display:block;user-select:none;-webkit-user-drag:none}
/* ── liquid glass name (Apple 9:42-style dark glass) — applied after the
     globe shatters; the intro/globe name stays solid black ── */
/* smoky glass body + white beveled edges, matched to the user's render */
.hero-name.liquid .hero-line{
  color:transparent;
  -webkit-background-clip:text;background-clip:text;
  background-image:
    linear-gradient(118deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.6) 40%, rgba(255,255,255,0) 50%),
    linear-gradient(115deg, rgba(139,111,245,.26) 0%, rgba(232,91,199,.15) 26%, rgba(0,0,0,0) 46%),
    linear-gradient(180deg, #83848F 0%, #45464F 22%, #23242B 48%, #5C5D68 72%, #33343D 100%);
  background-size:260% 100%, 230% 170%, 100% 100%;
  background-position:-90% 0, 0 0, 0 0;
  -webkit-text-stroke:1.2px rgba(255,255,255,.45);  /* bright glass rim */
  text-shadow:0 1px 0 rgba(255,255,255,.3);
  animation:liquidFlow 9s ease-in-out infinite;
  filter:url(#liquidGlass);
}
@keyframes liquidFlow{
  0%  {background-position:-90% 0,  0 0,     0 0}
  45% {background-position:190% 0,  60% 40%, 0 0}
  100%{background-position:-90% 0,  0 0,     0 0}
}
.no-motion .hero-name.liquid .hero-line{animation:none;filter:none}
.hero-role{margin-top:1.4rem;color:var(--ink-60);position:relative;z-index:12}
.hero-caption{
  position:absolute;bottom:5.6rem;left:50%;transform:translateX(-50%);
  text-align:center;color:var(--ink-60);line-height:1.9;z-index:12;
}
.hero-scroll{
  position:absolute;bottom:1.6rem;left:2rem;display:flex;align-items:center;gap:.7rem;
  color:var(--ink-60);z-index:12;
}
.scroll-tick{width:34px;height:1px;background:var(--ink-30);position:relative;overflow:hidden}
.scroll-tick::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  transform:translateX(-100%);animation:tick 1.8s var(--ease) infinite;
}
@keyframes tick{60%,100%{transform:translateX(100%)}}

/* mobile-only scroll cue (shown in the ≤760px block) */
.dive-cue{display:none}
@keyframes cueDrop{to{top:100%}}

/* ── words (pinned 3D carousel drum) ───────────────────── */
.words{position:relative;z-index:1;height:100vh;overflow:hidden}
.words-track{position:absolute;inset:0;perspective:1100px;perspective-origin:50% 50%}
.word-drum{
  position:absolute;top:50%;left:50%;width:0;height:0;
  transform-style:preserve-3d;will-change:transform;
}
.word{
  position:absolute;top:0;left:0;
  font-size:clamp(4rem,15vw,14rem);line-height:1;white-space:nowrap;
  transform:translate(-50%,-50%);
  opacity:0;backface-visibility:hidden;
}
.no-js .word-drum,.no-motion .word-drum{position:static;width:auto;height:auto;transform:none!important}
.words-caption{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  text-align:center;color:var(--ink-60);line-height:1.9;z-index:12;
}

/* ── about ─────────────────────────────────────────────── */
.about-heading{font-size:clamp(2.4rem,7vw,6.4rem);line-height:1.04;max-width:14em}
.about-grid{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:4rem;margin-top:4rem;align-items:start;
}
.about-bio{font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.75;color:var(--ink);max-width:34em}
.about-facts{display:flex;flex-direction:column}
.about-facts li{
  display:flex;justify-content:space-between;gap:1.5rem;
  padding:1.1rem 0;border-bottom:1px solid var(--ink-12);
}
.about-facts li span{color:var(--ink-60)}

/* ── why a jellyfish ───────────────────────────────────── */
.why-heading{font-size:clamp(2.2rem,6vw,5.4rem);line-height:1.05;max-width:14em}
.why-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:2.5rem 4rem;
  margin-top:3.5rem;
}
.why-item{border-top:1px solid var(--ink-12);padding-top:1.4rem}
.why-tag{color:var(--accent-ink);margin-bottom:.9rem}
.why-item p:last-child{line-height:1.75;max-width:34em}
.why-item strong{color:var(--accent-ink)}
.why-customize{
  font:inherit;font-weight:700;color:var(--accent-ink);
  background:none;border:0;padding:0;cursor:pointer;
  border-bottom:2px dotted var(--accent-ink);
  transition:opacity .25s;
}
.why-customize:active{opacity:.55}
.why-note{margin-top:3.5rem;color:var(--ink-60);letter-spacing:.18em}
@media (max-width:760px){
  .why-grid{grid-template-columns:1fr;gap:2rem}
}
/* customize chip pulses when the color-theory point scrolls in */
.customize.attn{animation:chipPulse 1.1s var(--ease) 3}
@keyframes chipPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(108,76,241,0)}
  50%{box-shadow:0 0 0 8px rgba(108,76,241,.28)}
}

/* ── stats ─────────────────────────────────────────────── */
.stats-list{display:flex;flex-direction:column}
.stat{
  position:relative;display:flex;align-items:baseline;gap:2.5rem;
  padding:2.2rem 0;border-bottom:1px solid var(--ink-12);
}
.stat-num{font-size:clamp(3.4rem,9vw,8.5rem);line-height:1;min-width:2.6em;color:var(--ink)}
.stat-ghost{
  position:absolute;left:0;top:50%;transform:translate(-2%,-50%) scale(1.45);
  font-size:clamp(3.4rem,9vw,8.5rem);line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--ink-12);pointer-events:none;
}
.stat p{color:var(--ink-60)}

/* ── work ──────────────────────────────────────────────── */
/* z-index above light sections (10) so nothing bleeds over the dark tunnel */
.work{position:relative;z-index:11;background:var(--dark);color:#EDEAF6}
.ribbons{position:relative;height:11rem;overflow:hidden;z-index:12}
.ribbon{
  position:absolute;left:-5%;right:-5%;padding:.8rem 0;
  background:#EDEAF6;color:var(--dark);white-space:nowrap;overflow:hidden;
  font-weight:700;
}
.ribbon span{display:inline-block;padding-left:0}
.ribbon-a{top:2.4rem;transform:rotate(-2.4deg)}
.ribbon-b{top:5.6rem;transform:rotate(1.8deg);background:var(--accent);color:#fff}
.work-viewport{
  position:relative;height:100vh;height:100svh;overflow:hidden;
  perspective:1100px;
}
.work-label{position:absolute;top:2rem;left:6vw;color:rgba(237,234,246,.6);z-index:30}
.work-label .accent{color:#B9A6FF}
.work-space{position:absolute;inset:0;transform-style:preserve-3d}
.card{
  position:absolute;top:50%;left:50%;
  width:min(58vw,700px);aspect-ratio:16/10;
  transform-style:preserve-3d;border-radius:14px;
  background:var(--dark-2);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  will-change:transform,opacity;overflow:hidden;
  border:1px solid rgba(237,234,246,.1);
}
.card-media{position:absolute;inset:0;overflow:hidden;border-radius:13px}
.card-poster{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(80% 120% at 20% 0%,rgba(108,76,241,.5),transparent 60%),
    radial-gradient(90% 110% at 90% 100%,rgba(232,91,199,.35),transparent 55%),
    var(--dark-2);
}
.card-poster .anton{font-size:clamp(1.6rem,3.4vw,3rem);opacity:.9;text-align:center;padding:0 1em}
.card-media iframe{
  position:absolute;top:50%;left:50%;width:178%;height:178%;
  transform:translate(-50%,-50%);border:0;pointer-events:none;
  opacity:0;transition:opacity .6s var(--ease);
}
.card-media iframe.on{opacity:1}
.card-foot{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:1rem;
  padding:.85rem 1.1rem;
  background:rgba(10,8,18,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(237,234,246,.12);
}
.card-foot .idx{color:#B9A6FF}
.card-foot .ttl{font-weight:700;font-size:.62rem}
.card-foot .tags{margin-left:auto;opacity:.55;font-size:.56rem}
.card-foot .arrow{
  width:30px;height:30px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:#EDEAF6;color:var(--dark);
  font-size:.8rem;transition:transform .3s var(--ease-out);
}
.card:hover .arrow{transform:rotate(-45deg)}
.work-pill{
  position:absolute;left:50%;bottom:7rem;transform:translateX(-50%);z-index:30;
  display:flex;align-items:center;gap:.9rem;
  background:#EDEAF6;color:var(--dark);
  padding:.7rem 1.3rem;border-radius:999px;font-weight:700;
  box-shadow:0 10px 34px rgba(0,0,0,.4);white-space:nowrap;
}
.pill-idx{color:var(--accent-ink)}
.work-hint{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  color:rgba(237,234,246,.45);z-index:30;text-align:center;
}

/* ── skills ────────────────────────────────────────────── */
.skills{padding-bottom:10vh}
.skills-list{border-top:1px solid var(--ink-12)}
.skill-row{
  position:relative;display:flex;align-items:center;gap:2.5rem;
  padding:1.6rem 1rem;border-bottom:1px solid var(--ink-12);
  overflow:hidden;transition:padding .35s var(--ease);
}
.skill-row::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:scaleY(0);transform-origin:bottom;transition:transform .4s var(--ease);
}
.skill-row:hover::before{transform:scaleY(1)}
.skill-row:hover{padding-left:2rem}
.skill-row>*{position:relative;z-index:1;transition:color .35s var(--ease)}
.skill-row:hover .skill-name{color:var(--bg)}
.skill-row:hover .skill-idx{color:#B9A6FF}
.skill-idx{color:var(--ink-60)}
.skill-name{font-size:clamp(1.6rem,4.6vw,4rem);line-height:1.05}
.tools-marquee{
  margin-top:5rem;border-top:1px solid var(--ink-12);border-bottom:1px solid var(--ink-12);
  overflow:hidden;padding:1rem 0;
}
.tools-track{display:flex;white-space:nowrap;width:max-content;animation:marquee 22s linear infinite}
.tools-track span{font-size:.8rem;color:var(--ink-60);padding-right:2rem}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ── experience ────────────────────────────────────────── */
.xp-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--ink-12)}
.xp{padding:3rem 0;border-bottom:1px solid var(--ink-12)}
.xp-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem}
.xp-head h3{font-size:clamp(1.8rem,4.6vw,3.6rem);line-height:1.05}
.xp-head p{color:var(--ink-60)}
.xp-role{margin:.8rem 0 1.2rem;color:var(--accent-ink)}
.xp-note{
  max-width:52em;margin:-.4rem 0 1.4rem;padding:.7rem 1rem;
  font-size:.72rem;letter-spacing:.06em;line-height:1.7;color:var(--ink-60);
  border-left:2px solid var(--accent-ink);background:rgba(108,76,241,.05);
}
.xp-desc{max-width:52em;color:var(--ink);line-height:1.75}
.xp-bullets{max-width:56em;display:flex;flex-direction:column;gap:.65rem;margin-bottom:.4rem}
.xp-bullets li{
  position:relative;padding-left:1.6rem;line-height:1.65;color:var(--ink);
}
.xp-bullets li::before{
  content:"✦";position:absolute;left:0;top:.15em;
  font-size:.6em;color:var(--accent-ink);
}
.xp-hidden{display:none}
.xp.open .xp-hidden{display:block}
.xp-hidden .xp-role{margin-top:1.4rem}
.xp-more{
  margin-top:1.2rem;padding:.55rem 1.1rem;border:1px solid var(--ink-30);
  border-radius:999px;color:var(--ink);letter-spacing:.14em;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s;
}
.xp-more:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.edu-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:4rem}
#experience{padding-bottom:6vh}
#ai{padding-top:6vh}
.edu{border:1px solid var(--ink-12);border-radius:14px;padding:1.8rem;background:var(--paper)}
.edu-label{color:var(--accent-ink);margin-bottom:.8rem}
.edu h4{font-size:1.25rem;margin-bottom:.5rem}
.edu p{color:var(--ink-60)}

/* ── footer ────────────────────────────────────────────── */
/* no z-index — the fixed canvas (z5) paints above, so the
   jellyfish floats over the big name like the reference */
.footer{position:relative;background:var(--dark);color:#EDEAF6;overflow:hidden}
.footer-grid{
  display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:2rem;
  padding:5rem 6vw 4rem;border-bottom:1px solid rgba(237,234,246,.12);
}
.f-col:nth-child(2){border-left:1px solid rgba(237,234,246,.12);border-right:1px solid rgba(237,234,246,.12);padding:0 2.5rem}
.f-tag{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:700;line-height:1.25;margin-top:1.4rem}
.f-links{display:flex;flex-direction:column;gap:1rem}
.f-links a{opacity:.65;transition:opacity .25s,color .25s,transform .25s}
.f-links a:hover{opacity:1;color:#B9A6FF;transform:translateX(6px)}
.f-say{color:#B9A6FF;margin-bottom:1rem}
.f-mail{
  font-size:clamp(1.05rem,1.8vw,1.5rem);font-weight:700;
  border-bottom:1px solid rgba(237,234,246,.3);padding-bottom:.3rem;
  transition:color .3s,border-color .3s;
}
.f-mail:hover{color:#B9A6FF;border-color:#B9A6FF}
.f-socials{display:flex;gap:1.2rem;margin-top:1.6rem}
.f-socials a{opacity:.65;transition:opacity .25s,color .25s}
.f-socials a:hover{opacity:1;color:#B9A6FF}
/* animated gradient stroke — draws the eye to the resume */
@property --spin{syntax:'<angle>';initial-value:0deg;inherits:false}
.f-resume{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.8rem;
  padding:.7rem 1.3rem;border:1.6px solid transparent;border-radius:999px;
  font-weight:700;
  background:
    linear-gradient(var(--dark-2),var(--dark-2)) padding-box,
    conic-gradient(from var(--spin),#6C4CF1,#E85BC7,#3EC5E0,#39C98E,#6C4CF1) border-box;
  animation:resumeSpin 3.2s linear infinite, resumeGlow 2.6s ease-in-out infinite;
  transition:color .3s var(--ease);
}
@keyframes resumeSpin{to{--spin:360deg}}
@keyframes resumeGlow{
  0%,100%{box-shadow:0 0 14px rgba(108,76,241,.25)}
  50%{box-shadow:0 0 26px rgba(232,91,199,.45)}
}
.f-resume:hover{
  background:
    linear-gradient(#EDEAF6,#EDEAF6) padding-box,
    conic-gradient(from var(--spin),#6C4CF1,#E85BC7,#3EC5E0,#39C98E,#6C4CF1) border-box;
  color:var(--dark);
}
.no-motion .f-resume{animation:none}
.footer-big{position:relative;padding:4rem 6vw 8rem;text-align:center}
.f-portfolio{color:rgba(237,234,246,.5);margin-bottom:1.2rem}
.f-name{
  font-size:clamp(2.6rem,9.4vw,9.4rem);line-height:.95;white-space:nowrap;
  background:linear-gradient(180deg,#EDEAF6 30%,#8B6FF5 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ── webgl-off fallback ───────────────────────────────── */
.no-webgl #stage{display:none}
.no-webgl .intro-gate{background:linear-gradient(180deg,#C9D4F2,var(--bg))}
.no-webgl body{background-image:radial-gradient(60vmax 50vmax at 50% 20%,rgba(108,76,241,.16),transparent 60%)}

/* ── responsive ────────────────────────────────────────── */
@media (max-width:1024px){
  .about-grid{grid-template-columns:1fr;gap:2.5rem}
  .footer-grid{grid-template-columns:1fr;gap:2.5rem}
  .f-col:nth-child(2){border:0;padding:0;border-top:1px solid rgba(237,234,246,.12);border-bottom:1px solid rgba(237,234,246,.12);padding:2rem 0}
  .card{width:min(74vw,640px)}
}
@media (max-width:760px){
  .hud-links,.hud-cta{display:none}
  .hud-burger{
    display:flex;flex-direction:column;gap:5px;margin-left:auto;
    padding:.7rem;border:1px solid var(--ink-30);border-radius:999px;
  }
  .hud-burger{transition:border-color .3s var(--ease)}
  .hud-burger span{width:18px;height:1.6px;background:var(--ink);transition:transform .3s var(--ease),background .3s var(--ease)}
  .hud-burger.open span:nth-child(1){transform:translateY(3.3px) rotate(45deg)}
  .hud-burger.open span:nth-child(2){transform:translateY(-3.3px) rotate(-45deg)}
  .hud-dock{gap:.7rem;padding:.6rem .9rem;max-width:calc(100vw - 1.6rem);font-size:.56rem}
  .dock-links{gap:.65rem}
  .dock-links a{white-space:nowrap}
  .dock-meta{display:none}
  .dock-star{display:none}
  /* breathing room: chips sit clearly above the single-line dock */
  .customize{right:.9rem;bottom:5rem}
  .customize-label{display:none}
  .sound-toggle{left:.9rem;bottom:5rem}
  /* intro bottom bar: stack, higher up, no overlap with the toggle */
  .intro-bar{flex-direction:column;align-items:center;gap:.55rem;bottom:7.6rem;left:1rem;right:1rem}
  .intro-bar p{line-height:1.7}
  .intro-hold-label{position:static}
  /* hero: centered, contained */
  .hero-caption{display:none}
  .hero .hero-scroll{display:none}
  .dive-cue{
    display:flex;flex-direction:column;align-items:center;gap:.55rem;
    position:absolute;left:50%;bottom:9.6rem;transform:translateX(-50%);
    font-size:.56rem;letter-spacing:.34em;color:var(--ink-60);
    z-index:12;pointer-events:none;transition:opacity .6s var(--ease);
  }
  .dive-cue i{width:1px;height:26px;background:var(--ink-30);position:relative;overflow:hidden}
  .dive-cue i::after{
    content:"";position:absolute;left:0;top:-100%;width:1px;height:100%;
    background:var(--accent-ink);animation:cueDrop 1.7s var(--ease) infinite;
  }
  .dive-cue.gone{opacity:0}
  .hero-inner{width:100%;display:flex;flex-direction:column;align-items:center}
  .hero-glass{width:92vw}
  .hero-role{max-width:88vw;text-align:center;line-height:1.8}
  .hero-name{white-space:normal;text-align:center;line-height:.95}
  /* mobile drum carousel: smaller words, still one line each */
  .word{font-size:clamp(2.2rem,9.5vw,4.2rem);will-change:transform,opacity;backface-visibility:hidden}
  .hero-glass{will-change:transform}
  .words-caption{width:88vw}
  /* static words layout only for reduced-motion users */
  .no-motion .words{height:auto;overflow:visible;padding:6vh 6vw 4vh}
  .no-motion .words-caption{position:static;left:auto;bottom:auto;transform:none;margin-top:2.6rem;padding-bottom:.5rem}
  .no-motion .word{white-space:normal;text-align:center;max-width:92vw}
  /* tighter vertical rhythm — kills the massive gaps between sections */
  .section{padding:8vh 7vw}
  .section-label{margin-bottom:1.8rem}
  .tools-marquee{margin-top:2.2rem}
  .words{height:88svh}
  .about-grid{margin-top:2.2rem}
  .xp{padding:2rem 0}
  .edu-grid{margin-top:2.2rem}
  .edu-grid{grid-template-columns:1fr}
  .stat{gap:1.2rem;flex-wrap:wrap}
  .stat-num{min-width:auto}
  .stat p{width:100%}
  /* work → sticky card-stack: cards pile over each other with a
     3D tilt entrance while the previous one scales away behind */
  .work-viewport{height:auto;overflow:visible;perspective:none;padding:5rem 6vw 6rem}
  .work-label{position:static;margin-bottom:2.4rem;display:block}
  .work-space{position:static;display:block;transform-style:flat}
  .card{
    display:block;position:sticky;top:13vh;left:auto;width:100%;
    margin-bottom:5.5rem;will-change:transform;
  }
  .card:last-child{margin-bottom:2rem}
  .no-motion .card{position:relative;top:auto;margin-bottom:2rem}
  .work-pill,.work-hint{display:none}
  .intro-bar{flex-direction:column;gap:.6rem;text-align:center;align-items:center}
}

/* ── no-js / no-motion word fallback ───────────────────── */
.no-js .words,.no-motion .words{height:auto;padding:14vh 6vw}
.no-js .words-track,.no-motion .words-track{position:relative;display:flex;flex-direction:column;align-items:center;gap:1rem}
.no-js .word,.no-motion .word{position:relative;top:auto;left:auto;transform:none;opacity:1;white-space:normal;text-align:center}
.no-js .words-caption,.no-motion .words-caption{position:relative;bottom:auto;left:auto;transform:none;margin-top:3rem}
.no-js .hero-inner,.no-js .hero-caption,.no-js .hero-scroll{opacity:1!important}
.no-js .intro,.no-js .preloader{display:none}
.no-js .hud.hidden,.no-js .customize.hidden{opacity:1;pointer-events:auto;transform:none}

/* very narrow phones: keep the whole dock on screen */
@media (max-width:420px){
  .hud-dock{font-size:.52rem;gap:.55rem;padding:.55rem .8rem}
  .dock-links{gap:.5rem}
}

/* ── reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .split .split-inner{transform:none}
}