/* ===================== TOKENS ===================== */
:root {
  --bg: #05071a;
  --surface: rgba(10,14,40,0.92);
  --glass: rgba(15,20,55,0.75);
  --text: #eef2ff;
  --muted: #8892b0;
  --accent: #00d4ff;
  --accent2: #7b5ea7;
  --accent3: #ff6b9d;
  --green: #00ff88;
  --border: rgba(0,212,255,0.15);
  --radius: 20px;
  --nav-h: 64px;
  --ground-h: 28%;
}

/* ===================== LOADER ===================== */
.loader{position:fixed;inset:0;z-index:9000;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .6s ease,visibility .6s ease}
.loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader-inner{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.loader-logo{font-family:'JetBrains Mono',monospace;font-size:3rem;font-weight:700;color:var(--accent);letter-spacing:.2em;animation:logoPulse 1s ease-in-out infinite alternate}
@keyframes logoPulse{from{text-shadow:0 0 20px var(--accent)}to{text-shadow:0 0 60px var(--accent),0 0 100px rgba(0,212,255,.3)}}
.loader-bar{width:200px;height:3px;background:rgba(0,212,255,.15);border-radius:2px;overflow:hidden}
.loader-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent3));border-radius:2px;transition:width .05s linear}
.loader-text{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--muted);letter-spacing:.15em}

/* ===================== GRAIN ===================== */
.grain{position:fixed;inset:0;z-index:8998;pointer-events:none;opacity:.028;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px}

/* ===================== RESET ===================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Space Grotesk',Inter,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;cursor:none}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none}
img{max-width:100%;display:block}
ul{list-style:none}

/* ===================== SCROLL PROGRESS ===================== */
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:1000;background:rgba(0,212,255,0.1)}
.scroll-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent3));transition:width 0.1s}

/* ===================== CURSOR (Award-winning style) ===================== */
/* Hide default cursor */
body{cursor:none}
.cursor-main{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;will-change:transform}
.cursor-inner{width:10px;height:10px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s,opacity .2s;box-shadow:0 0 10px var(--accent)}
.cursor-outer{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(0,212,255,.5);transform:translate(-50%,-50%);will-change:transform;transition:width .35s cubic-bezier(.2,.9,.2,1),height .35s cubic-bezier(.2,.9,.2,1),border-color .35s,background .35s}
.cursor-label{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;font-family:'JetBrains Mono',monospace;font-size:.62rem;color:var(--accent);letter-spacing:.1em;white-space:nowrap;opacity:0;transition:opacity .25s;transform:translate(18px,-50%);background:rgba(5,7,26,.85);padding:.2rem .5rem;border-radius:6px;border:1px solid rgba(0,212,255,.2)}
.cursor-label.show{opacity:1}
.cursor-trail{position:fixed;z-index:9997;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);background:var(--accent);opacity:0;will-change:transform}
body.is-hovering .cursor-inner{width:6px;height:6px;background:var(--accent3);box-shadow:0 0 14px var(--accent3)}
body.is-hovering .cursor-outer{width:60px;height:60px;border-color:rgba(255,107,157,.6);background:rgba(255,107,157,.05)}

/* ===================== NAV ===================== */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:500;height:var(--nav-h);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(5,7,26,0.88);border-bottom:1px solid var(--border);contain:layout style}
.navbar{max-width:1400px;margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;gap:1rem}
.brand{font-family:'JetBrains Mono',monospace;font-size:1.4rem;font-weight:700;color:var(--accent);letter-spacing:.1em;display:flex;align-items:center;gap:.3rem}
.brand-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.5s ease-in-out infinite}
.nav-links{display:flex;gap:2rem}
.nav-link{color:var(--muted);font-weight:500;transition:color .2s;font-size:.95rem}
.nav-link:hover,.nav-link.active{color:var(--accent)}
.nav-actions{display:flex;align-items:center;gap:1rem}
.btn-resume{padding:.5rem 1.25rem;border-radius:999px;background:linear-gradient(135deg,var(--accent),#0090ff);color:#05071a;font-weight:700;font-size:.9rem;transition:transform .2s,box-shadow .2s}
.btn-resume:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,212,255,.35)}
.menu-toggle{display:none;flex-direction:column;gap:5px;padding:8px}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--text);border-radius:2px;transition:transform .3s}

/* ===================== WORLD OUTER ===================== */
.world-outer{position:relative;width:100%;height:calc(100vh - var(--nav-h));margin-top:var(--nav-h);overflow:hidden}
.world-track{position:absolute;top:0;left:0;height:100%;width:720vw;will-change:transform;transform:translate3d(0,0,0);contain:layout style}

/* ===================== AURORA ===================== */
.layer-aurora{z-index:2;overflow:hidden}
.aurora-blob{position:absolute;border-radius:50%;filter:blur(50px);mix-blend-mode:screen;animation:auroraDrift 15s ease-in-out infinite alternate;contain:strict}
.ab1{width:600px;height:400px;left:5%;top:5%;background:radial-gradient(ellipse,rgba(123,94,167,.45),transparent 70%);animation-delay:0s}
.ab2{width:500px;height:350px;left:30%;top:15%;background:radial-gradient(ellipse,rgba(0,212,255,.3),transparent 70%);animation-delay:-3s}
.ab3{width:700px;height:400px;left:55%;top:8%;background:radial-gradient(ellipse,rgba(255,107,157,.25),transparent 70%);animation-delay:-6s}
.ab4{width:450px;height:300px;left:80%;top:20%;background:radial-gradient(ellipse,rgba(0,255,136,.2),transparent 70%);animation-delay:-9s}
@keyframes auroraDrift{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-30px) scale(1.1)}100%{transform:translateY(20px) scale(.95)}}

/* ===================== PARALLAX LAYERS ===================== */
.parallax-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;will-change:transform;transform:translate3d(0,0,0);contain:layout style}
.layer-stars{z-index:1}.layer-nebula{z-index:2}.layer-clouds{z-index:3}.layer-mountains{z-index:4}
.layer-buildings{z-index:5;display:flex;align-items:flex-end;bottom:0;top:auto;height:70%}
.layer-mountains svg{position:absolute;bottom:28%;width:100%;height:auto}

/* Stars */
.star{position:absolute;border-radius:50%;background:#fff}


/* Clouds */
.cloud{position:absolute;border-radius:50px;background:rgba(255,255,255,.04);filter:blur(4px)}
.c1{width:280px;height:60px;top:18%;left:5%}.c2{width:200px;height:45px;top:12%;left:30%}
.c3{width:320px;height:70px;top:22%;left:52%}.c4{width:180px;height:40px;top:15%;left:72%}
.c5{width:250px;height:55px;top:10%;left:85%}

/* ===================== BUILDINGS ===================== */
.building{position:absolute;bottom:0;border-radius:4px 4px 0 0}
.b-tower{background:linear-gradient(180deg,rgba(0,212,255,.3) 0%,rgba(10,14,40,.9) 100%);border:1px solid rgba(0,212,255,.2)}
.b-slim{background:linear-gradient(180deg,rgba(123,94,167,.4),rgba(10,14,40,.9));border:1px solid rgba(123,94,167,.2)}
.b-wide{background:linear-gradient(180deg,rgba(255,107,157,.25),rgba(10,14,40,.9));border:1px solid rgba(255,107,157,.15)}
.b-arch{background:linear-gradient(180deg,rgba(0,255,136,.2),rgba(10,14,40,.9));border:1px solid rgba(0,255,136,.15)}
.b-lab{background:linear-gradient(180deg,rgba(0,212,255,.2) 0%,rgba(0,255,136,.15) 50%,rgba(10,14,40,.9) 100%);border:1px solid rgba(0,212,255,.2)}
.b-hangar{background:linear-gradient(180deg,rgba(255,107,157,.2),rgba(10,14,40,.9));border:1px solid rgba(255,107,157,.15);border-radius:8px 8px 0 0}
/* Building pulse glow */
@keyframes buildingGlow{0%,100%{box-shadow:0 0 20px rgba(0,212,255,.1)}50%{box-shadow:0 0 40px rgba(0,212,255,.3),0 0 80px rgba(0,212,255,.1)}}
.b-tower.corp{background:linear-gradient(180deg,rgba(0,255,136,.35),rgba(10,14,40,.95));border-color:rgba(0,255,136,.3);animation:buildingGlow 3s ease-in-out infinite}
.b-tower.antenna::after{content:'';position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:3px;height:40px;background:linear-gradient(180deg,var(--accent),transparent)}
/* Ground neon reflection line */
.ground-surface::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,var(--accent) 20%,rgba(0,255,136,.8) 50%,var(--accent) 80%,transparent 100%);animation:groundScan 4s linear infinite}
@keyframes groundScan{0%{opacity:.3;transform:scaleX(.5)}50%{opacity:1;transform:scaleX(1)}100%{opacity:.3;transform:scaleX(.5)}}

/* Window glow effect on buildings */
.building::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(transparent,transparent 18px,rgba(0,212,255,.06) 18px,rgba(0,212,255,.06) 20px),repeating-linear-gradient(90deg,transparent,transparent 14px,rgba(0,212,255,.06) 14px,rgba(0,212,255,.06) 16px);border-radius:inherit}

/* ===================== GROUND ===================== */
.ground-layer{position:absolute;bottom:0;left:0;width:100%;z-index:6;height:28%}
.ground-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,212,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.08) 1px,transparent 1px);background-size:60px 60px;transform:perspective(400px) rotateX(55deg);transform-origin:bottom;opacity:.5;will-change:transform;contain:strict}
.ground-surface{position:absolute;bottom:0;left:0;right:0;height:62%;background:linear-gradient(180deg,rgba(0,212,255,.04),rgba(5,7,26,1));border-top:2px solid rgba(0,212,255,.3)}
.ground-scan-line{position:absolute;top:0;left:-100%;width:60%;height:2px;background:linear-gradient(90deg,transparent,var(--accent),var(--green),transparent);animation:groundScan 3s linear infinite}
@keyframes groundScan{to{left:200%}}
.zone-sign{position:absolute;bottom:65%;font-family:'JetBrains Mono',monospace;font-size:.62rem;color:rgba(0,212,255,.45);letter-spacing:.15em;text-transform:uppercase;white-space:nowrap}

/* ===================== AVATAR ===================== */
.avatar-wrap{position:fixed;bottom:calc(var(--ground-h) * 0.62 - 8px);left:260px;z-index:499;will-change:transform}
.av-speech-bubble{position:absolute;bottom:120%;left:50%;transform:translateX(-50%) scale(0);background:rgba(5,7,26,0.96);border:1.5px solid var(--accent);border-radius:12px;padding:0.7rem 1.1rem;color:#fff;font-family:'JetBrains Mono',monospace;font-size:0.8rem;font-weight:600;white-space:nowrap;box-shadow:0 0 20px rgba(0,212,255,0.45),inset 0 0 10px rgba(0,212,255,0.2);opacity:0;pointer-events:none;transition:transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275),opacity 0.3s ease;z-index:1000;letter-spacing:0.02em}
.av-speech-bubble.visible{transform:translateX(-50%) scale(1);opacity:1}
.av-speech-bubble::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border-width:7px;border-style:solid;border-color:var(--accent) transparent transparent transparent}
.avatar-char{display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 0 20px rgba(0,212,255,.8));transform-origin:bottom center;will-change:transform}
.avatar-char.jump{animation:jumpAnim 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards}
.avatar-char.flip{animation:flipAnim 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards}
@keyframes jumpAnim{
  0%{transform:translateY(0)}
  50%{transform:translateY(-85px) scaleY(1.08) scaleX(0.95)}
  100%{transform:translateY(0)}
}
@keyframes flipAnim{
  0%{transform:translateY(0) rotate(0deg)}
  35%{transform:translateY(-65px) rotate(120deg) scaleY(0.9) scaleX(0.9)}
  65%{transform:translateY(-65px) rotate(240deg) scaleY(0.9) scaleX(0.9)}
  100%{transform:translateY(0) rotate(360deg)}
}
.section-hand-pointer{
  display:inline-block;
  margin-left:0.75rem;
  font-size:1.35rem;
  color:var(--accent);
  text-shadow:0 0 8px var(--accent);
  opacity:0;
  transform:translateX(-15px);
  transition:all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation:handPointBounce 1.2s ease-in-out infinite alternate
}
.zone-panel.visible .section-hand-pointer{
  opacity:1;
  transform:translateX(0)
}
@keyframes handPointBounce{
  from{transform:translateX(0)}
  to{transform:translateX(6px)}
}
.av-halo{width:70px;height:14px;background:radial-gradient(ellipse,rgba(0,212,255,.5),transparent 70%);border-radius:50%;filter:blur(6px);position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);animation:haloBreath 2s ease-in-out infinite alternate}
@keyframes haloBreath{from{opacity:.8;transform:translateX(-50%) scaleX(1)}to{opacity:.4;transform:translateX(-50%) scaleX(.7)}}
/* Face */
.av-face{width:62px;height:62px;border-radius:50%;overflow:hidden;border:3px solid var(--accent);box-shadow:0 0 20px rgba(0,212,255,.8),0 0 50px rgba(0,212,255,.3);position:relative;flex-shrink:0;animation:floatHead 2s ease-in-out infinite alternate}
.av-face img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.av-face-glow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.15),transparent 60%);pointer-events:none}
@keyframes floatHead{from{transform:translateY(0)}to{transform:translateY(-3px)}}
/* Neck */
.av-neck{width:12px;height:8px;background:linear-gradient(180deg,#1e4878,#0d2035);margin:0 auto;border-radius:0 0 4px 4px}
/* Mid (arms + torso) */
.av-mid{display:flex;align-items:flex-start;gap:2px}
.av-arm{width:11px;height:30px;background:linear-gradient(180deg,#1e4878,#0d2035);border-radius:5px;border:1px solid rgba(0,212,255,.35);transform-origin:top center;position:relative}
.av-arm::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background:rgba(0,212,255,.4)}
.av-torso{width:36px;height:32px;background:linear-gradient(180deg,#1e4878,#0a1a3a);border-radius:4px 4px 2px 2px;border:1px solid rgba(0,212,255,.45);position:relative;overflow:hidden}
.av-torso::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,255,.8),transparent)}
.av-badge{font-family:'JetBrains Mono',monospace;font-size:.38rem;color:var(--accent);position:absolute;top:4px;left:50%;transform:translateX(-50%);white-space:nowrap;letter-spacing:.05em}
.av-chest-light{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:translateX(-50%) scale(1)}50%{opacity:.5;transform:translateX(-50%) scale(.7)}}
/* Legs */
.av-legs{display:flex;gap:5px;margin-top:1px}
.av-leg{width:14px;height:24px;background:linear-gradient(180deg,#0d2035,#060f1c);border-radius:3px 3px 5px 5px;border:1px solid rgba(0,212,255,.25);transform-origin:top center;position:relative}
.av-leg::after{content:'';position:absolute;bottom:0;left:1px;right:1px;height:5px;background:rgba(0,212,255,.3);border-radius:0 0 4px 4px}
/* Shadow */
.av-shadow{width:55px;height:10px;background:radial-gradient(ellipse,rgba(0,212,255,.35),transparent 70%);border-radius:50%;filter:blur(3px);margin-top:4px;animation:shadowPulse 2s ease-in-out infinite alternate}
@keyframes shadowPulse{from{opacity:.7;transform:scaleX(1)}to{opacity:.4;transform:scaleX(.85)}}

/* === WALK ANIMATION === */
.avatar-char.walk .av-leg.l{animation:legFwd .42s ease-in-out infinite alternate}
.avatar-char.walk .av-leg.r{animation:legBack .42s ease-in-out infinite alternate}
.avatar-char.walk .av-arm.left{animation:armBack .42s ease-in-out infinite alternate}
.avatar-char.walk .av-arm.right{animation:armFwd .42s ease-in-out infinite alternate}
.avatar-char.walk .av-torso{animation:torsoRock .42s ease-in-out infinite alternate}
.avatar-char.walk .av-face{animation:none}
@keyframes legFwd{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
@keyframes legBack{from{transform:rotate(22deg)}to{transform:rotate(-22deg)}}
@keyframes armFwd{from{transform:rotate(-26deg)}to{transform:rotate(26deg)}}
@keyframes armBack{from{transform:rotate(26deg)}to{transform:rotate(-26deg)}}
@keyframes torsoRock{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)}}

/* ===================== WORLD ZONES (7 zones, 720vw track) ===================== */
.world-zone{position:absolute;top:0;bottom:0;z-index:20;display:flex;align-items:center;pointer-events:none;gap:3rem;content-visibility:auto;contain-intrinsic-size:auto 100vh}
.zone-hero{left:25vw;width:60vw;pointer-events:auto;padding-left:4vw}
.zone-experience{left:115vw;width:90vw;pointer-events:auto;padding-left:2vw}
.zone-skills{left:225vw;width:75vw;pointer-events:auto;padding-left:2vw}
.zone-projects{left:315vw;width:100vw;pointer-events:auto;padding-left:2vw}
.zone-resume{left:435vw;width:70vw;pointer-events:auto;padding-left:2vw}
.zone-contact{left:525vw;width:55vw;pointer-events:auto;padding-left:2vw}
.zone-thankyou{left:600vw;width:55vw;pointer-events:auto;padding-left:2vw}

/* ===================== GLASS PANELS ===================== */
.zone-panel{background:var(--glass);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border:1px solid var(--border);border-radius:var(--radius);padding:2.5rem 3rem;box-shadow:0 32px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);max-height:calc(100vh - var(--nav-h) - 60px);overflow-y:auto;width:clamp(420px,28vw,680px);opacity:0;transform:translateY(30px) scale(.98);transition:opacity .6s cubic-bezier(.2,.9,.2,1),transform .6s cubic-bezier(.2,.9,.2,1);will-change:opacity,transform;contain:layout style}
.zone-panel.visible{opacity:1;transform:translateY(0)}
.zone-panel::-webkit-scrollbar{width:4px}
.zone-panel::-webkit-scrollbar-thumb{background:rgba(0,212,255,.3);border-radius:4px}

/* Custom wider panel overrides */
.zone-experience .zone-panel{width:clamp(550px,38vw,950px)}
.zone-projects .zone-panel{width:clamp(650px,46vw,1150px)}
.zone-contact .zone-panel{width:clamp(480px,30vw,720px)}
.zone-thankyou .zone-panel{width:clamp(420px,28vw,650px)}

/* ===================== HERO PANEL ===================== */
.hero-panel{display:flex;flex-direction:column;gap:1.5rem;width:clamp(480px,32vw,850px)}
.hero-top{display:flex;gap:1.25rem;align-items:flex-start}
.hero-meta{flex:1}
.hero-status{position:absolute;bottom:-8px;right:-4px;background:rgba(5,7,26,.9);border:1px solid var(--green);border-radius:999px;font-size:.6rem;color:var(--green);padding:.15rem .5rem;display:flex;align-items:center;gap:.3rem;white-space:nowrap}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 1.2s ease-in-out infinite}

/* ===================== GLITCH TEXT ===================== */
.glitch-text{position:relative}
.glitch-text::before,.glitch-text::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;background:transparent;clip:rect(0,900px,0,0)}
.glitch-text::before{left:2px;text-shadow:-1px 0 var(--accent3);animation:glitch1 3.5s infinite linear alternate-reverse}
.glitch-text::after{left:-2px;text-shadow:2px 0 var(--accent);animation:glitch2 2.8s infinite linear alternate-reverse}
@keyframes glitch1{0%,94%{clip:rect(0,900px,0,0)}95%{clip:rect(12px,900px,24px,0);transform:skew(.3deg)}97%{clip:rect(40px,900px,52px,0)}100%{clip:rect(0,900px,0,0)}}
@keyframes glitch2{0%,90%{clip:rect(0,900px,0,0)}92%{clip:rect(30px,900px,42px,0);transform:skew(-.4deg)}96%{clip:rect(8px,900px,16px,0)}100%{clip:rect(0,900px,0,0)}}

/* ===================== RESUME ZONE ===================== */
.resume-panel{width:clamp(360px,19vw,580px)}
.resume-showcase{display:flex;gap:1.5rem;align-items:flex-start;margin-top:1rem}
.resume-preview{width:90px;flex-shrink:0;background:rgba(0,212,255,.05);border:1px solid var(--border);border-radius:12px;padding:.75rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.rp-icon{font-size:1.8rem}
.rp-lines{display:flex;flex-direction:column;gap:.3rem;width:100%}
.rp-line{height:4px;border-radius:2px;background:rgba(0,212,255,.25)}
.rp-line.long{width:100%}.rp-line.medium{width:75%}.rp-line.short{width:50%}
.resume-info{flex:1}
.ri-role{color:var(--accent);font-size:.85rem;margin:.25rem 0 .75rem}
.ri-highlights{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.2rem}
.ri-highlights li{font-size:.82rem;color:var(--muted);padding-left:.5rem}
.resume-dl-group{display:flex;flex-direction:column;gap:.6rem}

/* ===================== CONTACT EXTRAS ===================== */
.contact-availability{display:flex;align-items:center;gap:.6rem;margin-top:1.2rem;padding:.75rem 1rem;border:1px solid rgba(0,255,136,.2);border-radius:12px;background:rgba(0,255,136,.05);font-size:.82rem;color:var(--green)}
.ca-pulse{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(0,255,136,.4);animation:contactPulse 2s infinite}
@keyframes contactPulse{0%{box-shadow:0 0 0 0 rgba(0,255,136,.4)}70%{box-shadow:0 0 0 8px rgba(0,255,136,0)}100%{box-shadow:0 0 0 0 rgba(0,255,136,0)}}
.c-subtitle{color:var(--muted);font-size:.85rem;margin:.25rem 0 1rem}
.ca-ring{position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;background:linear-gradient(135deg,var(--accent),var(--accent3)) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;animation:spin 6s linear infinite;pointer-events:none}

/* ===================== CLICK RIPPLE ===================== */
.ripple{position:fixed;border-radius:50%;background:rgba(0,212,255,.25);pointer-events:none;transform:translate(-50%,-50%) scale(0);animation:rippleOut .6s ease-out forwards;z-index:9996}
@keyframes rippleOut{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
.hero-photo-wrap{position:relative;width:90px;height:90px;flex-shrink:0}
.hero-photo{width:90px;height:90px;border-radius:50%;object-fit:cover;object-position:top;border:3px solid var(--accent);box-shadow:0 0 30px rgba(0,212,255,.5)}
.hero-photo-ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid transparent;background:linear-gradient(135deg,var(--accent),var(--accent2)) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;animation:spin 8s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--accent);letter-spacing:.12em;text-transform:uppercase;line-height:1.6}
h1{font-size:clamp(2rem,4vw,3rem);line-height:1.05;letter-spacing:-.03em}
h1 strong{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.typewriter-wrap{font-family:'JetBrains Mono',monospace;font-size:1rem;color:var(--muted)}
.typewriter{color:var(--accent)}
.type-cursor{color:var(--accent);animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.hero-sub{color:var(--muted);line-height:1.7;font-size:.95rem}
.stat-row{display:flex;gap:1rem;flex-wrap:wrap}
.stat-pill{background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.2);border-radius:12px;padding:.6rem 1rem;text-align:center}
.stat-pill strong{display:block;font-size:1.3rem;color:var(--accent)}
.stat-pill span{font-size:.75rem;color:var(--muted)}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap}
.cta-primary{padding:.8rem 1.75rem;border-radius:999px;background:linear-gradient(135deg,var(--accent),#0090ff);color:#05071a;font-weight:700;transition:transform .2s,box-shadow .2s}
.cta-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,212,255,.4)}
.cta-secondary{padding:.8rem 1.75rem;border-radius:999px;border:1px solid var(--border);color:var(--text);font-weight:600;transition:transform .2s,border-color .2s}
.cta-secondary:hover{transform:translateY(-2px);border-color:var(--accent)}
.scroll-hint{text-align:center;padding-top:.5rem;color:var(--muted);font-size:.8rem;letter-spacing:.1em;animation:bounce 2s ease-in-out infinite}
.scroll-arrow{font-size:1.1rem;color:var(--accent);margin-top:.4rem}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ===================== SECTION HEAD ===================== */
.section-head{margin-bottom:1.5rem}
.zone-badge{display:inline-block;padding:.3rem .85rem;border-radius:999px;background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.2);font-size:.75rem;font-family:'JetBrains Mono',monospace;color:var(--accent);margin-bottom:.75rem}
h2{font-size:1.75rem;letter-spacing:-.02em;margin-bottom:.4rem}
.zone-desc{color:var(--muted);font-size:.9rem;line-height:1.6}

/* ===================== TIMELINE ===================== */
.timeline{display:flex;flex-direction:column;gap:1.5rem}
.tl-item{display:flex;gap:1.25rem;position:relative}
.tl-item::before{content:'';position:absolute;left:9px;top:24px;bottom:-1.8rem;width:1px;background:var(--border)}
.tl-item:last-child::before{display:none}
.tl-dot{width:20px;height:20px;border-radius:50%;border:2px solid rgba(0,212,255,.4);background:var(--bg);flex-shrink:0;margin-top:2px;transition:all .3s}
.tl-dot.active-dot{border-color:var(--green);background:rgba(0,255,136,.2);box-shadow:0 0 12px rgba(0,255,136,.5)}
.tl-content{flex:1;min-width:0}
.tl-content h3{font-size:1.05rem;font-weight:700;color:var(--text);margin-bottom:0.15rem}
.tl-role{color:var(--accent);font-size:.85rem;font-weight:600;margin-bottom:0.25rem}
.tl-meta{color:var(--muted);font-size:.78rem;margin-bottom:.6rem;font-family:'JetBrains Mono',monospace;display:flex;flex-wrap:wrap;align-items:center;gap:0.4rem}
.tl-current{color:var(--green);font-weight:700;font-size:0.7rem;letter-spacing:0.05em}
.tl-points{padding-left:1rem;display:flex;flex-direction:column;gap:.35rem;margin-bottom:.75rem}
.tl-points li{color:var(--muted);font-size:.85rem;line-height:1.5;position:relative}
.tl-points li::before{content:'▸';position:absolute;left:-1rem;color:var(--accent)}
.tech-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tech-tags span{padding:.2rem .6rem;border-radius:6px;background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.15);font-size:.72rem;font-family:'JetBrains Mono',monospace;color:var(--accent)}

/* ===================== SKILLS ===================== */
.skill-bars{display:flex;flex-direction:column;gap:1.1rem;margin-bottom:1.5rem}
.skill-bar{display:flex;flex-direction:column;gap:0.4rem}
.sb-label{display:flex;justify-content:space-between;font-size:.85rem;font-weight:600}
.sb-pct{color:var(--accent);font-family:'JetBrains Mono',monospace}
.sb-track{height:8px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;position:relative}
.sb-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width 1s cubic-bezier(.2,.9,.2,1)}
.skill-cloud{display:flex;flex-wrap:wrap;gap:.45rem}
.skill-cloud span{padding:.25rem .65rem;border-radius:8px;background:rgba(123,94,167,.12);border:1px solid rgba(123,94,167,.2);font-size:.72rem;color:#c0a0f0;font-family:'JetBrains Mono',monospace}

/* ===================== PROJECTS ===================== */
.project-filter{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.25rem}
.pf-btn{padding:.45rem 1rem;border-radius:999px;border:1px solid rgba(255,255,255,.12);color:var(--muted);font-size:.82rem;font-weight:600;transition:all .2s}
.pf-btn.active,.pf-btn:hover{background:rgba(0,212,255,.1);border-color:var(--accent);color:var(--accent)}
.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.25rem}
.proj-card{display:flex;gap:1rem;padding:1.2rem;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03);transition:border-color .2s,transform .2s}
.proj-card:hover{border-color:rgba(0,212,255,.3);transform:translateX(4px)}
.proj-card.hidden{display:none}
.proj-icon{font-size:1.75rem;flex-shrink:0;line-height:1}
.proj-label{font-size:.7rem;font-family:'JetBrains Mono',monospace;color:var(--muted);display:block;margin-bottom:.2rem}
.proj-info h3{font-size:.95rem;margin-bottom:.35rem}
.proj-info p{color:var(--muted);font-size:.82rem;line-height:1.55;margin-bottom:.5rem}
.proj-tags{display:flex;flex-wrap:wrap;gap:.35rem}
.proj-tags span{padding:.15rem .5rem;border-radius:6px;background:rgba(255,107,157,.08);border:1px solid rgba(255,107,157,.15);font-size:.7rem;color:#ff9dc7}

/* ===================== CONTACT ===================== */
.contact-grid{display:flex;flex-direction:column;gap:1rem}
.contact-card{padding:1.25rem;border-radius:14px;background:rgba(0,212,255,.05);border:1px solid rgba(0,212,255,.12);display:flex;flex-direction:column;gap:.75rem}
.contact-avatar{position:relative;width:60px;height:60px;flex-shrink:0}
.contact-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:top;border:2px solid var(--accent)}
.contact-card h3{font-size:1rem;margin-bottom:.1rem}
.contact-card p{color:var(--muted);font-size:.85rem;line-height:1.6}
.contact-links{display:flex;flex-direction:column;gap:.5rem}
.c-link{display:flex;align-items:center;gap:.75rem;padding:.6rem .85rem;border-radius:10px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03);color:var(--text);font-size:.85rem;transition:all .2s}
.c-link:hover{border-color:var(--accent);background:rgba(0,212,255,.08)}
.c-link.whatsapp{border-color:rgba(37,211,102,.2);background:rgba(37,211,102,.06)}
.c-link.whatsapp:hover{border-color:rgba(37,211,102,.6);background:rgba(37,211,102,.15)}
.c-link.whatsapp .c-icon{filter:none}
.resume-card{padding:1.25rem;border-radius:14px;background:rgba(123,94,167,.08);border:1px solid rgba(123,94,167,.2);display:flex;flex-direction:column;gap:.75rem;align-items:center;text-align:center}
.resume-icon{font-size:2rem}
.resume-card h3{font-size:1rem}
.resume-card p{color:var(--muted);font-size:.83rem;line-height:1.55}
.dl-btn{display:block;width:100%;padding:.65rem 1rem;border-radius:10px;text-align:center;font-weight:600;font-size:.85rem;transition:all .2s}
.dl-btn.primary{background:linear-gradient(135deg,var(--accent),#0090ff);color:#05071a}
.dl-btn.secondary{border:1px solid rgba(123,94,167,.4);color:var(--text)}
.dl-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.3)}

/* ===================== MINIMAP ===================== */
.minimap{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);z-index:600;background:rgba(5,7,26,.9);border:1px solid var(--border);border-radius:999px;padding:.5rem 1.5rem;backdrop-filter:blur(16px)}
.mm-track{position:relative;height:36px;display:flex;align-items:center;gap:0;min-width:260px}
.mm-thumb{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);top:50%;transform:translateY(-50%);transition:left .3s ease;pointer-events:none}
.mm-zone{position:absolute;top:50%;transform:translateY(-50%);font-size:1rem;transition:transform .2s;padding:0}
.mm-zone:hover{transform:translateY(-50%) scale(1.3)}

/* ===================== FOOTER ===================== */
.site-footer{position:fixed;bottom:0;left:0;right:0;height:0;pointer-events:none;opacity:0}

/* ===================== PARTICLES ===================== */
.particle{position:absolute;pointer-events:none;font-family:'JetBrains Mono',monospace;font-size:.65rem;color:rgba(0,212,255,.25);animation:floatUp var(--dur,8s) linear infinite;animation-delay:var(--delay,0s)}
@keyframes floatUp{from{transform:translateY(100vh) translateX(0);opacity:0}10%{opacity:1}90%{opacity:.3}to{transform:translateY(-10vh) translateX(var(--drift,30px));opacity:0}}

/* ===================== SHOOTING STARS ===================== */
.shooting-star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: linear-gradient(90deg, #fff, var(--accent), transparent);
  box-shadow: 0 0 14px 2px rgba(255,255,255,.9), 0 0 30px 4px rgba(0,212,255,.5);
  transform: rotate(-35deg) scaleX(0);
  transform-origin: left;
  z-index: 1;
  pointer-events: none;
  border-radius: 50% 0 0 50%;
}

@keyframes shootingStarAnim {
  0% {
    transform: rotate(-35deg) scaleX(0);
    opacity: 1;
  }
  40% {
    opacity: 1;
    transform: rotate(-35deg) scaleX(50);
  }
  70% {
    opacity: .7;
    transform: rotate(-35deg) scaleX(50) translate(-180px, 120px);
  }
  100% {
    transform: rotate(-35deg) scaleX(0) translate(-400px, 260px);
    opacity: 0;
  }
}

/* ===================== MOBILE RESPONSIVE ===================== */
@media (max-width: 900px) {
  body{cursor:auto;overflow-x:hidden;overflow-y:auto}
  .cursor,.cursor-trail,.cursor-main,.cursor-outer,.cursor-label{display:none !important}
  .site-nav{position:sticky}
  .menu-toggle{display:flex}
  .nav-links{display:none;position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;background:rgba(5,7,26,.98);border-bottom:1px solid var(--border);padding:1rem;gap:.5rem}
  .nav-links.open{display:flex}
  .nav-link{padding:.6rem 1rem;border-radius:10px}
  .nav-link:hover{background:rgba(0,212,255,.08)}
  .minimap{display:none !important}

  .avatar-wrap{
    bottom:calc(var(--ground-h) * 0.62 - 12px) !important;
  }

  .avatar-char{
    transform:scale(0.55) !important;
    transform-origin:bottom center;
  }

  .av-speech-bubble{
    font-size:0.78rem !important;
    padding:0.5rem 0.8rem !important;
    bottom:120% !important;
    white-space:normal !important;
    width:200px !important;
    text-align:center !important;
    line-height:1.35 !important;
  }
  .av-speech-bubble.visible{
    transform:translateX(-50%) scale(1) !important; /* Visual scaling now completely native since parent is 1.0! */
  }

  .world-zone{
    align-items:flex-start !important;
    padding-top:15px !important;
  }

  /* Remove max-height so all data is visible, widen panels */
  .zone-panel{
    width:93vw !important;
    max-width:93vw !important;
    max-height:calc(100vh - var(--nav-h) - var(--ground-h) - 15px) !important;
    padding:1.1rem 0.7rem !important;
    margin:0 !important;
    font-size:0.9rem !important;
    -webkit-overflow-scrolling:touch;
  }

  .zone-experience .zone-panel,
  .zone-skills .zone-panel,
  .zone-projects .zone-panel,
  .zone-contact .zone-panel,
  .zone-thankyou .zone-panel{
    width:93vw !important;
    max-width:93vw !important;
  }


  .hero-panel{width:100% !important;gap:0.8rem !important}
  .hero-top{flex-direction:column !important;align-items:center !important;text-align:center !important;gap:0.75rem !important}
  .hero-photo-wrap{width:70px !important;height:70px !important}
  .hero-photo{width:70px !important;height:70px !important}
  .hero-status{bottom:-4px !important;right:-10px !important}
  .hero-bio{text-align:center !important;margin:0.25rem 0 !important;font-size:0.85rem !important;line-height:1.5 !important}
  .hero-ctas{justify-content:center !important}
  .scroll-hint{display:none !important}
  
  .contact-avatar{display:none !important}
  .contact-card{padding:1rem !important;gap:0.65rem !important}
  .contact-links{margin-top:0.6rem !important;gap:0.6rem !important}
  .contact-availability{margin-top:0.75rem !important;padding:0.5rem 0.75rem !important}
  h1{font-size:clamp(1.7rem,5.5vw,2.2rem) !important}
  h2{font-size:clamp(1.3rem,4.5vw,1.8rem) !important}
  h3{font-size:clamp(1rem,3.5vw,1.3rem) !important}
  .contact-grid{display:grid;grid-template-columns:1fr;gap:0.8rem}
  .c-link{
    font-size:clamp(0.64rem, 2.7vw, 0.72rem) !important;
    padding:0.45rem 0.4rem !important;
    gap:0.45rem !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  .project-grid{display:grid;grid-template-columns:1fr;gap:0.8rem}
  .stat-row{gap:0.5rem}
  .stat-pill{padding:0.3rem 0.5rem}
  .stat-pill strong{font-size:1.1rem}
  .tl-points li{font-size:0.82rem}
  .tech-tags span{font-size:0.65rem;padding:0.15rem 0.4rem}

  /* Disable heavy GPU blur filters on mobile for perf */
  .aurora-blob{filter:blur(25px);animation-duration:20s}
  .layer-nebula::before,.layer-nebula::after{filter:blur(30px)}

  /* mobile bg */
  body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at top left,rgba(123,94,167,.2) 0%,transparent 50%),radial-gradient(ellipse at bottom right,rgba(0,212,255,.1) 0%,transparent 50%),var(--bg)}
}

@media (max-width: 600px) {
  .hero-ctas{flex-direction:column}
  .stat-row{flex-wrap:wrap;gap:.4rem}
  .stat-pill{min-width:calc(50% - .4rem)}
  .zone-panel{padding:1rem 0.8rem !important;font-size:0.88rem !important}
  .ty-badges{flex-wrap:wrap}
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{animation:none !important;transition:none !important}
  .cursor{display:none}
}

/* ===================== THANK YOU PANEL ===================== */
.thank-you-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}
.ty-portal {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ty-portal-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px dashed var(--accent);
  animation: spin 15s linear infinite;
  box-shadow: 0 0 25px rgba(0, 212, 255, 0.4), inset 0 0 25px rgba(0, 212, 255, 0.4);
}
.ty-portal-core {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, var(--accent2) 50%, transparent 100%);
  box-shadow: 0 0 30px var(--accent), 0 0 60px var(--accent2);
  animation: pulse 2s ease-in-out infinite alternate;
}
.ty-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 420px;
}
.ty-badges {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}
.ty-badge {
  padding: 0.35rem 0.8rem;
  border-radius: 8px;
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.2);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.scroll-to-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  border: 1px solid rgba(0, 255, 136, 0.4);
  background: rgba(0, 255, 136, 0.08);
  color: var(--green);
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 255, 136, 0.15);
  margin-top: 0.5rem;
  cursor: none; /* keep custom cursor look */
}
.scroll-to-start-btn:hover {
  background: var(--green);
  color: #05071a;
  box-shadow: 0 8px 25px rgba(0, 255, 136, 0.45);
  transform: translateY(-2px);
}