/* === Reset & Variables === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --cyan:#00f0ff;--magenta:#ff00e5;--green:#39ff14;
  --bg:#06060e;--bg2:#0c0c18;--card:rgba(12,12,24,0.7);
  --text:#c8c8e0;--text2:#6a6a8a;
  --glow:rgba(0,240,255,0.25);--glow2:rgba(255,0,229,0.15);
  --speed:0.5s;
}
[data-theme="light"]{
  --cyan:#0070cc;--magenta:#b800a0;--green:#008844;
  --bg:#eef0f5;--bg2:#dde0ea;--card:rgba(255,255,255,0.75);
  --text:#1a1a30;--text2:#5a5a7a;
  --glow:rgba(0,112,204,0.2);--glow2:rgba(184,0,160,0.1);
}
[data-theme="light"] .hero-name-zh{
  background:linear-gradient(135deg,var(--cyan) 0%,#1a1a30 50%,var(--cyan) 100%);
  background-size:200% 200%;-webkit-background-clip:text;background-clip:text;
}
html{scroll-behavior:smooth;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{
  font-family:'SF Mono','Fira Code','Courier New',monospace;
  background:var(--bg);color:var(--text);
  overflow-x:hidden;transition:background var(--speed),color var(--speed);
}

/* === Canvas & Overlays === */
#bg{position:fixed;inset:0;z-index:0;pointer-events:none}
body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,240,255,0.02) 0px,transparent 1px,transparent 3px);
  opacity:0.4;
}
.theme-wipe{
  position:fixed;inset:0;z-index:9998;pointer-events:none;
  clip-path:circle(0% at 50% 50%);
  transition:clip-path 0.6s cubic-bezier(0.4,0,0.2,1);
}
.theme-wipe.active{clip-path:circle(150% at var(--x,50%) var(--y,50%))}

/* === Nav === */
nav{position:fixed;top:0;width:100%;z-index:100;padding:1.2rem 2rem;transition:background 0.3s,backdrop-filter 0.3s}
nav.scrolled{background:rgba(6,6,14,0.6);backdrop-filter:blur(20px)}
[data-theme="light"] nav.scrolled{background:rgba(238,240,245,0.6)}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
.nav-links{display:flex;gap:2rem}
.nav-links a{
  color:var(--text2);text-decoration:none;font-size:0.8rem;
  letter-spacing:3px;text-transform:uppercase;position:relative;padding:4px 0;transition:color 0.3s;
}
.nav-links a::before{content:'';position:absolute;bottom:0;left:50%;width:0;height:1px;background:var(--cyan);transition:all 0.3s;transform:translateX(-50%)}
.nav-links a:hover{color:var(--cyan)}
.nav-links a:hover::before{width:100%}
.theme-btn{
  background:none;border:1px solid var(--glow);width:36px;height:36px;border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--text);transition:all 0.3s;
}
.theme-btn:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 20px var(--glow)}
.moon-icon{display:none}
[data-theme="light"] .sun-icon{display:none}
[data-theme="light"] .moon-icon{display:block}

/* === Hero === */
section{position:relative;z-index:1}
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem;position:relative}
.hero-hud-ring{
  position:absolute;width:min(500px,80vw);height:min(500px,80vw);
  border:2px dashed var(--glow);border-radius:50%;animation:spin 30s linear infinite;opacity:0.5;
}
.hero-hud-ring::before,.hero-hud-ring::after{content:'';position:absolute;border-radius:50%}
.hero-hud-ring::before{inset:30px;border:2px dotted var(--glow);animation:spin 20s linear infinite reverse}
.hero-hud-ring::after{inset:60px;border:3px dashed var(--glow);border-top-color:transparent;border-left-color:transparent;animation:spin 15s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-content{position:relative;z-index:2}
.hero-greeting{font-size:0.8rem;letter-spacing:6px;color:var(--green);margin-bottom:1.5rem;animation:flicker 4s infinite;transition:color var(--speed)}
@keyframes flicker{0%,92%,94%,96%,100%{opacity:1}93%,95%{opacity:0.4}}
.hero h1{margin-bottom:1rem}
.hero-name-zh{
  display:block;font-size:clamp(3rem,10vw,6rem);font-weight:900;letter-spacing:0.15em;
  background:linear-gradient(135deg,var(--cyan) 0%,#ffffff 50%,var(--cyan) 100%);
  background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:gshift 4s ease infinite;filter:drop-shadow(0 0 40px var(--glow)) drop-shadow(0 0 80px var(--glow));transition:filter var(--speed);
}
@keyframes gshift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-name-en{display:block;font-size:clamp(0.7rem,2vw,1rem);letter-spacing:0.5em;color:var(--text2);margin-top:0.5rem;transition:color var(--speed)}
.hero-tagline{display:flex;align-items:center;gap:1rem;justify-content:center;margin-top:1.5rem;font-size:0.85rem;color:var(--text2);letter-spacing:2px}
.tagline-line{width:40px;height:1px;background:var(--glow)}
.cursor{color:var(--cyan);animation:blink .8s infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.hero-coords{margin-top:2rem;display:flex;gap:2rem;justify-content:center;font-size:0.65rem;letter-spacing:2px;color:var(--text2)}
.hero-coords em{color:var(--green);font-style:normal}
.scroll-indicator{position:absolute;bottom:2rem;display:flex;flex-direction:column;align-items:center;gap:0.5rem}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--cyan),transparent);animation:spulse 2s infinite}
@keyframes spulse{0%,100%{opacity:0.3;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.2)}}
.scroll-indicator span{font-size:0.6rem;letter-spacing:4px;color:var(--text2)}

/* === Reveal === */
[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity 0.8s cubic-bezier(.16,1,.3,1),transform 0.8s cubic-bezier(.16,1,.3,1)}
[data-reveal].visible{opacity:1;transform:translateY(0)}

/* === Section Label === */
.section-label{display:flex;align-items:center;gap:1rem;max-width:1100px;margin:0 auto 3rem;padding:0 1rem}
.label-index{font-size:0.7rem;color:var(--cyan);letter-spacing:2px}
.label-line{flex:1;height:1px;background:linear-gradient(90deg,var(--glow),transparent)}
.label-text{font-size:0.75rem;letter-spacing:4px;color:var(--text2)}

/* === Skills === */
.skills{padding:8rem 2rem}
.skills-orbit{width:200px;height:200px;margin:0 auto 4rem;position:relative;display:flex;align-items:center;justify-content:center}
.orbit-center{
  width:80px;height:80px;border-radius:50%;border:1px solid var(--glow);
  display:flex;align-items:center;justify-content:center;
  background:var(--card);backdrop-filter:blur(10px);position:relative;z-index:2;
}
.orbit-core-text{font-size:0.55rem;letter-spacing:2px;color:var(--cyan);text-align:center;line-height:1.6}
.skills-orbit::before,.skills-orbit::after{content:'';position:absolute;border-radius:50%;border:1px solid var(--glow);opacity:0.4}
.skills-orbit::before{inset:-20px;animation:spin 15s linear infinite}
.skills-orbit::after{inset:-50px;animation:spin 25s linear infinite reverse}

/* Skill Cards */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;max-width:1100px;margin:0 auto}
.skill-card{
  background:var(--card);border:1px solid var(--glow);padding:2rem;
  position:relative;overflow:hidden;backdrop-filter:blur(10px);
  transition:all 0.4s,background var(--speed),border-color var(--speed);
  cursor:default;transform-style:preserve-3d;perspective:800px;
}
.skill-card .card-glow{
  position:absolute;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,var(--glow) 0%,transparent 70%);
  opacity:0;transition:opacity 0.4s;pointer-events:none;
  transform:translate(-50%,-50%);
}
.skill-card:hover .card-glow{opacity:1}
.skill-card:hover{border-color:var(--cyan);box-shadow:0 0 60px rgba(0,240,255,0.15),inset 0 0 40px rgba(0,240,255,0.05);transform:translateY(-4px)}
.card-number{position:absolute;top:1rem;right:1.2rem;font-size:0.6rem;color:var(--text2);letter-spacing:2px;opacity:0.4}
.card-icon{color:var(--cyan);margin-bottom:1rem;transition:color var(--speed)}
.skill-card h3{color:var(--cyan);font-size:0.9rem;letter-spacing:3px;margin-bottom:0.6rem;transition:color var(--speed)}
.skill-card p{color:var(--text2);font-size:0.78rem;line-height:1.8}
.card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:1rem}
.card-tags span{
  font-size:0.6rem;padding:2px 8px;border:1px solid var(--glow);
  color:var(--text2);letter-spacing:1px;transition:all 0.3s;
}
.skill-card:hover .card-tags span{border-color:var(--cyan);color:var(--cyan)}
.card-corner{position:absolute;width:16px;height:16px;border-style:solid;border-color:var(--cyan);transition:border-color var(--speed)}
.card-corner.tl{top:-1px;left:-1px;border-width:1px 0 0 1px}
.card-corner.br{bottom:-1px;right:-1px;border-width:0 1px 1px 0}

/* === About === */
.about{padding:8rem 2rem}
.about-terminal{
  max-width:750px;margin:0 auto 3rem;border:1px solid var(--glow);
  overflow:hidden;backdrop-filter:blur(10px);background:var(--card);
  transition:background var(--speed),border-color var(--speed);
}
.terminal-header{
  display:flex;align-items:center;gap:6px;padding:0.7rem 1rem;
  border-bottom:1px solid var(--glow);
}
.terminal-dot{width:8px;height:8px;border-radius:50%;background:var(--text2);opacity:0.4}
.terminal-dot:first-child{background:#ff5f57}
.terminal-dot:nth-child(2){background:#ffbd2e}
.terminal-dot:nth-child(3){background:#28c840}
.terminal-title{margin-left:auto;font-size:0.65rem;color:var(--text2);letter-spacing:2px}
.terminal-body{padding:1.5rem;font-size:0.82rem;line-height:2}
.term-line{color:var(--text2)}
.term-prompt{color:var(--green);margin-right:0.5rem}
.term-output{padding-left:1.2rem}
.term-output.blank{height:0.5rem}
.hl{color:var(--cyan);font-weight:bold}
.term-cursor{color:var(--cyan);animation:blink .8s infinite}

/* Stats */
.about-stats{display:flex;justify-content:center;gap:3rem;flex-wrap:wrap}
.stat-item{text-align:center}
.stat-ring{width:80px;height:80px;position:relative;margin:0 auto 0.5rem}
.stat-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.stat-ring-bg{fill:none;stroke:var(--glow);stroke-width:2}
.stat-ring-fill{fill:none;stroke:var(--cyan);stroke-width:2;stroke-dasharray:226;stroke-dashoffset:226;stroke-linecap:round;transition:stroke-dashoffset 1.5s cubic-bezier(.16,1,.3,1),stroke var(--speed)}
.stat-ring.animated .stat-ring-fill{stroke-dashoffset:var(--offset,0)}
.stat-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:0.9rem;color:var(--cyan);font-weight:bold}
.stat-label{font-size:0.65rem;color:var(--text2);letter-spacing:2px}

/* === Contact === */
.contact{padding:8rem 2rem}
.contact-grid{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap}
.contact-card{
  display:flex;align-items:center;gap:0.8rem;padding:1rem 2rem;
  border:1px solid var(--glow);color:var(--text2);text-decoration:none;
  font-size:0.8rem;letter-spacing:2px;font-family:inherit;
  position:relative;overflow:hidden;backdrop-filter:blur(10px);
  background:var(--card);transition:all 0.3s;
}
.contact-card:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 30px rgba(0,240,255,0.1)}

/* === Footer === */
footer{position:relative;z-index:1;text-align:center;padding:2rem;font-size:0.65rem;color:var(--text2);transition:color var(--speed)}
.footer-line{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--glow),transparent);margin-bottom:1.5rem}
.footer-content{display:flex;flex-direction:column;gap:0.5rem;align-items:center}
footer a{color:var(--text2);text-decoration:none;transition:color 0.3s}
footer a:hover{color:var(--cyan)}
.footer-beian{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.footer-beian .sep{opacity:0.4}

/* === Mobile === */
@media(max-width:768px){
  nav{padding:0.8rem 1rem}
  .nav-links{gap:1.2rem}
  .nav-links a{font-size:0.7rem;letter-spacing:2px}
  .skills,.about,.contact{padding:5rem 1rem}
  .skills-grid{grid-template-columns:1fr}
  .hero-coords{flex-direction:column;gap:0.5rem}
  .about-stats{gap:1.5rem}
}