/* ============================================
   周斌 · 影视后期作品集 — 全局样式
   ============================================ */
:root{
  --bg:#fff;--text:#1a1a2e;--text-secondary:#555;
  --text-muted:#666;--text-light:#999;--text-lighter:#aaa;
  --accent:#ff6a00;--accent-light:#ff8c38;--accent-hover:#ff8533;
  --accent-rgb:255,106,0;
  --border:rgba(0,0,0,.06);--border-light:rgba(0,0,0,.08);--border-lighter:rgba(0,0,0,.04);
  --card-bg:rgba(0,0,0,.02);--card-hover-shadow:0 8px 30px rgba(0,0,0,.06);
  --scrollbar-track:#eee;--selection-bg:rgba(255,106,0,.3);
  --nav-bg:rgba(255,255,255,.85);--nav-border:rgba(0,0,0,.06);
  --fade-bg:linear-gradient(to bottom,transparent 0%,rgba(255,255,255,.8) 40%,#fff 100%);
  --about-tag-bg:rgba(0,230,118,.08);--about-tag-border:rgba(0,230,118,.12);
  --about-tag-dot:#00e676;--about-tag-dot-shadow:rgba(0,230,118,.4);
  --about-tag-hover-bg:rgba(0,230,118,.15);--about-tag-hover-shadow:rgba(0,230,118,.1);
  --about-ring:rgba(255,106,0,.06);--about-ring-2:rgba(255,106,0,.04);--about-ring-large:rgba(255,106,0,.03);
  --about-dot:#ff6a00;--about-dot-opacity:.15;
  --accent-light-08:rgba(255,106,0,.08);--accent-light-06:rgba(255,106,0,.06);
  --accent-light-03:rgba(255,106,0,.03);
  --portfolio-accent-shadow:rgba(255,106,0,.04);
  --badge-tvc-bg:rgba(255,106,0,.1);--badge-tvc-border:rgba(255,106,0,.15);
  --badge-tvc-shadow:rgba(255,106,0,.15);--badge-tvc-text:#ff6a00;
  --badge-brand-bg:rgba(255,159,67,.1);--badge-brand-border:rgba(255,159,67,.15);
  --badge-brand-shadow:rgba(255,159,67,.15);--badge-brand-text:#ffb347;
  --badge-ai-bg:rgba(0,212,255,.07);--badge-ai-border:rgba(0,212,255,.1);
  --badge-ai-shadow:rgba(0,212,255,.15);--badge-ai-text:#40d4ff;
  --badge-short-bg:rgba(64,230,136,.07);--badge-short-border:rgba(64,230,136,.1);
  --badge-short-shadow:rgba(64,230,136,.15);--badge-short-text:#40e688;
  --badge-product-bg:rgba(130,100,255,.07);--badge-product-border:rgba(130,100,255,.1);
  --badge-product-shadow:rgba(130,100,255,.15);--badge-product-text:#8b7cff;
  --badge-play-bg:rgba(255,70,120,.07);--badge-play-border:rgba(255,70,120,.1);
  --badge-play-shadow:rgba(255,70,120,.15);--badge-play-text:#ff5a85;
  --footer-border:rgba(0,0,0,.05);
  --hero-ring:rgba(255,106,0,.06);--hero-ring-2:rgba(255,106,0,.03);
  --filter-btn-bg:rgba(0,0,0,.03);--filter-btn-border:rgba(0,0,0,.08);
  --filter-btn-hover-border:rgba(255,106,0,.35);
  --showmore-bg:rgba(255,106,0,.08);--showmore-border:rgba(255,106,0,.2);
  --back-to-top-shadow:rgba(255,106,0,.2);--back-to-top-hover-shadow:rgba(255,106,0,.3);
  --skill-hover-color:#ffaa70;
  --skill-bar-track-bg:rgba(0,0,0,.05);
  --brand-light:#1a1a2e;
  --navbar-link:#999;--navbar-link-hover:#555;
  --beian-link:#3a4a6a;
  --scroll-tip:#5a6a8a;--scroll-mouse-border:#ccc;
}
body.dark-mode{
  --bg:#0d1117;--text:#e6edf3;--text-secondary:#b0b8c4;
  --text-muted:#8b949e;--text-light:#6e7681;--text-lighter:#555;
  --accent:#ff6a00;--accent-light:#ff8c38;--accent-hover:#ff8533;
  --border:rgba(255,255,255,.06);--border-light:rgba(255,255,255,.08);--border-lighter:rgba(255,255,255,.04);
  --card-bg:rgba(255,255,255,.03);--card-hover-shadow:0 8px 30px rgba(0,0,0,.3);
  --scrollbar-track:#161b22;--selection-bg:rgba(255,106,0,.4);
  --nav-bg:rgba(13,17,23,.85);--nav-border:rgba(255,255,255,.06);
  --fade-bg:linear-gradient(to bottom,transparent 0%,rgba(13,17,23,.8) 40%,#0d1117 100%);
  --about-tag-bg:rgba(0,230,118,.1);--about-tag-border:rgba(0,230,118,.15);
  --about-tag-dot:#00e676;--about-tag-dot-shadow:rgba(0,230,118,.4);
  --about-tag-hover-bg:rgba(0,230,118,.18);--about-tag-hover-shadow:rgba(0,230,118,.12);
  --about-ring:rgba(255,106,0,.08);--about-ring-2:rgba(255,106,0,.06);--about-ring-large:rgba(255,106,0,.04);
  --about-dot:#ff6a00;--about-dot-opacity:.25;
  --accent-light-08:rgba(255,106,0,.12);--accent-light-06:rgba(255,106,0,.1);
  --accent-light-03:rgba(255,106,0,.06);
  --portfolio-accent-shadow:rgba(255,106,0,.06);
  --badge-tvc-bg:rgba(255,106,0,.15);--badge-tvc-border:rgba(255,106,0,.2);
  --badge-tvc-shadow:rgba(255,106,0,.2);--badge-tvc-text:#ff8c38;
  --badge-brand-bg:rgba(255,159,67,.15);--badge-brand-border:rgba(255,159,67,.2);
  --badge-brand-shadow:rgba(255,159,67,.2);--badge-brand-text:#ffc34d;
  --badge-ai-bg:rgba(0,212,255,.1);--badge-ai-border:rgba(0,212,255,.15);
  --badge-ai-shadow:rgba(0,212,255,.2);--badge-ai-text:#5adhff;
  --badge-short-bg:rgba(64,230,136,.1);--badge-short-border:rgba(64,230,136,.15);
  --badge-short-shadow:rgba(64,230,136,.2);--badge-short-text:#50e888;
  --badge-product-bg:rgba(130,100,255,.1);--badge-product-border:rgba(130,100,255,.15);
  --badge-product-shadow:rgba(130,100,255,.2);--badge-product-text:#9b8cff;
  --badge-play-bg:rgba(255,70,120,.1);--badge-play-border:rgba(255,70,120,.15);
  --badge-play-shadow:rgba(255,70,120,.2);--badge-play-text:#ff6a8a;
  --footer-border:rgba(255,255,255,.05);
  --hero-ring:rgba(255,106,0,.08);--hero-ring-2:rgba(255,106,0,.05);
  --filter-btn-bg:rgba(255,255,255,.04);--filter-btn-border:rgba(255,255,255,.08);
  --filter-btn-hover-border:rgba(255,106,0,.35);
  --showmore-bg:rgba(255,106,0,.12);--showmore-border:rgba(255,106,0,.25);
  --back-to-top-shadow:rgba(255,106,0,.25);--back-to-top-hover-shadow:rgba(255,106,0,.35);
  --skill-hover-color:#ff8c38;
  --skill-bar-track-bg:rgba(255,255,255,.06);
  --brand-light:#e6edf3;
  --navbar-link:#8b949e;--navbar-link-hover:#e6edf3;
  --beian-link:#8b949e;
  --scroll-tip:#5a6a8a;--scroll-mouse-border:#444;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:'Poppins','Noto Sans SC','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease,color .3s ease
}
::selection{background:var(--selection-bg);color:#fff}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--scrollbar-track)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--accent-hover)}

.section{width:100%;position:relative;padding:120px 2rem 100px}
.container{max-width:1280px;margin:0 auto;width:100%}

/* Section Title - CENTER */
.section-header{text-align:center;margin-bottom:4.5rem}
.section-subheader{color:var(--text-lighter);font-size:.92rem;font-weight:400;margin-top:1.2rem;letter-spacing:.5px}
.section-title{
  font-size:2.6rem;font-weight:700;color:var(--text);display:inline-block;
  letter-spacing:-.5px;position:relative
}
.section-title::after{
  content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
  width:48px;height:6px;background:var(--accent);border-radius:3px;transition:width .6s ease
}
.section-header:hover .section-title::after{width:72px}

/* ============================================
   NAV - Glassmorphism + Logo + Theme Toggle
   ============================================ */
.navbar{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  height:56px;padding:0 2rem;display:flex;align-items:center;
  transition:all .35s ease
}
.navbar .nav-left{display:flex;align-items:center;width:100%;position:relative}
.navbar .nav-left .nav-links{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:2rem;white-space:nowrap}
.navbar .nav-brand{color:var(--accent);font-size:1rem;font-weight:700;letter-spacing:.5px;white-space:nowrap;line-height:1;padding:.25rem 0}
.navbar .brand-light{color:var(--brand-light);transition:color .3s ease}
.navbar a{
  color:var(--navbar-link);text-decoration:none;font-size:.9rem;font-weight:600;
  letter-spacing:.8px;transition:color .3s ease;position:relative;padding:.25rem 0
}
.navbar a::after{
  content:'';position:absolute;bottom:-2px;left:50%;
  transform:translateX(-50%) scaleX(0);width:100%;height:4px;
  background:var(--accent);border-radius:2px;transition:transform .3s ease
}
.navbar a:hover::after,.navbar a.active::after{transform:translateX(-50%) scaleX(1)}
.navbar a:hover{color:var(--navbar-link-hover)}.navbar a.active{color:var(--accent)}

/* Theme Toggle */
.theme-toggle{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;border:1px solid var(--border-light);
  background:var(--card-bg);backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:1rem;color:var(--text-muted);transition:all .3s ease;
  z-index:10
}
.theme-toggle:hover{
  border-color:var(--accent);color:var(--accent);
  transform:translateY(-50%) scale(1.08);
  box-shadow:0 0 12px rgba(var(--accent-rgb),.15)
}

/* Glassmorphism nav background */
.navbar-bg{
  position:fixed;top:0;left:0;width:100%;height:56px;z-index:999;
  background:var(--nav-bg);backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border-bottom:1px solid var(--nav-border);
  opacity:0;transition:opacity .35s ease;pointer-events:none
}
.navbar-bg.show{opacity:1}

/* ============================================
   HOME - particles + distorted rings only (no bg image)
   ============================================ */
#home{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:0 2rem;overflow:hidden;position:relative;
  background:var(--bg);transition:background .3s ease
}

#about{min-height:100vh;display:flex;align-items:center}

/* Particles - Canvas handles all */
#heroParticles{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1
}

/* Distorted rings (SVG path) */
.hero-ring-svg{
  position:absolute;inset:0;pointer-events:none;z-index:1;overflow:visible
}
.hero-ring-svg svg{width:100%;height:100%}
.distorted-ring{
  fill:none;stroke:var(--hero-ring);stroke-width:1;
  animation:drift 8s ease-in-out infinite alternate;
  transition:stroke .3s ease
}
.distorted-ring-2{
  fill:none;stroke:var(--hero-ring-2);stroke-width:1.5;
  animation:drift 10s ease-in-out infinite alternate-reverse;
  transition:stroke .3s ease
}
@keyframes drift{0%{d:path("M200,300 C350,150 500,150 600,300 C700,450 550,550 400,500 C250,450 100,450 200,300Z")}100%{d:path("M250,280 C300,180 480,200 580,320 C680,440 520,520 380,480 C240,440 150,400 250,280Z")}}

.hero-content{position:relative;z-index:2;text-align:center;width:100%;max-width:100%;margin-left:0;padding:0 2rem}
.hello-world{
  font-size:7rem;font-weight:100;color:var(--text);letter-spacing:-2px;
  opacity:0;animation:fadeUp .8s ease 1s forwards;
  font-family:'Poppins',sans-serif;line-height:1
}
.welcome-text{
  font-size:1.5rem;color:var(--text-muted);margin-bottom:.3rem;min-height:2rem;
  opacity:0;animation:fadeUp .8s ease .4s forwards
}
.welcome-text .typed-text{color:var(--accent);font-weight:300;font-size:1.5rem}
.typed-cursor{color:#ff7a00;font-size:1.5rem;font-weight:300;opacity:1;animation:cb 1.8s infinite;display:inline-block;-webkit-text-stroke:4px #ff7a00;text-stroke:4px #ff7a00;text-shadow:0 0 6px rgba(255,122,0,.6),0 0 12px rgba(255,122,0,.5),0 0 24px rgba(255,122,0,.3)}
.dark-mode .typed-cursor{color:#fff;text-shadow:0 0 6px rgba(255,255,255,.6),0 0 12px rgba(255,255,255,.5),0 0 24px rgba(255,255,255,.3);-webkit-text-stroke:4px #fff;text-stroke:4px #fff}
@keyframes cb{0%,100%{opacity:1}50%{opacity:0}}

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

.scroll-indicator{
  position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  opacity:0;z-index:2;
  text-decoration:none;
  transition:opacity .6s ease
}
.scroll-indicator.visible{opacity:1}
.scroll-indicator span{font-size:.65rem;color:var(--scroll-tip);letter-spacing:2px;text-transform:uppercase}
.scroll-mouse{width:20px;height:32px;border:2px solid var(--scroll-mouse-border);border-radius:10px;position:relative}
.scroll-mouse::after{
  content:'';position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width:2px;height:7px;background:var(--accent);border-radius:3px;
  animation:sw 1.6s ease-in-out infinite
}
@keyframes sw{0%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(12px)}}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}.reveal-d3{transition-delay:.3s}.reveal-d4{transition-delay:.4s}

@media(max-width:1024px){.hello-world{font-size:4.5rem}.section-title{font-size:2.2rem}.welcome-text{font-size:1.2rem}}
@media(max-width:768px){
  .navbar .nav-left .nav-links{gap:.8rem}.navbar a{font-size:.82rem}
  .hello-world{font-size:3rem}.welcome-text{font-size:1rem}.typed-cursor{font-size:1rem}
  .section{padding:80px 1.2rem 60px}.section-title{font-size:1.8rem}
}
@media(max-width:480px){
  .hello-world{font-size:2rem}.navbar a{font-size:.75rem;letter-spacing:.3px}.navbar .nav-left .nav-links{gap:.4rem}.navbar .nav-brand{font-size:.85rem}
}