/* --------------------------------------------------
   Yuni’s Universe – styles.css
   Notes:
   - Cleaned small typos (e.g., var(transparent) → transparent, padding: px → 0)
   - Scoped generic header rules to avoid conflicts with .hero
   - Added :root design tokens + light mode
   - Matched HTML classes (hero/card/avatar/links/skills/timeline/etc.)
   - Added aria-pressed state for chips
   - Imported fonts (Roboto/Inter)
-------------------------------------------------- */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Roboto:wght@400;500;700&display=swap');

/* ============== Reset / Base ============== */
:root{
  --bg:#0b1220;
  --fg:#e9eef9;
  --muted:#b7c2d9;
  --accent:#7aa2ff;
  --chip:#1b2438;
  --glass:rgba(255,255,255,0.08);
  --ring:rgba(122,162,255,0.25);
  --font-xs: clamp(12px, 1.2vw, 14px);
  --font-sm: clamp(14px, 1.6vw, 16px);
  --font-base: clamp(16px, 2vw, 18px);
  --font-md: clamp(18px, 2.6vw, 22px);
  --font-lg: clamp(22px, 3vw, 28px);
  --font-xl: clamp(28px, 4vw, 36px);
  --font-xxl: clamp(36px, 6vw, 52px);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#0b1220;
    --fg:#e9eef9;
    --muted:#b7c2d9;
    --accent:#7aa2ff;
    --chip:#1b2438;
    --glass:rgba(255,255,255,0.08);
    --ring:rgba(122,162,255,0.25);
  }
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  color: white;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: 'Roboto', 'Inter', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background: var(--bg);
  font-size: var(--font-base);
  line-height: 1.7;
}
html { scroll-behavior: smooth; }
/* 讓字體真的能隨螢幕縮放（避免 iOS 自動放大問題） */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }


/* ============== Hero Header (scoped) ============== */
.hero {
  position: relative;
  top: 0; 
  margin:0; 
  padding:0;
  height: 100vh;             
  display: grid;
  place-items: center;       /* center */
  padding: 0;
  overflow: hidden;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(8, 10, 34, 0.18), transparent 0%),
              radial-gradient(900px 500px at -10% 110%, rgba(111,255,233,0.18), transparent 10%),
              transparent; /* fixed */
              
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(122,162,255,0.08), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.links a.resume:hover {
  color: #7aa2ff;
  text-shadow: 0 6px 18px rgba(122,162,255,0.3);
}
.glow {
  position: absolute;
  top: 0; left: 0;        
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--ring), transparent 70%);
  filter: blur(40px);
  transform: translate(-20%, -20%) rotate(8deg); /* 稍微外擴，效果更自然 */
  pointer-events: none;
  animation: drift 18s ease-in-out infinite both;
}

@keyframes drift{
  0%,100%{ transform: translate(-10%, -10%) rotate(8deg) scale(1); }
  50%    { transform: translate(5%, -5%) rotate(0deg)  scale(1.08); }
}
.card{
  width:min(860px, 92vw);
  padding:28px 28px 32px;
  backdrop-filter: blur(14px);
  background: var(--glass);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 40px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
  border-radius:24px;
  text-align:center;
  animation: pop 600ms ease-out both;
}
@keyframes pop{ from{ opacity:0; transform: translateY(8px) scale(0.985);} to{ opacity:1; transform: translateY(0) scale(1);} }
.avatar{
  width:132px; height:132px; border-radius:50%; object-fit:cover;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35), 0 0 0 6px rgba(255,255,255,0.08);
  display:block; margin:0 auto 14px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.avatar:hover{ transform: translateY(-2px) rotate(-1.5deg) scale(1.02); box-shadow: 0 18px 40px rgba(0,0,0,0.4), 0 0 0 7px var(--ring); }
.name{ font-size: var(--font-xxl); margin:8px 0 2px; font-weight: 700; letter-spacing:.3px; color:var(--fg);} 
.roles{ margin:4px 0 8px; font-size: var(--font-sm); color:var(--muted); display:flex; align-items:center; justify-content:center; gap:8px;}
.tagline{ margin:8px auto 14px; font-weight:600; font-size: var(--font-md); color:var(--fg); }
.skills{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:14px 0 8px; justify-content:center; }
.skills li{ padding:8px 14px; background:var(--chip); color:var(--fg); border-radius:999px; border:1px solid rgba(255,255,255,0.08); font-size:14px; letter-spacing:.2px; animation: rise .7s ease both; }
.skills li:nth-child(1){ animation-delay:.05s } .skills li:nth-child(2){ animation-delay:.15s } .skills li:nth-child(3){ animation-delay:.25s } .skills li:nth-child(4){ animation-delay:.35s }
@keyframes rise{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform: translateY(0);} }
.links{ display:flex; justify-content:center; gap:18px; margin-top:16px; font-size:26px; }
.links a{ color:var(--muted); transition: transform .2s ease, color .2s ease, text-shadow .2s ease; }
.links a:hover{ transform: translateY(-2px); color:var(--fg); text-shadow: 0 6px 18px rgba(0,0,0,0.2); }
.links a.gh:hover{ color:#ffffff; } .links a.li:hover{ color:#0a66c2; } .links a.mail:hover{ color:#e74a3b; }
.caret{ width:2px; height:1.15em; background:var(--fg); display:inline-block; vertical-align:-2px; margin-left:3px; animation: blink 1s steps(1,end) infinite; }
@keyframes blink { 50%{ opacity:0; } }
@media (max-width:540px){ .card{ padding:22px 18px 26px; border-radius:20px; } .avatar{ width:108px; height:108px; } }

/* Scroll Down Arrow */
.scroll-down{ position:absolute; bottom:20px; left:50%; transform: translateX(-50%); width:30px; height:30px; cursor:pointer; text-decoration:none; }
.scroll-down span{ position:absolute; top:0; left:50%; width:12px; height:12px; border-left:2px solid #ffffff; border-bottom:2px solid #ffffff; transform: translateX(-50%) rotate(-45deg); animation: bounce 1.5s infinite; opacity:.9; }
@keyframes bounce{ 0%,20%,50%,80%,100%{ transform: translateX(-50%) rotate(-45deg) translateY(0);} 40%{ transform: translateX(-50%) rotate(-45deg) translateY(8px);} 60%{ transform: translateX(-50%) rotate(-45deg) translateY(4px);} }

/* ============== Sections ============== */
*, *::before, *::after { box-sizing: border-box; }
.section { display: block; text-align: center; padding: 0; opacity: 1 !important; visibility: visible !important; }
.section-space{
  /* 原本 padding: 56px 20px; → 拆成上下/左右並考慮瀏海區 */
  padding-top: 56px;
  padding-bottom: 56px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

.sec-title{ font-size: var(--font-lg); font-weight: 700; margin:0 0 18px; letter-spacing:.4px; color:#e9eef9; text-align:center; }
.section-space > .sec-title{ display:block; margin-left:auto; margin-right:auto; }

/* Frosted card for Introduction */
.intro-card {
  margin: 0 auto;
  margin-inline: auto;
  width: min(100%, 1000px);
  max-width: 1000px;         /* 不超過 1000px */
  padding-inline: clamp(16px, 5vw, 40px);  /* ← 自動依螢幕寬縮放左右內距 */
  padding-block: clamp(18px, 3vw, 28px);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.1);
  box-shadow: 0 8px 30px rgba(0,0,0,0.18),
              inset 0 1px 0 rgba(255,255,255,0.06);
}
.intro-grid{ display:grid; gap:12px; }
.intro-line{ margin:0; color:#ffffff; font-size: var(--font-base); line-height:1.7; text-align: justify; text-justify: inter-word; }
.intro-line .hl{ color:#ffffff; font-size: var(--font-base); font-weight:700; border-bottom:none; text-shadow:none; }

/* Optional Matrix title effect (not used by default) */
@keyframes matrix-glitch{ 0%{content:"01001101";} 20%{content:"01101110";} 40%{content:"10010111";} 60%{content:"Intro101";} 80%{content:"Introduc0";} 100%{content:"Introduction";} }
.matrix-title::before{ content:"01010101"; font-size:2rem; color: rgb(24,255,247); animation: matrix-glitch 2s steps(5) forwards; }

/* ============== Skills Cards ============== */
#skills{ position: relative; z-index: 1; }
#skills .skills-group{ display:block; color: white; margin: 30px auto 16px; line-height:1.2; text-align:center; font-weight:700; font-size: 24px; text-shadow: 0 0 12px rgba(0,255,255,.12); }
.skills-container{ display:flex; justify-content:center; flex-wrap:wrap; align-items:center; gap:20px; margin-bottom:100px; }
.skill-card{ width:250px; height:150px; perspective:1000px; cursor:pointer; transition: transform .25s ease, filter .25s ease, box-shadow .25s ease; }
.skill-card h3 { font-size: var(--font-md); }
.skill-card p { font-size: var(--font-sm); }
.skill-card:hover{ transform: scale(1.05); background: rgba(0,255,255,0.2); filter: blur(0); box-shadow: 0 0 15px cyan; }
.card-inner{ width:100%; height:100%; position:relative; transform-style: preserve-3d; transition: transform .6s; }
.card-front, .card-back{ width:100%; height:100%; position:absolute; backface-visibility:hidden; background: rgba(255,255,255,0.1); display:flex; flex-direction:column; justify-content:center; align-items:center; border-radius:10px; text-align:center; transition:.3s; box-shadow: 0 0 10px rgba(0,255,255,0.3); }
.card-front{ background: rgba(0,255,255,0.2); }
.card-back{ background: rgba(255,255,255,0.15); transform: rotateY(180deg); }
.flipped .card-inner{ transform: rotateY(180deg); }

/* ============== Timeline ============== */
.timeline{ position:relative; width:min(100%, 1100px); max-width:1100px; margin:auto; padding:20px 0; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));display:flex; flex-direction:column; align-items:center; box-sizing:border-box; }
.timeline-group{ width:100%; margin:24px 0 8px; text-align:center;font-size: 24px; }
.event {
  position: relative;
  width: 90%;              /* 改為自適應 */
  width: min(800px, 100%);        /* 保持上限 */
  margin: 16px auto;       /* ✅ 關鍵：左右 auto 置中 */
  margin-inline: auto;
  padding: 20px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  box-sizing: border-box;
}
.event p {
  font-size: var(--font-sm);
  line-height: 1.6;
}
.event:hover{ transform: translateY(-4px); background: rgba(0,255,255,0.15); box-shadow: 0 0 20px cyan; }
.event.active, .event.open{ background: rgba(0,255,255,0.18); box-shadow: 0 0 25px cyan; transform: none; padding: 28px; }
.event-details{ display:none; margin-top:8px; opacity:0; transition: opacity .3s ease; }
.event-details ul li {
  font-size: var(--font-sm);
  line-height: 1.6;
}
.event.active .event-details, .event.open .event-details{ display:block; opacity:1; }
.year-badge{ position:absolute; top:-10px; right:20px; background: rgba(0,255,255,0.12); border:1px solid rgba(0,255,255,0.35); color:cyan; border-radius:999px; font-size:.85rem; font-weight:600; padding:2px 10px; backdrop-filter: blur(4px); pointer-events:none; z-index: 2; }

@media (max-width: 640px){ .event{ width:95%; padding:20px; } .year-badge{ right:10px; } }

/* ============== Lists / Footer ============== */
ul{ list-style-type:none; padding:0; margin:0; }
ul li{ font-size:16px; padding:8px; position:relative; }
ul li::before{ content:"•"; color: #ffffff; font-size:18px; position:absolute; left:-10px; }
footer{ position:relative; text-align:center; padding: 24px 0; color: var(--muted); }
footer p {
  font-size: var(--font-xs);
  color: var(--muted);
}

/* ============== particles.js Layer ============== */
#particles-js{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; background-color:#232741; background-repeat:no-repeat; background-size:20%; background-position:50% 50%; }
#particles-js::before{ content:''; position:absolute; inset:0; background: radial-gradient(circle, rgba(0,255,255,0.2), transparent 70%); animation:pulse 5s infinite; pointer-events:none; z-index:0; }
#particles-js::after{ content:''; position:absolute; inset:0; background: linear-gradient(45deg, rgba(0,255,255,0.1), rgba(255,0,255,0.1)); mix-blend-mode: overlay; animation: gradient-shift 8s infinite alternate; pointer-events:none; z-index:0; }
.particles-js-canvas-el{ position:absolute !important; inset:0; width:100% !important; height:100% !important; z-index:0 !important; pointer-events:none !important; }
@keyframes pulse{ 0%,100%{ transform: scale(1); opacity:.8;} 50%{ transform: scale(1.2); opacity:.4; } }
@keyframes gradient-shift{ 0%{ background-position:0% 0%; } 100%{ background-position:100% 100%; } }

/* ============== Legacy / Optional (not used by current HTML but kept for future) ============== */
.profile-pic{ width:450px; height:490px; border-radius:50%; border:3px solid rgb(249,154,21); margin-bottom:20px; }
.social-links{ margin-top:15px; display:flex; gap:15px; justify-content:center; }
.social-links a{ color:white; font-size:1.8em; transition:.3s ease-in-out; }
.social-links a:hover{ color:cyan; transform: scale(1.2); text-shadow:0 0 10px cyan; }

/* ============== Naivigation Bar ============== */
.nav-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 34px;
  height: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1000;
  transition: transform 0.3s ease;
}

.nav-toggle:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,0.32), 0 0 0 5px rgba(122,162,255,0.12); }
.nav-toggle:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--sb-glow); }
.nav-toggle .bar {
  width: 100%;
  height: 3px;                 /* 線條厚度 */
  background: #fff;            
  border-radius: 2px;
  transition: all 0.3s ease;
  margin: 3px 0;               /* 線條間距變小 */
}
.nav-toggle .bar + .bar{ margin-top: 5px; }
/* morph into X when open */
.nav-toggle.open .bar:nth-child(1) {
  transform: rotate(46deg) translateY(3.5px);
}
.nav-toggle.open .bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle.open .bar:nth-child(3) {
  transform: rotate(-46deg) translateY(-3.5px);
}

/* Sidebar */
.sidebar{
position: fixed; inset: 0 auto 0 0; width: 280px; max-width: 85vw; height: 100vh; z-index: 2;
transform: translateX(-100%);
transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
background: radial-gradient(120% 80% at 0% 0%, rgba(122,162,255,0.18), transparent 60%), var(--sb-bg);
border-right: 1px solid var(--sb-stroke);
backdrop-filter: blur(14px);
box-shadow: 0 8px 30px rgba(0,0,0,0.28);
}
.sidebar.open{ transform: translateX(0); box-shadow: 0 18px 40px rgba(0,0,0,0.42); }

/* Sidebar nav */
.sidebar-nav{ display: flex; flex-direction: column; padding: 72px 18px 18px; gap: 6px; }
.sidebar-nav a{
display: block; padding: 12px 14px; border-radius: 12px; text-decoration: none;
color: var(--sb-link-muted); font-weight: 600; letter-spacing: .2px;
transition: background .2s ease, color .2s ease, transform .15s ease;
}
.sidebar-nav a:hover, .sidebar-nav a:focus-visible{ background: var(--sb-hover); color: var(--sb-link); transform: translateX(2px); outline: none; }

/* Keep content above particles */
.hero, .section, footer{ position: relative; z-index: 1; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
.nav-toggle, .sidebar{ transition: none; }
}

/* ================== Responsive Patch ================== */

/* 大尺寸到筆電（<= 1024px） */
@media (max-width: 1024px){
  .card{ width: min(720px, 92vw); }
  .event{ max-width: 760px; }
}

/* 平板（<= 768px） */
@media (max-width: 768px){
  /* Hero */
  .hero{ height: 90vh; }
  .card{ width: min(640px, 92vw); padding: 22px 18px 26px; border-radius: 20px; }
  .avatar{ width: 112px; height: 112px; }
  .name{ font-size: clamp(24px, 5vw, 34px); }
  .roles{ font-size: clamp(14px, 2.6vw, 18px); }
  .tagline{ font-size: clamp(14px, 2.8vw, 18px); }

  .section-space{ padding: 40px 16px; }
  .intro-card{
    width: 94vw;
    padding: 18px 16px 20px;
    border-radius: 14px;
    backdrop-filter: blur(10px);
  }
  .intro-grid{ gap: 10px; }

  /* 手機上改為靠左閱讀更順（你也可保留置中） */
  .section{ text-align: left; }
  .sec-title{ text-align: center; }      /* 標題仍置中 */
  .intro-line{
    text-align: left;                    /* 取消左右對齊避免窄螢幕河流 */
    text-justify: auto;
    line-height: 1.65;
  }

  /* Skills 區塊 */
  #skills .skills-group{ font-size: 22px; margin: 20px auto 12px; }
  .skills-container{ gap: 16px; margin-bottom: 60px; }
  .skill-card{ width: 46%; min-width: 240px; height: 150px; }

  /* Timeline 卡片置中 + 寬度 */
  .timeline{
    padding-inline: max(14px, env(safe-area-inset-left))
                    max(14px, env(safe-area-inset-right));
  }
  .event{
    width: min(680px, calc(100% - 28px));    /* 兩側各留 14px */
    margin-inline: auto;
    max-width: 680px;
    margin: 14px auto;
    padding: 18px;
    overflow: visible; /* 避免 year-badge 被裁掉 */
  }
  .year-badge{ top: -10px; right: 14px; }

  /* 側邊欄：窄螢幕更貼合 */
  .sidebar{ width: 88vw; max-width: 360px; }
}

/* 手機（<= 540px） */
@media (max-width: 540px){
  .hero{ height: 88vh; }
  .card{ width: 92vw; padding: 20px 16px 22px; }
  .avatar{ width: 100px; height: 100px; }
  
  .section-space{
    padding-top: 32px; padding-bottom: 32px;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .intro-card{
    padding-inline: clamp(14px, 5vw, 22px);
    padding-block: clamp(14px, 3vw, 20px);
  }
  .intro-grid{ gap: 8px; }
  .sec-title{ margin-bottom: 14px; }

  .skills{ gap: 8px; }
  .skills li{ padding: 6px 10px; font-size: 13px; }

  .skill-card{ width: 94%; min-width: 0; height: 140px; }

  .timeline{
    padding-inline: max(12px, env(safe-area-inset-left))
                    max(12px, env(safe-area-inset-right));
  }

  .event{
    width: min(520px, calc(100% - 24px));    /* 兩側各留 12px */
    margin-inline: auto;
    max-width: 520px;
    padding: 16px;
  }
  .event p{ margin: 4px 0; line-height: 1.5; }
  .event-details ul li{ padding: 6px 0; font-size: 15px; }

  /* Sidebar 全螢幕覆蓋（更像抽屜） */
  .sidebar{
    width: 100vw;
    background: rgba(17,24,39,0.75);
    backdrop-filter: blur(16px);
  }
  .sidebar-nav{ padding: 78px 20px 20px; }
  .sidebar-nav a{ padding: 14px 16px; font-size: 16px; }
  .nav-toggle{ top: 12px; left: 12px; width: 42px; height: 42px; }
}

/* 極小手機（<= 380px） */
@media (max-width: 380px){
  .name{ font-size: 22px; }
  .tagline{ font-size: 14px; }
  .skills li{ font-size: 12px; padding: 5px 8px; }
  .event{ padding: 14px; }
  .year-badge{ font-size: .8rem; padding: 2px 8px; right: 10px; }
}

/* 願景：動效在低性能裝置更柔和 */
@media (prefers-reduced-motion: reduce){
  .avatar, .links a, .skill-card, .event, .scroll-down span{ 
    transition: none !important; animation: none !important;
  }
}

/* 行動裝置避免英文長字撐破排版 */
.intro-line{ word-break: break-word; hyphens: auto; }

/* 行動版讓 .hl 粗細柔一點 */
@media (max-width: 540px){
  .intro-line .hl{ font-weight: 600; }
}