/* ============================================================
   Harry Chen — Pixel Glitch Portfolio
   顏色與字型集中在這裡，之後要調風格改這區就好
   ============================================================ */
:root{
  --bg:#0A0A0A;
  --ink:#F4F4EF;
  --ink-soft:#EDEDE8;
  --muted:rgba(237,237,232,.65);
  --faint:rgba(255,255,255,.42);
  --line:rgba(255,255,255,.1);
  --card:#171717;
  --card-2:#0E0E0E;

  --accent:#D6FF3F;   /* 螢光黃綠 */
  --pink:#FF5CA8;
  --purple:#9D5CFF;
  --orange:#FF8A3D;
  --blue:#5CC8FF;

  --sans:'Noto Sans TC',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --pixel:'Press Start 2P',var(--mono);

  --maxw-work:1000px;
  --maxw-journey:820px;
  --maxw-about:940px;
  --maxw-foot:1160px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:44px 44px;
  color:var(--ink-soft);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
  cursor:none;
}
a{color:inherit}
b{font-weight:700}
.accent{color:var(--accent)}
.accent.strong{font-weight:700}

@media (hover:none), (pointer:coarse){
  body{cursor:auto}
  .pixel-cursor,.pixel-cursor-ring{display:none}
}

/* ---------- 質感層 ---------- */
.fx-scan{
  position:fixed;inset:0;z-index:39;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0px, rgba(0,0,0,.22) 1px, transparent 1px, transparent 4px);
  animation:scan-drift .35s steps(2) infinite;
}
.fx-vignette{
  position:fixed;inset:0;z-index:38;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%, transparent 52%, rgba(0,0,0,.42) 100%);
}
.fx-grain{
  position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.06;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
@keyframes scan-drift{from{transform:translateY(0)}to{transform:translateY(4px)}}

.prog-bar{
  position:fixed;top:0;left:0;height:3px;width:0%;background:var(--accent);
  z-index:60;pointer-events:none;transition:width .05s linear;
}

/* ---------- 像素游標 ---------- */
.pixel-cursor{
  position:fixed;left:0;top:0;z-index:9999;pointer-events:none;will-change:transform;
  width:13px;height:13px;background:var(--accent);
  box-shadow:0 0 14px rgba(255,255,255,.25);
  animation:cursor-cycle 3.6s steps(1) infinite;
  transition:opacity .15s ease;
}
.pixel-cursor-ring{
  position:fixed;left:0;top:0;z-index:9998;pointer-events:none;will-change:transform;
  width:34px;height:34px;border:1px solid rgba(255,255,255,.3);
  transition:border-color .2s ease,opacity .15s ease;
}
.pixel-cursor-ring.hot{border-color:rgba(214,255,63,.85)}
@keyframes cursor-cycle{
  0%,40%{background:var(--accent)}
  41%,70%{background:var(--pink)}
  71%,100%{background:var(--purple)}
}

/* ---------- 品牌角標 ---------- */
.brand-chip{
  position:fixed;top:16px;left:22px;z-index:50;
  display:flex;align-items:center;gap:10px;
}
.brand-badge{
  width:32px;height:32px;background:var(--accent);color:#0A0A0A;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--pixel);font-size:13px;
  box-shadow:3px 3px 0 rgba(255,255,255,.12);
}
.brand-name{display:block;font:700 13px var(--sans);color:var(--ink);letter-spacing:.2em}
.brand-sub{display:block;font:9px var(--mono);color:var(--faint);letter-spacing:.12em}
@media (max-width:640px){.brand-chip{display:none}}

/* ---------- 懸浮導覽 ---------- */
.tab-nav{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:50;
  display:flex;gap:4px;
  background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 38%, rgba(255,255,255,.02) 62%, rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.24);border-radius:100px;padding:5px;
  backdrop-filter:blur(26px) saturate(1.9);-webkit-backdrop-filter:blur(26px) saturate(1.9);
  box-shadow:0 14px 38px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.25);
}
.tab-btn{
  font:700 12px var(--mono);letter-spacing:.08em;border:none;border-radius:100px;
  padding:9px 20px;cursor:pointer;min-height:38px;
  background:transparent;color:rgba(255,255,255,.62);
  transition:background .25s ease,color .25s ease,box-shadow .25s ease;
}
.tab-btn:hover:not(.active){color:#F4F4EF;background:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.tab-btn.active{
  background:linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 55%), var(--accent);
  color:#0A0A0A;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 4px 14px rgba(0,0,0,.35);
}

/* ---------- HERO ---------- */
.hero{
  position:relative;padding:120px 20px 0;
  display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden;
}
.hero-kicker{
  font:12px var(--mono);color:var(--accent);letter-spacing:.14em;margin-bottom:26px;
  animation:px-blink 5s steps(1) infinite;order:0;
}
.wordmark-wrap{position:relative;display:inline-block;order:2;margin-top:54px;max-width:100%}
.wordmark-wrap::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:130%;height:300%;background:radial-gradient(ellipse, rgba(214,255,63,.07), transparent 62%);
  pointer-events:none;
}
.wordmark{
  font-family:var(--pixel);font-size:clamp(30px,8.8vw,150px);line-height:1.06;
  margin:0;letter-spacing:-.01em;white-space:nowrap;
}
.glitch-a{position:absolute;inset:0;color:var(--pink);pointer-events:none;z-index:1;animation:glitch-a 6s steps(1) infinite}
.glitch-b{position:absolute;inset:0;color:var(--accent);pointer-events:none;z-index:1;animation:glitch-b 7.3s steps(1) infinite}
.wordmark-main{
  position:relative;z-index:2;color:var(--ink);
  text-shadow:5px 5px 0 rgba(255,255,255,.07);
}
.wordmark-main span{display:inline-block;transition:color .12s ease}
.wordmark-main span:nth-child(1):hover{color:var(--accent)}
.wordmark-main span:nth-child(2):hover{color:var(--pink)}
.wordmark-main span:nth-child(3):hover{color:var(--purple)}
.wordmark-main span:nth-child(4):hover{color:var(--orange)}
.wordmark-main span:nth-child(5):hover{color:var(--accent)}
.wordmark-main span:nth-child(7):hover{color:var(--pink)}
.wordmark-main span:nth-child(8):hover{color:var(--accent)}
.wordmark-main span:nth-child(9):hover{color:var(--orange)}
.wordmark-main span:nth-child(10):hover{color:var(--purple)}
.wm-sp{display:inline-block;width:.55em}
@keyframes glitch-a{
  0%,92%,100%{transform:translate(0,0);opacity:0}
  93%{transform:translate(-3px,1px);opacity:.7}
  95%{transform:translate(2px,-1px);opacity:.5}
  97%{transform:translate(-1px,0);opacity:0}
}
@keyframes glitch-b{
  0%,88%,100%{transform:translate(0,0);opacity:0}
  89%{transform:translate(3px,-1px);opacity:.6}
  91%{transform:translate(-2px,1px);opacity:.4}
  93%{transform:translate(1px,0);opacity:0}
}

.px-bit{position:absolute;image-rendering:pixelated}
.px-bit.a{left:-6%;top:-10%;width:18px;height:18px;background:var(--accent);animation:px-float-a 4.5s ease-in-out infinite}
.px-bit.b{right:-7%;top:16%;width:14px;height:14px;background:var(--pink);animation:px-float-b 5.2s ease-in-out infinite}
.px-bit.c{left:12%;bottom:-8%;width:22px;height:8px;background:var(--purple);animation:px-float-c 4s ease-in-out infinite}
.px-bit.d{right:-13%;bottom:22%;width:10px;height:10px;background:var(--accent);transform:rotate(45deg);animation:px-float-b 4.8s ease-in-out infinite}
.px-quad{position:absolute;right:18%;bottom:-13%;display:grid;grid-template-columns:8px 8px;grid-template-rows:8px 8px;animation:px-float-a 6s ease-in-out infinite}
.px-quad span:nth-child(1){background:var(--orange)}
.px-quad span:nth-child(4){background:var(--orange)}
.px-tri{position:absolute;left:34%;top:-16%;display:grid;grid-template-columns:6px 6px 6px;grid-template-rows:6px 6px 6px;animation:px-float-c 5.6s ease-in-out infinite}
.px-tri span:nth-child(2),.px-tri span:nth-child(4),.px-tri span:nth-child(5),.px-tri span:nth-child(6),.px-tri span:nth-child(8){background:var(--pink)}
@media (max-width:640px){.px-hide-m{display:none!important}}
@keyframes px-float-a{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes px-float-b{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(6px) rotate(45deg)}}
@keyframes px-float-c{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.hero-id{order:1;margin-top:18px;max-width:820px;display:flex;flex-direction:column;align-items:center}
.hero-id-badge{
  display:inline-flex;align-items:center;gap:12px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03);
  padding:8px 18px;margin-bottom:18px;
}
.dot-blink{width:8px;height:8px;background:var(--accent);animation:px-blink 3s steps(1) infinite}
.hero-id-name{font:700 16px var(--sans);color:var(--ink);letter-spacing:.3em}
.hero-id-en{font:10px var(--mono);color:var(--faint);letter-spacing:.16em}
.hero-line1{font:13px/2.1 var(--mono);color:var(--muted);letter-spacing:.08em}
.hero-line2{font:12px/2.1 var(--mono);color:rgba(237,237,232,.42);letter-spacing:.08em}
.caret{display:inline-block;width:8px;height:14px;background:var(--accent);margin-left:8px;vertical-align:-2px;animation:caret-blink 1.1s steps(1) infinite}
.hero-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:16px}
.hero-stats span{font:11px var(--mono);color:rgba(255,255,255,.5);letter-spacing:.08em;white-space:nowrap}
@keyframes px-blink{0%,49%{opacity:1}50%,100%{opacity:.15}}
@keyframes caret-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.hero-scroll{order:3;margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:40px}
.hero-scroll span:first-child{font:10px var(--mono);color:rgba(255,255,255,.38);letter-spacing:.3em}
.scroll-dot{width:10px;height:10px;background:var(--accent);animation:scroll-hop 1.4s ease-in-out infinite}
@keyframes scroll-hop{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* ---------- 跑馬燈 ---------- */
.marquee{
  overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:13px 0;background:rgba(255,255,255,.02);
}
.marquee-track{display:flex;white-space:nowrap;width:max-content;animation:marquee 30s linear infinite}
.marquee-item{font:700 12px var(--mono);letter-spacing:.24em;color:rgba(255,255,255,.42);padding-right:28px}
.marquee-item b{color:var(--accent);font-weight:700}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 分頁區塊共用 ---------- */
.tab-panel{animation:panel-in .35s ease both}
@keyframes panel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.section-head{display:flex;align-items:center;gap:14px;margin-bottom:34px}
.section-dot{width:10px;height:10px;background:var(--accent);flex:none}
.section-dot.pink{background:var(--pink)}
.section-title{font-family:var(--pixel);font-size:13px;color:var(--accent)}
.section-title.pink{color:var(--pink);font-size:11px}
.section-line{flex:1;height:1px;background:var(--line)}
.section-tag{font:11px var(--mono);color:rgba(255,255,255,.35)}

#panel-work{max-width:var(--maxw-work);margin:0 auto;padding:40px 28px 90px}
#panel-journey{max-width:var(--maxw-journey);margin:0 auto;padding:40px 28px 90px}
#panel-about{max-width:var(--maxw-about);margin:0 auto;padding:40px 28px 90px}

/* ---------- WORK ---------- */
.work-list{display:flex;flex-direction:column;gap:22px}
.work-card{
  background:linear-gradient(160deg,var(--card),var(--card-2));
  border:1px solid var(--line);border-radius:18px;padding:24px;
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:start;
  transition:transform .25s cubic-bezier(.2,.9,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.work-card:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 26px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);border-color:rgba(255,255,255,.24)}
.work-card .idx-wm{position:absolute;right:-8px;bottom:-30px;font-family:var(--pixel);font-size:110px;color:rgba(255,255,255,.035);pointer-events:none}
.work-shot{position:relative}
.work-shot .img-slot{width:100%;aspect-ratio:16/10;border-radius:12px}
.corner{position:absolute;width:14px;height:14px;pointer-events:none;border-color:var(--accent)}
.corner.tl{left:-5px;top:-5px;border-left:2px solid;border-top:2px solid}
.corner.tr{right:-5px;top:-5px;border-right:2px solid;border-top:2px solid}
.corner.bl{left:-5px;bottom:-5px;border-left:2px solid;border-bottom:2px solid}
.corner.br{right:-5px;bottom:-5px;border-right:2px solid;border-bottom:2px solid}
.work-body{min-width:0}
.work-line1{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.work-idx{font-family:var(--pixel);font-size:11px;color:var(--accent)}
.work-meta{font:11px var(--mono);color:rgba(255,255,255,.4)}
.work-status{font:700 10px var(--mono);color:#0A0A0A;padding:4px 10px;border-radius:3px;margin-left:auto;letter-spacing:.06em}
.work-name{font:900 24px/1.3 var(--sans);color:var(--ink);margin-bottom:8px}
.work-desc{font:15px/1.85 var(--sans);color:var(--muted);margin:0 0 14px}
.work-impact{display:flex;gap:10px;align-items:flex-start;padding:2px 0 2px 12px;margin-bottom:14px;border-left:3px solid}
.work-impact p{font:13px/1.7 var(--sans);color:rgba(237,237,232,.75);margin:0}
.work-stack{display:flex;flex-wrap:wrap;gap:8px}
.work-stack span{font:11px var(--mono);color:rgba(255,255,255,.6);background:#1E1E1E;border:1px solid var(--line);padding:5px 11px;border-radius:4px}
@media (max-width:720px){.work-card{grid-template-columns:1fr}}

/* ---------- JOURNEY ---------- */
.journey-list{position:relative;padding-left:30px;border-left:2px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:18px}
.journey-card{
  position:relative;background:linear-gradient(160deg,#161616,var(--card-2));
  border:1px solid var(--line);border-radius:14px;padding:20px 24px;
  transition:transform .22s cubic-bezier(.2,.9,.3,1), border-color .22s ease, box-shadow .22s ease;
  display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;
}
.journey-card:hover{transform:translateX(6px);border-color:rgba(255,255,255,.26);box-shadow:0 14px 30px rgba(0,0,0,.45)}
.journey-node{position:absolute;left:-37px;top:24px;width:12px;height:12px;box-shadow:0 0 0 4px var(--bg)}
.journey-main{flex:1;min-width:220px}
.journey-line1{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.journey-date{font:700 12px var(--mono)}
.journey-tag{font:700 10px var(--mono);color:#0A0A0A;padding:3px 9px;border-radius:3px;letter-spacing:.06em}
.journey-title{font:900 18px/1.4 var(--sans);color:var(--ink);margin-bottom:6px}
.journey-desc{font:14px/1.8 var(--sans);color:rgba(237,237,232,.6);margin:0}
.journey-photo{
  flex:none;background:#F4F4EF;padding:7px 7px 24px;box-shadow:0 12px 26px rgba(0,0,0,.4);
  position:relative;transition:transform .25s ease;
}
.journey-photo:hover{transform:rotate(0deg) scale(1.03)}
.journey-photo .img-slot{width:176px;aspect-ratio:4/3}
.journey-cap{position:absolute;bottom:5px;left:0;right:0;text-align:center;font:10px var(--mono);color:#3A3A36}
@media (max-width:560px){.journey-photo{display:none}}

/* ---------- ABOUT ---------- */
.about-grid{display:grid;grid-template-columns:280px 1fr;gap:56px;align-items:start;margin-bottom:70px}
.about-photo-wrap{position:relative}
.polaroid{
  background:#F4F4EF;
  background-image:repeating-linear-gradient(0deg, rgba(0,0,0,.045) 0px, rgba(0,0,0,.045) 1px, transparent 1px, transparent 3px);
  padding:14px 14px 46px;border-radius:4px;transform:rotate(-2.5deg);
  box-shadow:0 20px 44px rgba(0,0,0,.5);position:relative;
  transition:transform .3s cubic-bezier(.2,.9,.3,1);
}
.polaroid:hover{transform:rotate(0deg) scale(1.02)}
.polaroid .img-slot{width:100%;aspect-ratio:4/3}
.polaroid-cap{position:absolute;bottom:14px;left:0;right:0;text-align:center;font:14px var(--mono);color:#3A3A36}
.about-hello{font:900 26px/1.5 var(--sans);color:var(--ink);margin:0 0 14px}
.about-p1{font:17px/2 var(--sans);color:rgba(237,237,232,.85);margin:0 0 16px}
.about-p2{font:16px/2 var(--sans);color:var(--muted);margin:0 0 26px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips span{font:12px var(--mono);color:var(--ink-soft);border:1px solid rgba(255,255,255,.22);padding:7px 14px;border-radius:100px}
@media (max-width:680px){.about-grid{grid-template-columns:1fr;gap:32px}.about-photo-wrap{max-width:260px}}

.beyond{margin-top:70px}
.strip{display:flex;gap:18px;overflow-x:auto;padding:14px 4px 22px;scroll-snap-type:x proximity}
.strip-card{
  flex:none;scroll-snap-align:start;background:#F4F4EF;padding:9px 9px 30px;
  box-shadow:0 14px 30px rgba(0,0,0,.45);position:relative;transition:transform .25s ease;
}
.strip-card:hover{transform:rotate(0deg) translateY(-4px)}
.strip-card .img-slot{width:224px;aspect-ratio:4/3}
.strip-cap{position:absolute;bottom:7px;left:0;right:0;text-align:center;font:11px var(--mono);color:#3A3A36}
.beyond-p{font:14px/2 var(--sans);color:rgba(237,237,232,.55);max-width:620px;margin:8px 0 0}

/* ---------- 圖片欄位（無圖時顯示佔位圖） ---------- */
.img-slot{position:relative;display:block;background:#1A1A1A;overflow:hidden;border-radius:inherit}
.img-slot img{width:100%;height:100%;object-fit:cover;display:block}
.img-placeholder{
  display:none;position:absolute;inset:0;
  flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 10px),
    #17171A;
  color:rgba(255,255,255,.28);
}
.img-placeholder i{font-size:22px}
.polaroid .img-placeholder,.strip-card .img-placeholder{background:repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 2px, transparent 2px 10px), #DDDDD6;color:rgba(0,0,0,.22)}

/* ---------- FOOTER ---------- */
.site-footer{
  position:relative;background-color:var(--accent);color:#0A0A0A;
  background-image:
    linear-gradient(180deg, rgba(10,10,10,.14), transparent 30%, rgba(255,255,255,.72) 97%),
    radial-gradient(rgba(255,255,255,.85) 1px, transparent 1.5px),
    radial-gradient(rgba(10,10,10,.14) 1px, transparent 1.5px);
  background-size:100% 100%, 7px 7px, 13px 13px;
}
.footer-inner{max-width:var(--maxw-foot);margin:0 auto;padding:54px 28px 26px}
.footer-grid{display:flex;gap:44px;flex-wrap:wrap;justify-content:space-between}
.footer-h{font-family:var(--pixel);font-size:12px;margin-bottom:20px}
.currently-list{display:flex;flex-direction:column;gap:9px;min-width:260px}
.currently-list div{display:flex;gap:10px;align-items:baseline}
.currently-list span:first-child{font:700 12px var(--mono);flex:none}
.currently-list span:last-child{font:500 15px var(--sans)}
.footer-contacts{min-width:240px;text-align:right}
.contact-list{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.contact-list a{
  display:inline-flex;gap:8px;align-items:baseline;color:#0A0A0A;text-decoration:none;
  font:700 14px var(--mono);letter-spacing:.05em;transition:letter-spacing .2s ease;
}
.contact-list a:hover{letter-spacing:.16em}
.contact-list a span:first-child,.contact-list a span:last-child{opacity:.5}
.contact-list a span:nth-child(3){font:400 11px var(--mono);opacity:.55}
.footer-bottom{
  overflow:hidden;margin-top:52px;border-top:2px solid rgba(10,10,10,.25);padding-top:30px;
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.footer-credit{font:700 12px var(--mono);letter-spacing:.22em;opacity:.6;margin-bottom:10px}
.footer-wordmark{font-family:var(--pixel);font-size:clamp(16px,4.4vw,52px);line-height:1.2;white-space:nowrap;letter-spacing:-.01em;transition:letter-spacing .3s ease}
.footer-wordmark:hover{letter-spacing:.04em}
.top-btn{
  font-family:var(--pixel);font-size:10px;background:#0A0A0A;color:var(--accent);
  border:none;padding:14px 18px;cursor:pointer;box-shadow:4px 4px 0 rgba(10,10,10,.3);
  transition:transform .2s ease, box-shadow .2s ease;
}
.top-btn:hover{transform:translate(-2px,-4px);box-shadow:7px 8px 0 rgba(10,10,10,.35)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}