:root {
  --bg:#050508;--bg2:#08080f;--bg3:#0b0b14;
  --pu-deep:#1a0a2e;--pu-mid:#3d1a6e;--pu-bright:#7b2fff;--pu-glow:#a855f7;--pu-pale:#c084fc;
  --accent:#ff2d78;--accent2:#ff6b35;
  --green:#39ff14;--green-dim:#1a7a09;
  --cyan:#00d4ff;--gold:#ffd700;
  --text:#e2e8f0;--text-m:#94a3b8;--text-d:#475569;
  --bdr:rgba(123,47,255,.2);--bdr-b:rgba(123,47,255,.55);
  --fd:'Cinzel',serif;--fb:'Philosopher',serif;--fm:'Share Tech Mono',monospace;--fu:'Rajdhani',sans-serif;--fo:'Orbitron',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--fb);overflow-x:hidden;cursor:none;overscroll-behavior-y:none}
a,button,[role="button"],.taste-tab,.mobile-nav-link,.nav-links a,.contact-link,.proj-link,.hero-tag{touch-action:manipulation}

/* ═══════════════════════════════════════
   CUSTOM CURSOR — UPGRADED
══════════════════════════════════════ */
.cursor{width:14px;height:14px;border:2px solid var(--pu-glow);border-radius:50%;position:fixed;pointer-events:none;z-index:9999;top:0;left:0;will-change:transform;transition:width .15s,height .15s,border-color .15s}
.cursor::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(168,85,247,.3);animation:cursor-ring 1.5s ease-out infinite}
@keyframes cursor-ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.2);opacity:0}}
.cursor-trail{width:5px;height:5px;background:var(--pu-bright);border-radius:50%;position:fixed;pointer-events:none;z-index:9998;top:0;left:0;will-change:transform}
.cursor.hovering{width:36px;height:36px;border-color:var(--accent);border-width:1px;background:rgba(255,45,120,.08)}
.cursor.hovering::after{animation:none;border-color:rgba(255,45,120,.4)}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,var(--pu-bright),var(--accent));border-radius:2px}

/* ═══════════════════════════════════════
   CANVAS BG — PARTICLE RAIN
══════════════════════════════════════ */
#particleCanvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55}

/* ═══════════════════════════════════════
   NOISE OVERLAY
══════════════════════════════════════ */
.noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.03;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")}

/* ═══════════════════════════════════════
   CHROMATIC ABERRATION OVERLAY
══════════════════════════════════════ */
.chroma-overlay{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:screen;background:transparent;transition:opacity .1s}
.chroma-overlay.burst{animation:chroma-flash .5s forwards}
@keyframes chroma-flash{0%{opacity:0}10%{opacity:1}30%{opacity:.6}60%{opacity:.2}100%{opacity:0}}

/* ═══════════════════════════════════════
   NAV — UPGRADED
══════════════════════════════════════ */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:.9rem 3rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bdr);background:rgba(5,5,8,.95);backdrop-filter:blur(8px);font-family:var(--fu)}
nav::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:linear-gradient(to right,var(--pu-bright),var(--accent),var(--cyan));animation:nav-scan 4s ease-in-out infinite;transform-origin:left}
@keyframes nav-scan{0%{transform:scaleX(0);transform-origin:left}49%{transform:scaleX(1);transform-origin:left}50%{transform:scaleX(0);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
.nav-logo{font-family:var(--fd);font-size:1.4rem;letter-spacing:.3em;color:var(--pu-glow);text-decoration:none;text-shadow:0 0 20px var(--pu-bright),0 0 40px rgba(123,47,255,.4);position:relative;display:flex;align-items:center;gap:.55rem}
.nav-logo-img{width:34px;height:34px;object-fit:contain;border-radius:50%;border:1px solid rgba(123,47,255,.5);box-shadow:0 0 12px rgba(123,47,255,.5),0 0 24px rgba(123,47,255,.2);filter:drop-shadow(0 0 6px var(--pu-bright));flex-shrink:0}
.nav-logo::before{content:'CLEO';position:absolute;inset:0;color:var(--cyan);animation:logo-glitch 6s infinite;clip-path:polygon(0 30%,100% 30%,100% 50%,0 50%)}
@keyframes logo-glitch{0%,85%,100%{transform:none;opacity:0}86%{transform:translateX(-3px);opacity:.7}88%{transform:translateX(3px);opacity:.7}90%{opacity:0}}
.nav-links{display:flex;gap:1.6rem;list-style:none}
.nav-links a{color:var(--text-m);text-decoration:none;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;transition:color .2s;font-weight:600;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--pu-glow);transition:width .3s;box-shadow:0 0 6px var(--pu-bright)}
.nav-links a:hover{color:var(--pu-glow)}
.nav-links a:hover::after{width:100%}
.nav-status{font-size:.7rem;color:var(--green);font-family:var(--fm);display:flex;align-items:center;gap:.5rem}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse-g 2s infinite;box-shadow:0 0 8px var(--green)}
@keyframes pulse-g{0%,100%{opacity:1}50%{opacity:.4}}

/* ═══════════════════════════════════════
   HERO — FULL CINEMATIC UPGRADE
══════════════════════════════════════ */
#hero{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:6rem 2rem 2rem;position:relative;overflow:hidden}

/* Manga speed lines radiating from center */
.hero-speedlines{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-speedlines svg{width:100%;height:100%;animation:speedlines-pulse 3s ease-in-out infinite}
@keyframes speedlines-pulse{0%,100%{opacity:.06}50%{opacity:.12}}

/* Animated grid bg */
.hero-bg-grid{position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(123,47,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(123,47,255,.06) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 0%,transparent 100%);
  animation:grid-drift 20s linear infinite;will-change:transform}
@keyframes grid-drift{0%{transform:translate(0,0)}100%{transform:translate(60px,60px)}}

/* Orbs — more dramatic */
.hero-orb{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.orb1{width:800px;height:800px;background:radial-gradient(circle,rgba(123,47,255,.18) 0%,transparent 70%);top:-300px;left:-300px;animation:orb-drift1 12s ease-in-out infinite}
.orb2{width:600px;height:600px;background:radial-gradient(circle,rgba(255,45,120,.12) 0%,transparent 70%);bottom:-200px;right:-200px;animation:orb-drift2 15s ease-in-out infinite}
.orb3{width:400px;height:400px;background:radial-gradient(circle,rgba(0,212,255,.08) 0%,transparent 70%);top:40%;left:55%;animation:orb-drift3 10s ease-in-out infinite}
@keyframes orb-drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-30px)}}
@keyframes orb-drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,40px)}}
@keyframes orb-drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-20px)}}

/* Impact lines on hero load */
.hero-impact{position:absolute;inset:0;z-index:1;pointer-events:none;animation:hero-impact-flash .8s .2s forwards}
@keyframes hero-impact-flash{0%{background:rgba(123,47,255,.15)}100%{background:transparent}}

.hero-content{position:relative;z-index:2;text-align:center}
.hero-eyebrow{font-family:var(--fm);font-size:.72rem;color:var(--pu-glow);letter-spacing:.4em;text-transform:uppercase;margin-bottom:1.5rem;opacity:0;animation:fadeUp .6s .3s forwards;text-shadow:0 0 20px var(--pu-bright)}

/* MASSIVE GLITCH NAME */
.hero-name{
  font-family:var(--fd);
  font-size:clamp(5rem,15vw,12rem);
  font-weight:600;line-height:.9;letter-spacing:.1em;
  background:linear-gradient(135deg,#c084fc 0%,#a855f7 30%,#7b2fff 60%,#ff2d78 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 40px rgba(123,47,255,.6)) drop-shadow(0 0 80px rgba(123,47,255,.3));
  opacity:0;animation:hero-name-in 1s .5s cubic-bezier(.2,0,0,1) forwards;
  position:relative;
}
@keyframes hero-name-in{
  0%{opacity:0;transform:scale(1.3) translateY(20px)}
  60%{filter:drop-shadow(0 0 50px rgba(123,47,255,.8)) drop-shadow(0 0 100px rgba(255,45,120,.5))}
  100%{opacity:1;transform:scale(1) translateY(0);filter:drop-shadow(0 0 40px rgba(123,47,255,.6))}
}
.hero-name::after{content:'CLEO';position:absolute;inset:0;background:linear-gradient(135deg,#c084fc,#7b2fff,#ff2d78);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:.25;z-index:-1}

/* Glitch effect — upgraded with RGB split */
.glitch{animation:glitch-main 7s infinite}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;background:inherit;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.glitch::before{animation:glitch-1 7s infinite;clip-path:polygon(0 0,100% 0,100% 40%,0 40%);filter:drop-shadow(-3px 0 var(--cyan))}
.glitch::after{animation:glitch-2 7s infinite;clip-path:polygon(0 60%,100% 60%,100% 100%,0 100%);filter:drop-shadow(3px 0 var(--accent))}
@keyframes glitch-main{0%,87%,100%{transform:none}88%{transform:skewX(-3deg) scaleX(1.01)}89%{transform:skewX(2deg)}90%{transform:skewX(-1deg) scaleX(1)}91%{transform:none}94%{transform:skewX(-2deg)}95%{transform:none}}
@keyframes glitch-1{0%,87%,100%{transform:none;opacity:0}88%{transform:translateX(-5px) translateY(2px);opacity:.8}90%{transform:translateX(4px);opacity:.6}91%{opacity:0}}
@keyframes glitch-2{0%,87%,100%{transform:none;opacity:0}88%{transform:translateX(5px) translateY(-2px);opacity:.7}90%{transform:translateX(-4px);opacity:.5}91%{opacity:0}}

.hero-tagline{font-family:var(--fb);font-style:italic;font-size:clamp(1rem,2.5vw,1.5rem);color:var(--text-m);margin-top:1.5rem;letter-spacing:.05em;opacity:0;animation:fadeUp .8s .8s forwards;min-height:2rem}
.hero-tagline span{color:var(--pu-pale);text-shadow:0 0 20px var(--pu-glow)}

.hero-tags{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:2rem;opacity:0;animation:fadeUp .8s 1.1s forwards}
.hero-tag{
  font-family:var(--fu);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  padding:.3rem .9rem;border:1px solid var(--bdr-b);color:var(--pu-pale);
  background:rgba(123,47,255,.08);border-radius:2px;font-weight:600;
  position:relative;overflow:hidden;transition:all .3s;
}
.hero-tag::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(123,47,255,.3),transparent);transform:translateX(-100%);transition:transform .3s}
.hero-tag:hover{border-color:var(--pu-glow);color:white;box-shadow:0 0 20px rgba(123,47,255,.4),inset 0 0 20px rgba(123,47,255,.1)}
.hero-tag:hover::before{transform:translateX(0)}

/* Float animation shared */
@keyframes float{
  0%,100%{transform:translateY(0) rotate(0deg)}
  25%{transform:translateY(-12px) rotate(.5deg)}
  75%{transform:translateY(-8px) rotate(-.5deg)}
}

@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

.scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);font-family:var(--fm);font-size:.68rem;color:var(--text-d);letter-spacing:.2em;display:flex;flex-direction:column;align-items:center;gap:.5rem;animation:bounce 2s infinite}
.scroll-arrow{width:1px;height:40px;background:linear-gradient(to bottom,var(--pu-bright),transparent)}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}

/* ═══════════════════════════════════════
   SECTION ENTRANCE — ANIME IMPACT
══════════════════════════════════════ */
.section-enter{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.2,0,0,1),transform .7s cubic-bezier(.2,0,0,1)}
.section-enter.visible{opacity:1;transform:translateY(0)}

/* Manga panel flash on section entry */
.manga-flash{position:absolute;inset:0;background:white;opacity:0;pointer-events:none;z-index:10;border-radius:inherit}
.manga-flash.pop{animation:manga-pop .4s forwards}
@keyframes manga-pop{0%{opacity:.08}30%{opacity:.04}100%{opacity:0}}

/* ═══════════════════════════════════════
   TERMINAL — CINEMATIC CENTREPIECE
══════════════════════════════════════ */
#terminal-section{
  padding:0;
  display:flex;flex-direction:column;align-items:center;
  background:#020204;
  position:relative;overflow:hidden;
  border-top:1px solid rgba(123,47,255,.15);
  border-bottom:1px solid rgba(123,47,255,.15);
}

/* Full-bleed scanline overlay for the whole section */
#terminal-section::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0px,rgba(0,0,0,.07) 1px,transparent 1px,transparent 4px);
  animation:scanlines-drift 8s linear infinite;
}
@keyframes scanlines-drift{0%{background-position:0 0}100%{background-position:0 40px}}

/* Ambient purple bloom from below */
#terminal-section::after{
  content:'';position:absolute;bottom:-60px;left:50%;transform:translateX(-50%);
  width:900px;height:300px;
  background:radial-gradient(ellipse,rgba(123,47,255,.18) 0%,transparent 70%);
  pointer-events:none;z-index:0;
}

/* Speed lines, spinning */
.term-speedlines{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.term-speedlines::before{
  content:'';position:absolute;top:50%;left:50%;width:220%;height:220%;
  transform:translate(-50%,-50%);
  background:conic-gradient(
    from 0deg,transparent 0deg,transparent 7deg,rgba(123,47,255,.04) 7deg,rgba(123,47,255,.04) 8.5deg,transparent 8.5deg,
    transparent 48deg,rgba(123,47,255,.04) 48deg,rgba(123,47,255,.04) 49.5deg,transparent 49.5deg,
    transparent 108deg,rgba(0,212,255,.025) 108deg,rgba(0,212,255,.025) 109.5deg,transparent 109.5deg,
    transparent 178deg,rgba(123,47,255,.04) 178deg,rgba(123,47,255,.04) 179.5deg,transparent 179.5deg,
    transparent 250deg,rgba(123,47,255,.04) 250deg,rgba(123,47,255,.04) 251.5deg,transparent 251.5deg,
    transparent 322deg,rgba(168,85,247,.03) 322deg,rgba(168,85,247,.03) 323.5deg,transparent 323.5deg,
    transparent 360deg
  );
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,transparent 10%,black 100%);
  animation:splines 60s linear infinite;will-change:transform;
}
@keyframes splines{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ── HEADER BAR above terminal ── */
.term-section-header{
  width:100%;max-width:1400px;
  padding:2rem 3rem 1.2rem;
  display:flex;align-items:center;justify-content:space-between;
  position:relative;z-index:2;
  border-bottom:1px solid rgba(123,47,255,.1);
}
.term-section-label{
  font-family:var(--fo);font-size:.58rem;color:var(--pu-glow);
  letter-spacing:.4em;text-transform:uppercase;
  text-shadow:0 0 12px var(--pu-bright);
  display:flex;align-items:center;gap:.8rem;
}
.term-section-label::before{
  content:'';width:30px;height:1px;
  background:linear-gradient(to right,var(--pu-bright),transparent);
}
.term-section-tagline{
  font-family:var(--fm);font-size:.65rem;color:var(--text-d);
  letter-spacing:.12em;
}

/* ── MAIN TERMINAL LAYOUT — sidebar + main ── */
.term-layout{
  width:100%;max-width:1400px;
  display:grid;
  grid-template-columns:1fr 340px;
  min-height:620px;
  position:relative;z-index:2;
}

/* ── MAIN TERMINAL PANEL ── */
.terminal-panel-outer{
  position:relative;
  border-right:1px solid rgba(123,47,255,.12);
  display:flex;flex-direction:column;
}

/* Animated top border line */
.terminal-panel-outer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:10;
  background:linear-gradient(to right,transparent,var(--pu-bright),var(--accent),var(--cyan),var(--pu-bright),transparent);
  background-size:200% 100%;
  animation:border-slide 3s linear infinite;
}
@keyframes border-slide{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Vignette */
.terminal-panel-outer::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(123,47,255,.04),transparent);
}

@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}

.vhs-terminal{
  width:100%;background:transparent;
  display:flex;flex-direction:column;flex:1;
  position:relative;
}

.term-titlebar{
  background:linear-gradient(90deg,#04000a,#080010,#04000a);
  padding:.65rem 1.2rem;
  display:flex;align-items:center;gap:.6rem;
  border-bottom:1px solid rgba(123,47,255,.2);
  font-family:var(--fm);font-size:.7rem;color:var(--pu-pale);
  position:relative;z-index:3;flex-shrink:0;
}
.term-titlebar::after{
  content:'';position:absolute;right:0;top:0;bottom:0;width:30%;
  background:linear-gradient(90deg,transparent,rgba(123,47,255,.06));
  pointer-events:none;
}
.term-dots{display:flex;gap:6px}
.term-dot{width:10px;height:10px;border-radius:50%;cursor:pointer;transition:filter .2s}
.term-dot:hover{filter:brightness(1.4)}
.term-dot.r{background:#ff5f57;box-shadow:0 0 8px rgba(255,95,87,.9)}
.term-dot.y{background:#febc2e;box-shadow:0 0 8px rgba(254,188,46,.9)}
.term-dot.g{background:#28c840;box-shadow:0 0 8px rgba(40,200,64,.9)}
.term-title{margin:0 auto;letter-spacing:.22em;font-family:var(--fo);font-size:.55rem;color:var(--pu-pale);text-shadow:0 0 12px var(--pu-bright)}

.vhs-badge{
  font-family:var(--fo);font-size:.5rem;background:var(--accent);
  color:white;padding:2px 7px;border-radius:2px;letter-spacing:.12em;
  animation:vblink 1.5s infinite;box-shadow:0 0 12px rgba(255,45,120,.7);
}
@keyframes vblink{0%,80%,100%{opacity:1}90%{opacity:0}}

.term-body{
  padding:1.4rem 1.6rem;
  flex:1;
  overflow-y:auto;
  font-family:var(--fm);font-size:.83rem;line-height:1.8;
  color:var(--green);
  position:relative;z-index:2;
  min-height:460px;max-height:520px;
  background:transparent;
  scroll-behavior:smooth;
}
.term-body::-webkit-scrollbar{width:2px}
.term-body::-webkit-scrollbar-thumb{background:rgba(123,47,255,.4);border-radius:1px}
.term-body ::selection{background:rgba(123,47,255,.35);color:white}

.term-prompt{color:var(--pu-glow);text-shadow:0 0 10px var(--pu-bright)}
.term-cmd{color:var(--green)}
.term-output{color:#aaffaa;white-space:pre-wrap}
.term-output.dim{color:#1e3a1e}
.term-output.purple{color:var(--pu-pale)}
.term-output.accent{color:var(--accent)}
.term-output.cyan{color:var(--cyan)}
.term-output.muted{color:#3a5a3a;font-style:italic}
.term-output.warning{color:#febc2e}
.term-output.gold{color:var(--gold)}
.term-output.red{color:#ff5f57}
.term-output.white{color:#e2e8f0}

/* per-line reveal animation */
@keyframes line-in{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}
.term-line-new{animation:line-in .12s ease forwards}

@keyframes impact{0%{opacity:.25}100%{opacity:0}}
.term-impact{animation:impact .6s ease-out}

.term-input-line{display:flex;align-items:center;gap:.5rem;margin-top:.25rem}
.term-input{
  background:none;border:none;outline:none;
  font-family:var(--fm);font-size:.83rem;color:var(--green);flex:1;
  caret-color:var(--pu-glow);
  caret-shape:block;
}

/* command strip */
.term-help-strip{
  padding:.6rem 1.6rem;flex-shrink:0;
  border-top:1px solid rgba(123,47,255,.1);
  background:rgba(0,0,0,.5);
  display:flex;gap:0;flex-wrap:wrap;
  font-family:var(--fm);font-size:.6rem;
}
.term-cmd-btn{
  color:rgba(123,47,255,.5);cursor:pointer;
  padding:.2rem .55rem;border-radius:2px;
  transition:all .15s;white-space:nowrap;border:1px solid transparent;
  letter-spacing:.05em;
}
.term-cmd-btn:hover{
  color:var(--pu-glow);background:rgba(123,47,255,.08);
  border-color:rgba(123,47,255,.2);text-shadow:0 0 8px var(--pu-bright);
}
.term-cmd-btn.special{color:rgba(255,45,120,.5)}
.term-cmd-btn.special:hover{color:var(--accent);background:rgba(255,45,120,.06);border-color:rgba(255,45,120,.2)}

/* ── SIDEBAR ── */
.term-sidebar{
  display:flex;flex-direction:column;
  background:rgba(2,2,4,.95);
  border-left:1px solid rgba(123,47,255,.08);
  position:relative;overflow:hidden;
}

/* sidebar top glow */
.term-sidebar::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,transparent,rgba(123,47,255,.4),transparent);
}

.tsb-block{
  padding:1rem 1.2rem;
  border-bottom:1px solid rgba(123,47,255,.07);
  flex-shrink:0;
}
.tsb-label{
  font-family:var(--fo);font-size:.48rem;letter-spacing:.3em;
  color:rgba(123,47,255,.5);text-transform:uppercase;
  margin-bottom:.7rem;display:flex;align-items:center;gap:.5rem;
}
.tsb-label::after{content:'';flex:1;height:1px;background:rgba(123,47,255,.15)}

/* stat bars */
.tsb-stat{margin-bottom:.55rem}
.tsb-stat-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.2rem}
.tsb-stat-name{font-family:var(--fm);font-size:.6rem;color:var(--text-d);letter-spacing:.08em}
.tsb-stat-val{font-family:var(--fm);font-size:.6rem;color:var(--green);letter-spacing:.05em}
.tsb-bar-wrap{height:3px;background:rgba(255,255,255,.04);border-radius:2px;overflow:hidden}
.tsb-bar{height:100%;border-radius:2px;transition:width .8s cubic-bezier(.2,0,0,1)}
.tsb-bar.cpu{background:linear-gradient(to right,var(--pu-bright),var(--pu-glow))}
.tsb-bar.mem{background:linear-gradient(to right,var(--cyan),rgba(0,212,255,.6))}
.tsb-bar.net{background:linear-gradient(to right,var(--accent),rgba(255,45,120,.6))}
.tsb-bar.disk{background:linear-gradient(to right,var(--gold),rgba(255,215,0,.5))}

/* status pips */
.tsb-status-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
.tsb-pip{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.tsb-pip.green{background:var(--green);box-shadow:0 0 6px var(--green);animation:pip-pulse 2s infinite}
.tsb-pip.yellow{background:#febc2e;box-shadow:0 0 6px rgba(254,188,46,.8);animation:pip-pulse 3s infinite .5s}
.tsb-pip.red{background:#ff5f57;box-shadow:0 0 6px rgba(255,95,87,.8)}
@keyframes pip-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.tsb-status-text{font-family:var(--fm);font-size:.62rem;color:var(--text-d)}

/* live log */
.tsb-log{
  flex:1;overflow:hidden;position:relative;
  padding:.8rem 1.2rem;
  min-height:0;
}
.tsb-log-inner{
  display:flex;flex-direction:column;gap:.18rem;
  overflow:hidden;
  height:100%;
}
.tsb-log-entry{
  font-family:var(--fm);font-size:.58rem;line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:.7;
}
.tsb-log-entry.new{animation:log-slide .3s ease forwards}
@keyframes log-slide{from{opacity:0;transform:translateY(-6px)}to{opacity:.7;transform:none}}
.tsb-log-entry .lts{color:rgba(123,47,255,.5);margin-right:.4rem}
.tsb-log-entry .lmsg{color:#3a5a3a}
.tsb-log-entry.warn .lmsg{color:rgba(254,188,46,.7)}
.tsb-log-entry.ok .lmsg{color:rgba(57,255,20,.6)}
.tsb-log-entry.alert .lmsg{color:rgba(255,45,120,.7)}

/* hack progress bar (shown during hack cmd) */
.hack-progress-wrap{
  margin:.6rem 0;height:6px;
  background:rgba(255,255,255,.04);border-radius:3px;overflow:hidden;
  display:none;
}
.hack-progress-wrap.active{display:block}
.hack-progress-bar{
  height:100%;width:0%;border-radius:3px;
  background:linear-gradient(to right,var(--pu-bright),var(--accent),var(--cyan));
  box-shadow:0 0 10px var(--pu-glow);
  transition:width .15s linear;
}

/* ── MOBILE ── */
@media(max-width:900px){
  .term-layout{grid-template-columns:1fr;min-height:unset}
  .term-sidebar{display:none}
  .terminal-panel-outer{border-right:none}
  .term-section-header{padding:1.5rem 1.2rem .8rem}
  .term-section-tagline{display:none}
  .term-body{min-height:360px;max-height:420px;font-size:.78rem;padding:1rem 1.1rem}
  .term-help-strip{gap:0}
}

/* ═══════════════════════════════════════
   SECTION COMMON
══════════════════════════════════════ */
.section-inner{max-width:1100px;margin:0 auto;padding:6rem 2rem;position:relative}
.section-header{margin-bottom:4rem;display:flex;align-items:center;gap:1.5rem}
.section-num{font-family:var(--fm);font-size:.7rem;color:var(--pu-bright);letter-spacing:.2em}
.section-title{font-family:var(--fd);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:400;letter-spacing:.1em;color:var(--text)}
.section-title em{color:var(--pu-glow);font-style:normal;text-shadow:0 0 30px rgba(168,85,247,.5)}
.section-line{flex:1;height:1px;background:linear-gradient(to right,var(--bdr-b),transparent);position:relative;overflow:visible}
.section-line::after{content:'';position:absolute;left:0;top:-1px;width:40px;height:3px;background:linear-gradient(to right,var(--pu-bright),var(--accent));animation:line-scan 3s ease-in-out infinite;box-shadow:0 0 10px var(--pu-bright);will-change:transform}
@keyframes line-scan{0%{transform:translateX(0);opacity:1}80%{transform:translateX(calc(100vw - 40px));opacity:.5}100%{transform:translateX(calc(100vw - 40px));opacity:0}}

/* ═══════════════════════════════════════
   ABOUT
══════════════════════════════════════ */
#about{background:var(--bg3);position:relative;overflow:hidden}
#about::before{content:'VOID';position:absolute;right:-2rem;top:50%;transform:translateY(-50%) rotate(90deg);font-family:var(--fo);font-size:8rem;font-weight:900;color:rgba(123,47,255,.03);letter-spacing:.2em;pointer-events:none}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.about-text p{font-size:1.05rem;line-height:1.9;color:var(--text-m);margin-bottom:1.2rem}
.about-text p strong{color:var(--pu-pale);font-weight:400}
.about-text p em{color:var(--accent);font-style:italic}
.about-card{
  border:1px solid var(--bdr);background:rgba(123,47,255,.03);border-radius:4px;
  padding:1.8rem;position:relative;overflow:hidden;margin-bottom:1.5rem;
  transition:border-color .3s,box-shadow .3s;
}
.about-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(to right,var(--pu-bright),var(--accent))}
.about-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(123,47,255,.06),transparent);opacity:0;transition:opacity .3s;pointer-events:none}
.about-card:hover{border-color:var(--bdr-b);box-shadow:0 0 30px rgba(123,47,255,.1)}
.about-card:hover::after{opacity:1}
.about-card-title{font-family:var(--fu);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--pu-glow);margin-bottom:1.2rem;font-weight:700}
.about-list{list-style:none}
.about-list li{font-family:var(--fm);font-size:.8rem;color:var(--text-m);padding:.45rem 0;border-bottom:1px solid rgba(123,47,255,.07);display:flex;align-items:flex-start;gap:.75rem;line-height:1.5}
.about-list li::before{content:'▸';color:var(--pu-bright);font-size:.6rem;flex-shrink:0;margin-top:.15rem}
.about-list li:last-child{border-bottom:none}
.badge{font-size:.62rem;padding:.1rem .4rem;background:rgba(123,47,255,.12);border:1px solid rgba(123,47,255,.25);color:var(--pu-pale);border-radius:2px;margin-left:auto;flex-shrink:0}


/* ═══════════════════════════════════════
   SKILLS — AURA CARDS
══════════════════════════════════════ */
#skills{background:var(--bg2);position:relative;overflow:hidden}
#skills::before{content:'HACK';position:absolute;left:-1rem;top:50%;transform:translateY(-50%) rotate(-90deg);font-family:var(--fo);font-size:8rem;font-weight:900;color:rgba(255,45,120,.03);pointer-events:none}
.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}
.skill-card{
  border:1px solid var(--bdr);background:rgba(8,8,15,.95);
  padding:1.5rem;border-radius:4px;
  transition:border-color .3s,transform .4s cubic-bezier(.2,0,0,1),box-shadow .4s;
  position:relative;overflow:hidden;
}
/* Animated corner on hover */
.skill-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(123,47,255,.08),transparent);opacity:0;transition:opacity .3s}
.skill-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,var(--pu-bright),var(--accent),transparent);transform:scaleX(0);transition:transform .5s cubic-bezier(.2,0,0,1)}
.skill-card:hover{border-color:rgba(168,85,247,.5);transform:translateY(-6px) scale(1.01);box-shadow:0 20px 60px rgba(123,47,255,.2),0 0 0 1px rgba(168,85,247,.1)}
.skill-card:hover::before{opacity:1}
.skill-card:hover::after{transform:scaleX(1)}
/* Ki aura effect */
.skill-card:hover .skill-aura{opacity:1}
.skill-aura{position:absolute;inset:-20px;background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(168,85,247,.06),transparent);opacity:0;transition:opacity .4s;pointer-events:none;border-radius:50%}
.skill-cat{font-family:var(--fu);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--pu-bright);margin-bottom:1rem;font-weight:700}
.skill-name{font-family:var(--fu);font-size:1.1rem;color:var(--text);margin-bottom:.75rem;font-weight:600}
.skill-tags{display:flex;gap:.4rem;flex-wrap:wrap}
.skill-tag{font-family:var(--fm);font-size:.67rem;padding:.2rem .5rem;background:rgba(123,47,255,.1);border:1px solid rgba(123,47,255,.2);color:var(--pu-pale);border-radius:2px;transition:all .2s}
.skill-tag:hover{background:rgba(123,47,255,.2);border-color:rgba(168,85,247,.5);box-shadow:0 0 8px rgba(123,47,255,.3)}
.skill-bar-wrap{margin-top:1rem;height:2px;background:rgba(123,47,255,.1);border-radius:1px;position:relative;overflow:visible}
.skill-bar{height:100%;border-radius:1px;background:linear-gradient(to right,var(--pu-bright),var(--pu-glow),var(--cyan));transition:width 1.4s cubic-bezier(.2,0,0,1);width:0;box-shadow:0 0 8px var(--pu-bright)}
.skill-bar::after{content:'';position:absolute;right:0;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);opacity:0;transition:opacity .3s .5s}
.skill-card:hover .skill-bar::after{opacity:1}

/* ═══════════════════════════════════════
   CTF — NEON TABLE
══════════════════════════════════════ */
#ctf{background:var(--bg3);position:relative;overflow:hidden}
.ctf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:4rem}
.ctf-stat{
  text-align:center;padding:2.5rem 1rem;border:1px solid var(--bdr);
  background:rgba(123,47,255,.04);border-radius:4px;
  position:relative;overflow:hidden;transition:border-color .3s,box-shadow .3s;
}
.ctf-stat::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(123,47,255,.1),transparent 60%);opacity:0;transition:opacity .3s}
.ctf-stat:hover{border-color:var(--bdr-b);box-shadow:0 0 30px rgba(123,47,255,.15)}
.ctf-stat:hover::before{opacity:1}
.ctf-stat-num{
  font-family:var(--fd);font-size:3.5rem;font-weight:600;
  background:linear-gradient(135deg,var(--pu-glow),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1;filter:drop-shadow(0 0 20px rgba(168,85,247,.5));
}
.ctf-stat-label{font-family:var(--fu);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-d);margin-top:.5rem;font-weight:600}
.ctf-table-wrap{overflow-x:auto;margin-bottom:4rem;border:1px solid var(--bdr);border-radius:4px;box-shadow:0 0 30px rgba(123,47,255,.08)}
.ctf-table{width:100%;border-collapse:collapse;font-family:var(--fm);font-size:.82rem}
.ctf-table thead tr{border-bottom:1px solid var(--bdr-b);background:rgba(123,47,255,.05)}
.ctf-table th{padding:.7rem 1rem;text-align:left;font-family:var(--fu);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pu-glow);font-weight:700}
.ctf-table td{padding:.7rem 1rem;border-bottom:1px solid rgba(123,47,255,.07);color:var(--text-m);vertical-align:middle;transition:color .2s}
.ctf-table tr{transition:background .2s;position:relative}
.ctf-table tbody tr:hover td{background:rgba(123,47,255,.06);color:var(--text)}
.ctf-name{color:var(--text)!important;font-weight:500}
.ctf-badge{display:inline-block;font-family:var(--fu);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;padding:.2rem .6rem;border-radius:2px;font-weight:700}
.ctf-badge.national{background:rgba(255,45,120,.12);border:1px solid rgba(255,45,120,.4);color:var(--accent);box-shadow:0 0 8px rgba(255,45,120,.2)}
.ctf-badge.open{background:rgba(123,47,255,.12);border:1px solid var(--bdr-b);color:var(--pu-glow)}
.ctf-badge.win{background:rgba(40,200,64,.1);border:1px solid rgba(40,200,64,.4);color:#28c840;box-shadow:0 0 8px rgba(40,200,64,.2)}

/* ═══════════════════════════════════════
   PROJECTS — PREMIUM CARDS
══════════════════════════════════════ */
#projects{background:var(--bg2);position:relative}
.adlab-card{
  border:1px solid rgba(255,215,0,.25);
  background:linear-gradient(135deg,rgba(255,215,0,.03),rgba(123,47,255,.03));
  border-radius:4px;padding:2.5rem;margin-bottom:3rem;
  position:relative;overflow:hidden;
  transition:border-color .3s,box-shadow .3s;
  box-shadow:0 0 30px rgba(255,215,0,.05);
}
.adlab-card:hover{border-color:rgba(255,215,0,.4);box-shadow:0 0 50px rgba(255,215,0,.1)}
.adlab-card::before{content:'// AD HOME LAB — EGYPTIAN PANTHEON DOMAIN';position:absolute;top:1rem;right:1.5rem;font-family:var(--fm);font-size:.6rem;color:rgba(255,215,0,.2);letter-spacing:.15em}
.adlab-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,var(--gold),transparent)}
.adlab-title{font-family:var(--fd);font-size:1.6rem;color:var(--gold);letter-spacing:.12em;margin-bottom:.3rem;text-shadow:0 0 30px rgba(255,215,0,.4)}
.adlab-sub{font-family:var(--fm);font-size:.75rem;color:var(--text-m);margin-bottom:2rem}
.adlab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem;margin-bottom:2rem}
.adlab-node{border-radius:4px;padding:1.2rem;text-align:center;transition:transform .3s,box-shadow .3s}
.adlab-node:hover{transform:translateY(-4px)}
.adlab-node.dc{border:1px solid rgba(255,215,0,.4);background:rgba(255,215,0,.04)}
.adlab-node.dc:hover{box-shadow:0 0 20px rgba(255,215,0,.15)}
.adlab-node.user{border:1px solid rgba(123,47,255,.4);background:rgba(123,47,255,.04)}
.adlab-node.user:hover{box-shadow:0 0 20px rgba(123,47,255,.2)}
.adlab-node.svc{border:1px solid rgba(255,107,53,.4);background:rgba(255,107,53,.04)}
.adlab-node.svc:hover{box-shadow:0 0 20px rgba(255,107,53,.15)}
.adlab-node-icon{font-size:1.8rem;margin-bottom:.5rem}
.adlab-node-name{font-family:var(--fd);font-size:1rem;letter-spacing:.1em;margin-bottom:.2rem}
.adlab-node.dc .adlab-node-name{color:var(--gold)}
.adlab-node.user .adlab-node-name{color:var(--pu-pale)}
.adlab-node.svc .adlab-node-name{color:var(--accent2)}
.adlab-node-role{font-family:var(--fm);font-size:.62rem;color:var(--text-d)}
.adlab-section-title{font-family:var(--fu);font-size:.63rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:.8rem;font-weight:700}
.adlab-attacks{display:flex;flex-wrap:wrap;gap:.4rem}
.adlab-attack{font-family:var(--fm);font-size:.67rem;padding:.2rem .6rem;background:rgba(255,45,120,.07);border:1px solid rgba(255,45,120,.2);color:#ff6b9d;border-radius:2px;transition:all .2s}
.adlab-attack:hover{background:rgba(255,45,120,.15);border-color:rgba(255,45,120,.5);box-shadow:0 0 8px rgba(255,45,120,.2)}

.batman-series{
  margin-bottom:3rem;padding:2.5rem;
  border:1px solid rgba(255,45,120,.25);background:rgba(255,45,120,.02);
  border-radius:4px;position:relative;overflow:hidden;
  transition:border-color .3s,box-shadow .3s;
}
.batman-series:hover{border-color:rgba(255,45,120,.4);box-shadow:0 0 40px rgba(255,45,120,.08)}
.batman-series::before{content:'// GOTHAM CTF SERIES — BOOT2ROOT';position:absolute;top:1rem;right:1.5rem;font-family:var(--fm);font-size:.6rem;color:rgba(255,45,120,.2);letter-spacing:.15em}
.batman-series::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,var(--accent),transparent)}
.batman-title{font-family:var(--fd);font-size:1.5rem;color:var(--accent);margin-bottom:.3rem;letter-spacing:.15em;text-shadow:0 0 25px rgba(255,45,120,.4)}
.batman-sub{font-family:var(--fm);font-size:.75rem;color:var(--text-m);margin-bottom:2rem}
.batman-boxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:1rem}
.batman-box{padding:1.2rem;border-radius:4px;transition:transform .3s,box-shadow .3s}
.batman-box:hover{transform:translateY(-4px)}
.batman-box.easy{border:1px solid rgba(40,200,64,.3);background:rgba(40,200,64,.03)}
.batman-box.easy:hover{box-shadow:0 0 20px rgba(40,200,64,.1)}
.batman-box.med{border:1px solid rgba(254,188,46,.3);background:rgba(254,188,46,.03)}
.batman-box.med:hover{box-shadow:0 0 20px rgba(254,188,46,.1)}
.batman-box.hard{border:1px solid rgba(255,95,87,.3);background:rgba(255,95,87,.03)}
.batman-box.hard:hover{box-shadow:0 0 20px rgba(255,95,87,.1)}
.batman-box-num{font-family:var(--fd);font-size:1.5rem;margin-bottom:.3rem}
.batman-box.easy .batman-box-num{color:#28c840;text-shadow:0 0 10px rgba(40,200,64,.4)}
.batman-box.med .batman-box-num{color:#febc2e;text-shadow:0 0 10px rgba(254,188,46,.4)}
.batman-box.hard .batman-box-num{color:#ff5f57;text-shadow:0 0 10px rgba(255,95,87,.4)}
.batman-box-name{font-family:var(--fu);font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:.2rem}
.batman-box-diff{font-family:var(--fm);font-size:.63rem}
.batman-box.easy .batman-box-diff{color:#28c840}
.batman-box.med .batman-box-diff{color:#febc2e}
.batman-box.hard .batman-box-diff{color:#ff5f57}

.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem}
.project-card{
  border:1px solid var(--bdr);background:rgba(8,8,15,.95);
  border-radius:4px;overflow:hidden;
  transition:transform .4s cubic-bezier(.2,0,0,1),border-color .3s,box-shadow .3s;
}
.project-card:hover{transform:translateY(-8px) scale(1.01);border-color:var(--bdr-b);box-shadow:0 24px 60px rgba(123,47,255,.2)}
.project-card-top{height:3px;position:relative;overflow:hidden}
.project-card-top::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,transparent,white,transparent);transform:translateX(-100%);transition:transform .6s}
.project-card:hover .project-card-top::after{transform:translateX(100%)}
.project-card-body{padding:1.5rem}
.proj-difficulty{font-family:var(--fm);font-size:.67rem;letter-spacing:.15em;color:var(--pu-glow);margin-bottom:.4rem}
.proj-name{font-family:var(--fu);font-size:1.2rem;font-weight:700;color:var(--text);margin-bottom:.2rem;letter-spacing:.05em}
.proj-sub{font-family:var(--fm);font-size:.72rem;color:var(--accent);margin-bottom:1rem}
.proj-desc{font-size:.88rem;color:var(--text-m);line-height:1.7;margin-bottom:1rem}
.proj-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.proj-tag{font-family:var(--fm);font-size:.66rem;padding:.2rem .5rem;background:rgba(255,45,120,.07);border:1px solid rgba(255,45,120,.2);color:#ff6b9d;border-radius:2px}
.proj-link{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fu);font-size:.73rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--pu-glow);text-decoration:none;border:1px solid var(--bdr-b);padding:.3rem .8rem;border-radius:2px;transition:background .2s,box-shadow .2s}
.proj-link:hover{background:rgba(123,47,255,.15);box-shadow:0 0 15px rgba(123,47,255,.3)}

/* ═══════════════════════════════════════
   BLOG — CINEMATIC CARDS
══════════════════════════════════════ */
#blog{background:var(--bg3);position:relative}
.blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.blog-card{
  border:1px solid var(--bdr);border-radius:4px;padding:2rem;
  transition:border-color .3s,transform .3s,box-shadow .3s;
  position:relative;overflow:hidden;background:rgba(8,8,15,.6);
}
.blog-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(123,47,255,.04),transparent);opacity:0;transition:opacity .3s;pointer-events:none}
.blog-card:hover{border-color:var(--bdr-b);transform:translateY(-4px);box-shadow:0 20px 50px rgba(123,47,255,.12)}
.blog-card:hover::after{opacity:1}
.blog-card-accent{position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(to bottom,var(--pu-bright),transparent)}
.blog-cat{font-family:var(--fu);font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;color:var(--pu-bright);margin-bottom:.75rem;font-weight:700}
.blog-title{font-family:var(--fu);font-size:1.05rem;font-weight:700;color:var(--text);margin-bottom:.5rem;line-height:1.4}
.blog-excerpt{font-size:.88rem;color:var(--text-m);line-height:1.7;margin-bottom:1rem}
.blog-meta{font-family:var(--fm);font-size:.7rem;color:var(--text-d);display:flex;gap:1rem}
.blog-meta span{color:var(--pu-glow)}
.blog-soon{text-align:center;padding:3rem;font-family:var(--fm);font-size:.82rem;color:var(--text-d);border:1px dashed rgba(123,47,255,.2);border-radius:4px;grid-column:1/-1}
.blog-soon em{color:var(--pu-glow);font-style:normal}

/* ═══════════════════════════════════════
   HOBBIES — GLOWING TABS
══════════════════════════════════════ */
#taste{background:var(--bg2);position:relative}
.taste-tabs{display:flex;gap:.5rem;margin-bottom:2.5rem;flex-wrap:wrap}
.taste-tab{font-family:var(--fu);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;padding:.4rem 1.2rem;border:1px solid var(--bdr);color:var(--text-d);background:none;cursor:pointer;border-radius:2px;transition:all .2s;position:relative;overflow:hidden}
.taste-tab::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(123,47,255,.2),transparent);transform:translateX(-100%);transition:transform .3s}
.taste-tab.active,.taste-tab:hover{border-color:var(--bdr-b);color:var(--pu-glow);background:rgba(123,47,255,.08);box-shadow:0 0 15px rgba(123,47,255,.15)}
.taste-tab.active::before,.taste-tab:hover::before{transform:translateX(0)}
.taste-panel{display:none}
.taste-panel.active{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:1.2rem}
.taste-card{
  border:1px solid var(--bdr);background:rgba(8,8,15,.85);
  border-radius:4px;padding:1.4rem;
  transition:transform .3s,border-color .3s,box-shadow .3s;
  position:relative;overflow:hidden;
}
.taste-card::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 100%,rgba(123,47,255,.06),transparent);opacity:0;transition:opacity .4s;pointer-events:none}
.taste-card:hover{transform:translateY(-5px);border-color:var(--bdr-b);box-shadow:0 16px 40px rgba(123,47,255,.15)}
.taste-card:hover::after{opacity:1}
.taste-icon{font-size:1.8rem;margin-bottom:.8rem;filter:drop-shadow(0 0 8px rgba(168,85,247,.3))}
.taste-type{font-family:var(--fu);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--pu-bright);margin-bottom:.3rem;font-weight:700}
.taste-name{font-family:var(--fu);font-size:1rem;font-weight:700;color:var(--text);margin-bottom:.4rem}
.taste-note{font-size:.84rem;color:var(--text-m);line-height:1.6;font-style:italic}

/* ═══════════════════════════════════════
   CONTACT — PORTAL EFFECT
══════════════════════════════════════ */
#contact{background:var(--bg3);text-align:center;display:flex;align-items:center;justify-content:center;min-height:50vh;position:relative;overflow:hidden}
#contact::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(123,47,255,.06),transparent);pointer-events:none}
#contact .section-inner{display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}
.contact-intro{font-size:1.05rem;color:var(--text-m);max-width:500px;line-height:1.8;margin-bottom:3rem}
.contact-links{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center}
.contact-link{
  display:flex;align-items:center;gap:.75rem;
  padding:.75rem 2rem;border:1px solid var(--bdr-b);
  color:var(--pu-pale);text-decoration:none;
  font-family:var(--fu);font-size:.82rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  border-radius:2px;transition:background .2s,color .2s,box-shadow .3s,transform .2s;
  background:rgba(123,47,255,.06);position:relative;overflow:hidden;
}
.contact-link::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(123,47,255,.3),rgba(255,45,120,.1));transform:translateX(-100%);transition:transform .4s}
.contact-link:hover{background:rgba(123,47,255,.15);color:white;box-shadow:0 0 30px rgba(123,47,255,.4),0 0 60px rgba(123,47,255,.15);transform:translateY(-3px)}
.contact-link:hover::before{transform:translateX(0)}

.footer{background:var(--bg);padding:2rem;text-align:center;font-family:var(--fm);font-size:.7rem;color:var(--text-d);border-top:1px solid var(--bdr);position:relative}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,var(--pu-mid),var(--accent),var(--pu-mid),transparent)}
.footer em{color:var(--pu-bright);font-style:normal;text-shadow:0 0 10px rgba(123,47,255,.5)}

/* ═══════════════════════════════════════
   HAMBURGER + MOBILE MENU
══════════════════════════════════════ */
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.2rem;z-index:1100;background:none;border:none}
.nav-hamburger span{width:24px;height:2px;background:var(--pu-glow);border-radius:2px;transition:all .3s;display:block}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;background:rgba(5,5,8,.97);backdrop-filter:blur(20px);flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;font-family:var(--fm)}
.mobile-menu.open{display:flex}
.mobile-menu-prompt{font-size:.72rem;color:var(--pu-glow);letter-spacing:.3em;margin-bottom:.5rem}
.mobile-menu a{font-family:var(--fd);font-size:1.6rem;letter-spacing:.2em;color:var(--text-m);text-decoration:none;transition:color .2s;display:flex;align-items:center;gap:.75rem}
.mobile-menu a::before{content:'▸';font-size:.8rem;color:var(--pu-bright);font-family:var(--fm)}
.mobile-menu a:hover{color:var(--pu-glow)}

/* ═══════════════════════════════════════
   FULLSCREEN TERMINAL
══════════════════════════════════════ */


/* ═══════════════════════════════════════
   FLOATING PARTICLES (KI-SPARKS)
══════════════════════════════════════ */
.ki-spark{
  position:fixed;pointer-events:none;z-index:9997;
  width:3px;height:3px;border-radius:50%;
  background:var(--pu-glow);
  animation:ki-float 1.5s forwards;
}
@keyframes ki-float{
  0%{transform:translate(0,0) scale(1);opacity:.8}
  100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}
}

/* ═══════════════════════════════════════
   SECTION BG WATERMARKS
══════════════════════════════════════ */
.bg-watermark{
  position:absolute;font-family:var(--fo);font-weight:900;
  color:rgba(123,47,255,.025);pointer-events:none;letter-spacing:.1em;
  user-select:none;z-index:0;
}

/* ═══════════════════════════════════════
   CONTACT FORM
══════════════════════════════════════ */
.contact-form-wrap{text-align:left}
.contact-form-label{font-family:var(--fm);font-size:.68rem;color:var(--pu-glow);letter-spacing:.25em;text-transform:uppercase;margin-bottom:1rem;text-shadow:0 0 12px var(--pu-bright)}
.contact-form-box{border:1px solid var(--bdr-b);background:rgba(5,5,8,.85);border-radius:4px;padding:1.8rem;position:relative;overflow:hidden;backdrop-filter:blur(8px)}
.contact-form-box::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,var(--pu-bright),var(--accent),var(--cyan))}
.cf-field{margin-bottom:1.2rem}
.cf-label{display:block;font-family:var(--fu);font-size:.6rem;letter-spacing:.3em;color:var(--pu-glow);font-weight:700;margin-bottom:.5rem}
.cf-input{width:100%;background:rgba(123,47,255,.05);border:1px solid rgba(123,47,255,.25);color:var(--text);font-family:var(--fm);font-size:.85rem;padding:.6rem .9rem;border-radius:2px;outline:none;transition:border-color .2s,box-shadow .2s;resize:none}
.cf-input::placeholder{color:var(--text-d)}
.cf-input:focus{border-color:var(--pu-glow);box-shadow:0 0 16px rgba(123,47,255,.18)}
.cf-textarea{min-height:110px;line-height:1.6}
.cf-send{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--fu);font-size:.78rem;letter-spacing:.2em;font-weight:700;text-transform:uppercase;color:var(--bg);background:linear-gradient(135deg,var(--pu-bright),var(--accent));border:none;padding:.65rem 1.8rem;border-radius:2px;cursor:pointer;transition:opacity .2s,transform .2s,box-shadow .3s;box-shadow:0 0 20px rgba(123,47,255,.35)}
.cf-send:hover{opacity:.88;transform:translateY(-2px);box-shadow:0 0 30px rgba(123,47,255,.55)}
.cf-send:active{transform:translateY(0)}
.cf-send:disabled{opacity:.4;pointer-events:none}
.cf-status{margin-top:1rem;font-family:var(--fm);font-size:.78rem;padding:.5rem .9rem;border-radius:2px;animation:fadeUp .4s}
.cf-status.ok{background:rgba(57,255,20,.08);border:1px solid rgba(57,255,20,.3);color:var(--green)}
.cf-status.err{background:rgba(255,45,120,.08);border:1px solid rgba(255,45,120,.3);color:var(--accent)}

/* ═══════════════════════════════════════
   ROAMING FOX
══════════════════════════════════════ */
#roaming-fox{position:fixed;top:0;left:0;z-index:9995;pointer-events:none;width:64px;height:64px;will-change:transform;overflow:visible}
@keyframes fox-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ═══════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ═══════════════════════════════════════
   MASCOT IMAGE PLACEHOLDER
══════════════════════════════════════ */
.mascot-placeholder{
  position:relative;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(168,85,247,.18), rgba(123,47,255,.08) 60%, transparent);
  border:1px dashed rgba(168,85,247,.35);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;
  transition:border-color .3s, box-shadow .3s;
  overflow:hidden;
}
.mascot-placeholder::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(123,47,255,.12) 60deg, transparent 120deg);
  animation:mascot-spin 8s linear infinite;
}
@keyframes mascot-spin{to{transform:rotate(360deg)}}
.mascot-placeholder:hover{border-color:rgba(168,85,247,.7);box-shadow:0 0 30px rgba(123,47,255,.25)}
.mascot-placeholder-icon{font-size:2.4rem;filter:drop-shadow(0 0 10px rgba(168,85,247,.6));position:relative;z-index:1;animation:float 5s ease-in-out infinite}
.mascot-placeholder-label{
  font-family:var(--fm);font-size:.6rem;letter-spacing:.2em;
  color:rgba(168,85,247,.6);text-transform:uppercase;
  position:relative;z-index:1;text-align:center;padding:0 .5rem;line-height:1.5;
}
.mascot-placeholder-upload{
  font-family:var(--fm);font-size:.55rem;color:rgba(123,47,255,.45);
  border:1px dashed rgba(123,47,255,.25);padding:.2rem .6rem;border-radius:2px;
  position:relative;z-index:1;letter-spacing:.1em;margin-top:.2rem;
}

/* hero mascot is absolute positioned */
.hero-mascot-wrap{
  position:absolute;right:5%;bottom:5%;
  animation:float 5s ease-in-out infinite;z-index:2;
  filter:drop-shadow(0 0 20px rgba(168,85,247,.6)) drop-shadow(0 0 40px rgba(123,47,255,.3));
}
.hero-mascot-wrap .mascot-placeholder{width:220px;height:220px;}
@media(max-width:768px){
  .hero-mascot-wrap .mascot-placeholder{width:130px;height:130px;}
  .hero-mascot-wrap .mascot-placeholder-icon{font-size:1.8rem}
  .hero-mascot-wrap{right:2%;bottom:2%;opacity:.75}
  .hero-mascot-wrap .mascot-placeholder-label,.hero-mascot-wrap .mascot-placeholder-upload{display:none}
}

/* about mascot */
.fox-mascot-about{width:155px;height:155px;margin:0 auto 2rem;display:flex}
.fox-mascot-about .mascot-placeholder{width:155px;height:155px}
.fox-mascot-about .mascot-placeholder-icon{font-size:2rem}

/* ═══════════════════════════════════════
   MULTILINGUAL "BE" TAGLINE
══════════════════════════════════════ */
.be-word{
  color:var(--pu-pale);
  text-shadow:0 0 20px var(--pu-glow);
  display:inline-block;
  font-style:normal;
  position:relative;
  min-width:2.5ch;
  text-align:center;
  transition:color .1s;
}
.be-word.glitching{
  animation:be-glitch-run .35s steps(1) forwards;
}
@keyframes be-glitch-run{
  0%  {color:var(--cyan);   text-shadow:2px 0 var(--accent), -2px 0 var(--cyan);   transform:translateX(-3px) skewX(-8deg)}
  15% {color:var(--accent); text-shadow:-3px 0 var(--pu-glow), 3px 0 var(--accent);transform:translateX(3px)  skewX(6deg)}
  30% {color:white;         text-shadow:0 0 20px white;                              transform:translateX(-2px) skewX(-4deg)}
  50% {color:var(--pu-pale);text-shadow:2px 0 var(--cyan), -2px 0 var(--accent);   transform:translateX(2px)  skewX(3deg)}
  70% {color:var(--accent); text-shadow:0 0 8px var(--accent);                      transform:skewX(-2deg)}
  85% {color:var(--cyan);   text-shadow:0 0 8px var(--cyan);                        transform:skewX(1deg)}
  100%{color:var(--pu-pale);text-shadow:0 0 20px var(--pu-glow);                    transform:none}
}

/* ═══════════════════════════════════════
   DISCORD CONTACT LINK COLOR
══════════════════════════════════════ */
.contact-link.discord:hover{
  box-shadow:0 0 30px rgba(88,101,242,.5),0 0 60px rgba(88,101,242,.2);
  border-color:rgba(88,101,242,.6);
}
.contact-link.discord:hover::before{
  background:linear-gradient(135deg,rgba(88,101,242,.3),rgba(88,101,242,.1));
}

/* ═══════════════════════════════════════
   SMOOTHER CARD ANIMATIONS
══════════════════════════════════════ */
.skill-card,.project-card,.blog-card,.taste-card,.about-card,.batman-box,.adlab-node{
  will-change:transform;
}
.section-enter{
  transition:opacity .9s cubic-bezier(.2,0,0,1), transform .9s cubic-bezier(.2,0,0,1);
}


#scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:2000;background:linear-gradient(to right,var(--pu-bright),var(--accent),var(--cyan));transform:scaleX(0);transform-origin:left;will-change:transform;box-shadow:0 0 8px var(--pu-glow)}

/* ═══════════════════════════════════════
   BACK TO TOP BUTTON
══════════════════════════════════════ */
#back-to-top{
  position:fixed;bottom:2rem;right:2rem;z-index:1500;
  width:40px;height:40px;border-radius:50%;
  background:rgba(123,47,255,.15);border:1px solid var(--bdr-b);
  color:var(--pu-glow);font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s,box-shadow .3s,background .2s;
  backdrop-filter:blur(8px);
  font-family:var(--fm);
}
#back-to-top.visible{opacity:1;pointer-events:all}
#back-to-top:hover{background:rgba(123,47,255,.35);box-shadow:0 0 20px rgba(123,47,255,.5);transform:translateY(-3px)}

/* ═══════════════════════════════════════
   LOADING SCREEN
══════════════════════════════════════ */
#loader{
  position:fixed;inset:0;z-index:9000;
  background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.5rem;
  transition:opacity .6s ease, visibility .6s ease;
}
#loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
#loader canvas{position:absolute;inset:0;z-index:0;opacity:.4}
.loader-content{position:relative;z-index:1;text-align:center}
.loader-fox{font-size:3rem;animation:loader-bounce 1s ease-in-out infinite}
@keyframes loader-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.loader-text{font-family:var(--fo);font-size:.7rem;letter-spacing:.4em;color:var(--pu-glow);text-transform:uppercase;margin-top:.8rem;text-shadow:0 0 15px var(--pu-bright)}
.loader-bar-wrap{width:220px;height:2px;background:rgba(123,47,255,.2);border-radius:2px;overflow:hidden;margin-top:1rem}
.loader-bar{height:100%;width:0%;background:linear-gradient(to right,var(--pu-bright),var(--accent));border-radius:2px;transition:width .05s linear;box-shadow:0 0 10px var(--pu-glow)}
.loader-status{font-family:var(--fm);font-size:.65rem;color:var(--text-d);margin-top:.6rem;letter-spacing:.1em;min-height:1rem}

/* ═══════════════════════════════════════
   TYPEWRITER CURSOR
══════════════════════════════════════ */
.typewriter-cursor{display:inline-block;width:2px;height:1em;background:var(--pu-pale);margin-left:2px;vertical-align:middle;animation:blink-cursor .8s step-end infinite}
@keyframes blink-cursor{0%,100%{opacity:1}50%{opacity:0}}

/* ═══════════════════════════════════════
   COPY BADGE (terminal)
══════════════════════════════════════ */
.copy-badge{
  position:absolute;right:.75rem;top:.4rem;
  font-family:var(--fm);font-size:.6rem;letter-spacing:.1em;
  color:var(--text-d);cursor:pointer;border:1px solid rgba(123,47,255,.2);
  padding:.1rem .45rem;border-radius:2px;
  transition:color .2s,border-color .2s;user-select:none;
}
.copy-badge:hover{color:var(--pu-glow);border-color:var(--bdr-b)}
.copy-badge.copied{color:var(--green);border-color:rgba(57,255,20,.4)}

/* ═══════════════════════════════════════
   TERMINAL OUTPUT SELECTION GLOW
══════════════════════════════════════ */
.term-body ::selection{background:rgba(123,47,255,.35);color:white}

/* ═══════════════════════════════════════
   SECTION COUNTER GLOW PULSE
══════════════════════════════════════ */
.section-num{animation:num-pulse 4s ease-in-out infinite}
@keyframes num-pulse{0%,100%{opacity:.7}50%{opacity:1}}

/* ═══════════════════════════════════════
   CONTACT PORTAL RING
══════════════════════════════════════ */
.contact-portal-ring{
  position:absolute;width:400px;height:400px;border-radius:50%;
  border:1px solid rgba(123,47,255,.08);
  top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;animation:portal-spin 20s linear infinite;
}
.contact-portal-ring:nth-child(2){width:600px;height:600px;border-color:rgba(255,45,120,.05);animation-duration:30s;animation-direction:reverse}
.contact-portal-ring:nth-child(3){width:300px;height:300px;border-color:rgba(0,212,255,.06);animation-duration:15s}
@keyframes portal-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ═══════════════════════════════════════
   IMPROVED MOBILE
══════════════════════════════════════ */
@media(max-width:768px){
  nav{padding:.75rem 1.2rem}
  .nav-links{display:none}
  .nav-hamburger{display:flex}
  .nav-status{font-size:.6rem}
  .about-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .ctf-stats{grid-template-columns:1fr}
  
  .adlab-grid{grid-template-columns:1fr 1fr}
  .batman-boxes{grid-template-columns:1fr 1fr}
  .vhs-terminal .term-body{font-size:.78rem;line-height:1.6;min-height:320px;max-height:380px}
  .term-help-strip{gap:.7rem;font-size:.58rem}
  .section-inner{padding:4rem 1.2rem}
  .hero-name{font-size:clamp(4rem,18vw,8rem)}
  .projects-grid{grid-template-columns:1fr}
  #particleCanvas{opacity:.3}
  .contact-links{flex-direction:column;align-items:center}
  .contact-link{width:100%;max-width:280px;justify-content:center}
  #back-to-top{bottom:1.2rem;right:1.2rem;width:36px;height:36px;font-size:1rem}
  .taste-tabs{gap:.4rem}
  .taste-tab{padding:.35rem .8rem;font-size:.65rem}
  .copy-badge{display:none}
}

/* ═══════════════════════════════════════
   NEW VISUAL UPGRADES
══════════════════════════════════════ */

/* CURSOR VARIANTS — context aware */
.cursor.cursor-block{width:10px;height:18px;border-radius:1px;border:none;background:var(--green);mix-blend-mode:normal;box-shadow:0 0 12px var(--green),0 0 24px rgba(57,255,20,.3);animation:cursor-block-blink 1s steps(2) infinite}
.cursor.cursor-block::after{display:none}
@keyframes cursor-block-blink{0%,49%{opacity:1}50%,100%{opacity:.4}}
.cursor.cursor-link{width:42px;height:42px;border-color:var(--cyan);background:rgba(0,212,255,.06);mix-blend-mode:normal}
.cursor.cursor-link::before{content:'↗';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:.75rem;color:var(--cyan);text-shadow:0 0 6px var(--cyan)}
.cursor.cursor-fox{width:46px;height:46px;border:none;background:transparent;mix-blend-mode:normal}
.cursor.cursor-fox::before,.cursor.cursor-fox::after{display:none}
.cursor.cursor-fox-svg{position:fixed;width:32px;height:32px;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);font-size:1.4rem;line-height:1;text-shadow:0 0 12px var(--accent)}

/* PANTHEON ATTACK MAP */
.adlab-card{position:relative}
.adlab-network-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.6}
.adlab-network-svg .pn-line{stroke:rgba(255,215,0,.18);stroke-width:1;stroke-dasharray:4 6;fill:none;transition:stroke .4s,stroke-width .4s,opacity .4s}
.adlab-network-svg .pn-line.attack{stroke:var(--accent);stroke-width:2;stroke-dasharray:none;filter:drop-shadow(0 0 6px var(--accent))}
.adlab-network-svg .pn-line.gold{stroke:var(--gold);stroke-width:2;stroke-dasharray:none;filter:drop-shadow(0 0 8px var(--gold))}
.adlab-network-svg .pn-packet{r:2.5;fill:var(--cyan);filter:drop-shadow(0 0 6px var(--cyan))}
.adlab-network-svg .pn-packet.attack{fill:var(--accent);filter:drop-shadow(0 0 6px var(--accent))}
.adlab-grid{position:relative;z-index:1}
.adlab-node{position:relative;transition:transform .3s,box-shadow .4s,border-color .4s,background .4s}
.adlab-node.compromised{border-color:var(--accent)!important;background:rgba(255,45,120,.12)!important;box-shadow:0 0 30px rgba(255,45,120,.4)!important;animation:node-shake .4s}
.adlab-node.owned{border-color:var(--gold)!important;background:rgba(255,215,0,.15)!important;box-shadow:0 0 40px rgba(255,215,0,.45)!important}
.adlab-node.owned .adlab-node-icon{animation:node-owned-flash .8s}
@keyframes node-shake{0%,100%{transform:translate(0,0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-1px)}}
@keyframes node-owned-flash{0%{filter:brightness(1)}50%{filter:brightness(2.5) drop-shadow(0 0 20px var(--gold))}100%{filter:brightness(1)}}
.pn-status-tag{position:absolute;top:-12px;right:-8px;font-family:var(--fm);font-size:.55rem;letter-spacing:.1em;padding:.1rem .4rem;border-radius:2px;background:rgba(255,45,120,.95);color:white;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s;pointer-events:none;white-space:nowrap;z-index:5;text-shadow:none;box-shadow:0 0 10px rgba(255,45,120,.6)}
.pn-status-tag.show{opacity:1;transform:translateY(0)}
.pn-status-tag.gold{background:var(--gold);color:#1a0a00;box-shadow:0 0 14px rgba(255,215,0,.7)}

/* CTF STAT COUNTER */
.ctf-stat-num{transition:filter .2s}
.ctf-stat-num.counting{filter:drop-shadow(0 0 30px var(--accent)) drop-shadow(0 0 50px rgba(255,45,120,.5))}

/* HERO NAME — keep light. Parallax/intense state removed: they were the freeze culprits */
.hero-name{cursor:none}

/* SCRAMBLING TAGS */
.skill-tag,.adlab-attack,.proj-tag,.taste-card,.batman-box-name{position:relative}
.skill-tag[data-original],.adlab-attack[data-original],.proj-tag[data-original]{font-variant-numeric:tabular-nums}

/* TECHNIQUE TOOLTIP */
.tip-tooltip{
  position:fixed;z-index:5000;pointer-events:none;
  font-family:var(--fm);font-size:.7rem;letter-spacing:.04em;
  background:rgba(8,8,14,.97);border:1px solid var(--bdr-b);
  color:var(--pu-pale);padding:.5rem .75rem;border-radius:3px;
  max-width:280px;line-height:1.5;
  top:0;left:0;
  opacity:0;transform:translate(0,6px);transition:opacity .15s;
  will-change:transform;
  white-space:normal;
}
.tip-tooltip.show{opacity:1}
.tip-tooltip::before{content:'//';color:var(--accent);margin-right:.4rem;font-style:italic}

/* SECTION TITLE TYPEWRITER */
.section-title.tw-typing::after{content:'▌';color:var(--pu-glow);animation:blink-cursor .7s step-end infinite;margin-left:.1em}

/* HAX MODE — full CRT green takeover */
body.hax-mode{filter:hue-rotate(-90deg) saturate(1.6) contrast(1.15);transition:filter .8s}
body.hax-mode::after{content:'';position:fixed;inset:0;z-index:9990;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0,rgba(0,0,0,.18) 1px,transparent 1px,transparent 3px),radial-gradient(ellipse at center,transparent 50%,rgba(0,40,0,.25) 100%);mix-blend-mode:multiply;animation:hax-flicker .12s steps(2) infinite}
@keyframes hax-flicker{0%,100%{opacity:.95}50%{opacity:1}}
.hax-banner{position:fixed;top:80px;left:50%;transform:translateX(-50%);z-index:9991;font-family:var(--fm);font-size:.78rem;color:var(--green);background:rgba(0,20,0,.85);border:1px solid var(--green);padding:.5rem 1.2rem;letter-spacing:.2em;box-shadow:0 0 20px rgba(57,255,20,.5);text-shadow:0 0 8px var(--green);animation:hax-banner-glitch .3s steps(2) infinite}
@keyframes hax-banner-glitch{0%,90%,100%{transform:translateX(-50%)}93%{transform:translateX(calc(-50% + 2px))}96%{transform:translateX(calc(-50% - 2px))}}

/* FLOATING TOAST NOTIFICATIONS */
.fox-toast-container{position:fixed;bottom:1.2rem;left:1.2rem;z-index:1400;display:flex;flex-direction:column;gap:.5rem;pointer-events:none;max-width:340px}
.fox-toast{font-family:var(--fm);font-size:.7rem;line-height:1.5;background:rgba(8,8,14,.96);border:1px solid var(--bdr-b);border-left:3px solid var(--pu-glow);color:var(--text);padding:.55rem .9rem;border-radius:2px;transform:translateX(-120%);opacity:0;transition:transform .35s cubic-bezier(.2,0,0,1),opacity .35s;letter-spacing:.04em}
.fox-toast.show{transform:translateX(0);opacity:1}
.fox-toast .ft-tag{color:var(--pu-glow);margin-right:.4rem;font-weight:600}
.fox-toast.warn{border-left-color:#febc2e}
.fox-toast.warn .ft-tag{color:#febc2e}
.fox-toast.alert{border-left-color:var(--accent)}
.fox-toast.alert .ft-tag{color:var(--accent)}
.fox-toast.gold{border-left-color:var(--gold)}
.fox-toast.gold .ft-tag{color:var(--gold)}
@media(max-width:768px){.fox-toast-container{bottom:5rem;left:.8rem;right:.8rem;max-width:none}}

/* SPEED LINES ON FAST SCROLL */
.scroll-speed-overlay{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:0;transition:opacity .15s}
.scroll-speed-overlay.active{opacity:.7}
.scroll-speed-overlay svg{width:100%;height:100%}
.scroll-speed-overlay line{stroke:var(--pu-bright);stroke-width:1;opacity:.5}

/* ASCII PROGRESS BAR FOR LOADER */
.loader-ascii-bar{font-family:var(--fm);font-size:.8rem;color:var(--pu-glow);letter-spacing:.05em;margin-top:.8rem;text-shadow:0 0 10px var(--pu-bright);min-height:1.4rem;white-space:pre}
.loader-press-key{font-family:var(--fm);font-size:.7rem;color:var(--green);letter-spacing:.2em;margin-top:.5rem;animation:blink-cursor .5s step-end infinite;min-height:1rem;text-shadow:0 0 8px var(--green)}

/* WATERMARK — kept static, breathing animation removed (was a noop and wasting frames) */

/* HERO SVG SPEED LINES — pulse only (rotation removed, was perpetual and barely visible) */

/* BE WORD — slot machine feel */
.be-word{transform-style:preserve-3d;perspective:600px}
.be-word.flipping{animation:be-flip .35s ease-in}
@keyframes be-flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}51%{transform:rotateX(-90deg)}100%{transform:rotateX(0)}}

/* GOTHAM BOX ICONS */
.batman-box{position:relative}
.batman-box::before{content:'';position:absolute;top:.7rem;right:.8rem;font-family:var(--fd);font-size:1rem;opacity:.35;transition:opacity .3s,transform .3s}
.batman-box:hover::before{opacity:1;transform:scale(1.2)}
.batman-box.easy::before{content:'>:3';filter:hue-rotate(60deg) saturate(.6)}
.batman-box.med:nth-of-type(2)::before{content:'?';color:#febc2e;font-size:1.5rem;font-weight:900}
.batman-box.med:nth-of-type(3)::before{content:'J';color:#febc2e;font-style:italic;font-size:1.4rem;font-weight:700;font-family:var(--fd)}
.batman-box.hard::before{content:'☠';color:#ff5f57;font-size:1.4rem}

/* DEV MODE PANEL */
#dev-mode-panel{position:fixed;top:60px;right:1rem;z-index:1500;background:rgba(8,8,14,.97);border:1px solid var(--accent);border-radius:3px;padding:.7rem 1rem;font-family:var(--fm);font-size:.65rem;color:var(--accent);letter-spacing:.05em;max-width:240px;line-height:1.7;display:none}
#dev-mode-panel.show{display:block;animation:fadeUp .3s}
#dev-mode-panel .dmp-title{color:var(--gold);letter-spacing:.2em;font-size:.6rem;margin-bottom:.4rem;text-transform:uppercase}
#dev-mode-panel .dmp-row{display:flex;justify-content:space-between;gap:.6rem}
#dev-mode-panel .dmp-row span:last-child{color:var(--green)}

/* CRT TEAR — when red dot clicked */
.crt-tear{position:absolute;inset:0;z-index:20;pointer-events:none;background:linear-gradient(180deg,transparent 0%,transparent 48%,white 49%,white 51%,transparent 52%,transparent 100%);mix-blend-mode:difference;opacity:0}
.crt-tear.active{animation:crt-tear-anim .6s ease-out}
@keyframes crt-tear-anim{0%{opacity:0;transform:translateY(-100%)}10%{opacity:1}50%{opacity:.8}100%{opacity:0;transform:translateY(100%)}}

/* FOX DASH — across viewport easter egg */
.fox-dash{position:fixed;bottom:30%;left:-100px;z-index:9990;font-family:var(--fm);font-size:1.6rem;color:var(--accent);text-shadow:0 0 18px var(--accent),0 0 36px rgba(255,45,120,.5);pointer-events:none;white-space:nowrap;letter-spacing:.05em;animation:fox-dash-run 2.4s cubic-bezier(.4,0,.2,1) forwards}
@keyframes fox-dash-run{0%{left:-200px;transform:scaleX(1)}45%{transform:scaleX(1)}50%{transform:scaleX(1)}100%{left:calc(100% + 200px);transform:scaleX(1)}}

/* SHATTER */
.hero-name.shatter{animation:hero-shatter 1.2s cubic-bezier(.6,0,.2,1)}
@keyframes hero-shatter{0%{transform:scale(1);filter:drop-shadow(0 0 40px rgba(123,47,255,.6))}20%{transform:scale(1.06);filter:drop-shadow(0 0 80px rgba(255,45,120,.9))}21%{transform:scale(1.06) skewX(20deg);filter:blur(6px) drop-shadow(0 0 80px rgba(255,45,120,.9))}25%{transform:scale(.4);filter:blur(20px) drop-shadow(0 0 100px var(--accent));opacity:0}26%{opacity:0;transform:scale(2);filter:blur(40px)}60%{opacity:.5;transform:scale(1.1);filter:blur(8px) drop-shadow(0 0 80px var(--cyan))}100%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 40px rgba(123,47,255,.6))}}

/* MASCOT — eye tracking */
.hero-mascot-wrap .mascot-placeholder{transition:transform .25s cubic-bezier(.2,0,0,1)}

/* TYPE-ANYWHERE HINT */
.type-hint{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);z-index:1300;font-family:var(--fm);font-size:.65rem;color:var(--text-d);letter-spacing:.15em;background:rgba(8,8,14,.92);padding:.35rem .8rem;border:1px solid var(--bdr);border-radius:2px;opacity:0;transition:opacity .3s;pointer-events:none}
.type-hint.show{opacity:.7}

/* NUMBER KEY HINT */
.numkey-hint{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9000;font-family:var(--fd);font-size:6rem;color:var(--pu-glow);text-shadow:0 0 40px var(--pu-bright),0 0 80px var(--pu-bright);pointer-events:none;opacity:0;animation:numkey-pop .7s ease-out forwards;letter-spacing:.1em}
@keyframes numkey-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}}

/* HACK GRAPH IN TERMINAL */
.hack-graph{font-family:var(--fm);font-size:.72rem;line-height:1.4;color:var(--pu-glow);white-space:pre;margin:.6rem 0;padding:.6rem;border:1px solid rgba(123,47,255,.2);border-radius:2px;background:rgba(123,47,255,.04);min-height:7rem}
.hack-graph .hg-node{color:var(--text-m);transition:color .3s,text-shadow .3s}
.hack-graph .hg-node.hot{color:var(--accent);text-shadow:0 0 8px var(--accent)}
.hack-graph .hg-node.owned{color:var(--gold);text-shadow:0 0 10px var(--gold)}
.hack-graph .hg-line{color:rgba(123,47,255,.4)}
.hack-graph .hg-line.active{color:var(--accent)}

/* ODD PROCESSES */
.term-output.boot{color:#7eff7e}

/* RESPECT prefers-reduced-motion — kills the most expensive ambient animations */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .cursor,.cursor-block,.hax-banner,.fox-dash,#particleCanvas{display:none!important}
}

/* ═══════════════════════════════════════
   MOBILE PERFORMANCE — DISABLE HEAVY EFFECTS
══════════════════════════════════════ */
@media(max-width:768px){
  /* Kill particle canvas entirely — biggest perf win on mobile */
  #particleCanvas{display:none!important}
  /* Kill spinning speed lines — continuous rotation on mobile */
  .term-speedlines{display:none}
  /* Kill ambient orb float animations */
  .hero-orb{animation:none!important}
  /* Kill hero grid drift — continuous translate repaint */
  .hero-bg-grid{animation:none!important}
  /* Kill speedlines pulse */
  .hero-speedlines{display:none}
  /* No backdrop blur on mobile nav — extremely expensive on mobile GPUs */
  nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(5,5,8,.97)!important}
  #back-to-top{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  /* Reduce will-change scope */
  .skill-card,.project-card,.blog-card,.taste-card,.about-card,.batman-box,.adlab-node,
  .hero-bg-grid,.section-line::after{will-change:auto!important}
  /* Kill nav scan animation */
  nav::after{animation:none!important}
  /* Kill portal rings */
  .contact-portal-ring{animation:none!important}
  .section-line::after{animation:none!important;width:40px!important}
  /* Remove roaming fox on mobile — causes layout thrash every frame */
  #roaming-fox{display:none!important}
  /* Disable glitch pseudo-elements on hero name — heavy clip-path */
  .glitch::before,.glitch::after{display:none!important}
  /* Reduce orb sizes */
  .orb1{width:300px;height:300px}
  .orb2{width:200px;height:200px}
  .orb3{display:none}
  /* Prevent iOS scroll-jank from smooth-scroll conflicts */
  html{scroll-behavior:auto}
  /* Native momentum scroll on terminal */
  .vhs-terminal .term-body{-webkit-overflow-scrolling:touch;touch-action:pan-y}
  /* Kill cursor ring animation */
  .cursor::after{animation:none}
  /* Disable number-keys section jump since keyboard doesn't show on mobile */
  .numkey-hint{display:none}
}


/* ═══════════════════════════════════════
   COMPREHENSIVE RESPONSIVE OVERHAUL
══════════════════════════════════════ */

/* ── Tablet (≤1024px) ── */
@media(max-width:1024px){
  .skills-grid{grid-template-columns:1fr 1fr}
  .about-grid{gap:2.5rem}
  .projects-grid{grid-template-columns:1fr 1fr}
  .ctf-stats{gap:1.5rem}
  .blog-grid{grid-template-columns:1fr}
  nav{padding:.9rem 1.8rem}
  .adlab-grid{grid-template-columns:1fr 1fr 1fr}
  .taste-panel{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .term-layout{grid-template-columns:1fr 260px}
}

/* ── Mobile (≤768px) ── */
@media(max-width:768px){
  body{cursor:auto}
  .cursor,.cursor-trail{display:none}

  /* Nav */
  nav{padding:.7rem 1rem}
  .nav-logo{font-size:1.1rem;letter-spacing:.2em}
  .nav-links{display:none}
  .nav-hamburger{display:flex}
  .nav-status{font-size:.58rem;gap:.35rem}

  /* Hero */
  #hero{padding:5rem 1rem 3rem;text-align:center}
  .hero-name{font-size:clamp(3.5rem,18vw,7rem)}
  .hero-tags{gap:.5rem;padding:0 .5rem}
  .hero-tag{font-size:.65rem;padding:.25rem .7rem}
  .hero-eyebrow{font-size:.65rem}
  .hero-tagline{font-size:clamp(.9rem,3.5vw,1.2rem)}
  .hero-mascot-wrap{display:none}
  .scroll-hint{display:none}

  /* Sections */
  .section-inner{padding:3.5rem 1rem}
  .section-header{gap:1rem;margin-bottom:2.5rem}
  .section-title{font-size:clamp(1.4rem,6vw,2rem)}

  /* About */
  .about-grid{grid-template-columns:1fr;gap:2rem}
  .about-text p{font-size:.95rem}
  .fox-mascot-about{width:110px;height:110px}
  .fox-mascot-about .mascot-placeholder{width:110px;height:110px}

  /* Skills */
  .skills-grid{grid-template-columns:1fr}
  .skill-card{padding:1.4rem}
  .skill-name{font-size:1rem}
  .skill-tags{gap:.35rem}
  .skill-tag{font-size:.65rem;padding:.2rem .55rem}

  /* CTF */
  .ctf-stats{grid-template-columns:repeat(3,1fr);gap:.8rem}
  .ctf-stat-num{font-size:clamp(2rem,8vw,3.5rem)}
  .ctf-stat-label{font-size:.6rem}
  .ctf-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ctf-table{font-size:.72rem;min-width:500px}
  .ctf-table th,.ctf-table td{padding:.6rem .5rem}

  /* Projects */
  .projects-grid{grid-template-columns:1fr}
  .proj-link{font-size:.7rem;padding:.5rem 1rem}

  /* Blog */
  .blog-grid{grid-template-columns:1fr}

  /* Taste */
  .taste-tabs{gap:.35rem}
  .taste-tab{font-size:.62rem;padding:.3rem .7rem}
  .taste-panel{grid-template-columns:1fr 1fr}
  .taste-card{padding:1.1rem}

  /* AD Lab */
  .adlab-grid{grid-template-columns:1fr 1fr}
  .adlab-node{padding:.9rem .7rem}

  /* Batman boxes */
  .batman-boxes{grid-template-columns:1fr 1fr}

  /* Contact */
  .contact-intro{font-size:.9rem}
  .contact-links{flex-direction:column;align-items:center;gap:1rem}
  .contact-link{width:100%;max-width:300px;justify-content:center}
  .contact-form-box{padding:1.2rem}

  /* Footer */
  .footer{font-size:.65rem;padding:1.5rem 1rem}

  /* Toast */
  .fox-toast-container{bottom:4.5rem;left:.6rem;right:.6rem;max-width:none}

  /* Particles lighter */
  #particleCanvas{opacity:.2}
}

/* ── Small Mobile (≤480px) ── */
@media(max-width:480px){
  .hero-name{font-size:clamp(3rem,20vw,5.5rem)}
  .hero-tags{gap:.4rem}
  .hero-tag{font-size:.6rem;padding:.2rem .6rem}

  .ctf-stats{grid-template-columns:1fr}
  .ctf-stat{padding:1.2rem}

  .adlab-grid{grid-template-columns:1fr}
  .batman-boxes{grid-template-columns:1fr}
  .taste-panel{grid-template-columns:1fr}

  .skills-grid{grid-template-columns:1fr}
  .section-inner{padding:3rem .8rem}

  .contact-link{font-size:.75rem;padding:.65rem 1.2rem}

  nav{padding:.65rem .8rem}
  .nav-logo{font-size:1rem;letter-spacing:.15em}
  .nav-status{display:none}

  .about-list li{font-size:.76rem}
  .badge{font-size:.58rem}
}

/* ── Landscape phone ── */
@media(max-width:768px) and (orientation:landscape){
  #hero{min-height:auto;padding:4rem 1.5rem 2rem}
  .hero-name{font-size:clamp(2.5rem,10vw,5rem)}
  .section-inner{padding:2.5rem 1.5rem}
}

/* ═══════════════════════════════════════
   ANIME PEEKERS — peek-a-boo girls
══════════════════════════════════════ */
.anime-peeker {
  position: fixed;
  z-index: 500;
  pointer-events: none;
  will-change: transform;
}

.anime-peeker img {
  display: block;
  width: var(--pk-w, 180px);
  height: auto;
  filter:
    drop-shadow(-3px 0 14px rgba(123,47,255,0.7))
    drop-shadow(0 -3px 14px rgba(168,85,247,0.4));
  transition: filter .3s;
}

/* ── BOTTOM-RIGHT corner ── */
.anime-peeker.pos-bottom-right {
  bottom: 0;
  right: clamp(20px, 4vw, 60px);
  transform: translateY(102%);
  transform-origin: bottom center;
  transition: transform .65s cubic-bezier(0.34, 1.45, 0.64, 1);
}
.anime-peeker.pos-bottom-right.peeking {
  transform: translateY(38%);   /* show head + shoulders */
}

/* ── BOTTOM-LEFT corner ── */
.anime-peeker.pos-bottom-left {
  bottom: 0;
  left: clamp(20px, 4vw, 60px);
  transform: translateY(102%);
  transform-origin: bottom center;
  transition: transform .65s cubic-bezier(0.34, 1.45, 0.64, 1);
}
.anime-peeker.pos-bottom-left.peeking {
  transform: translateY(38%);
}

/* ── RIGHT side ── */
.anime-peeker.pos-right {
  right: 0;
  top: clamp(40%, 45%, 55%);
  transform: translate(102%, -50%);
  transform-origin: right center;
  transition: transform .65s cubic-bezier(0.34, 1.45, 0.64, 1);
}
.anime-peeker.pos-right.peeking {
  transform: translate(35%, -50%);  /* peek left edge */
}

/* ── LEFT side ── */
.anime-peeker.pos-left {
  left: 0;
  top: clamp(35%, 40%, 50%);
  transform: translate(-102%, -50%);
  transform-origin: left center;
  transition: transform .65s cubic-bezier(0.34, 1.45, 0.64, 1);
}
.anime-peeker.pos-left.peeking {
  transform: translate(-35%, -50%);
}

/* ── Cute idle wobble while peeking ── */
@keyframes pk-wobble {
  0%,100% { rotate: 0deg; }
  20%     { rotate: -2.5deg; }
  60%     { rotate: 2deg; }
  80%     { rotate: -1deg; }
}
@keyframes pk-bob {
  0%,100% { translate: 0 0; }
  50%     { translate: 0 -6px; }
}
.anime-peeker.peeking img {
  animation:
    pk-wobble 2.8s ease-in-out infinite,
    pk-bob    3.2s ease-in-out infinite;
}

/* ── Blinking eyes sparkle effect (optional flair) ── */
.anime-peeker.peeking::after {
  content: '✦';
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: .7rem;
  color: var(--pu-glow);
  animation: pk-sparkle 1.8s ease-in-out infinite;
  pointer-events: none;
  text-shadow: 0 0 8px var(--pu-bright);
}
@keyframes pk-sparkle {
  0%,100% { opacity: 0; transform: scale(.6) rotate(0deg); }
  50%     { opacity: 1; transform: scale(1.2) rotate(20deg); }
}

/* ── Retreat: snap back faster than entrance ── */
.anime-peeker:not(.peeking) {
  transition: transform .45s cubic-bezier(0.55, 0, 0.6, 1) !important;
}

/* ── Mobile: smaller & only bottom positions ── */
@media (max-width: 768px) {
  .anime-peeker { --pk-w: 110px; }
  .anime-peeker.pos-right,
  .anime-peeker.pos-left { display: none; }
  .anime-peeker.pos-bottom-right { right: 10px; }
  .anime-peeker.pos-bottom-left  { left:  10px; }
}