/* ═══════════════════════════════════════
   TOKENS
═══════════════════════════════════════ */
:root { --spd: .55s; }

[data-theme="dark"] {
  --bg:        #0c0c0c;
  --bg2:       #141414;
  --bgc:       #1a1a1a;
  --fg:        #f0ece3;
  --fg2:       #7a756e;
  --acc:       #e63946;
  --acc2:      #b52d38;
  --acc-glow:  rgba(230,57,70,.22);
  --bord:      rgba(255,255,255,.07);
  --bord-acc:  rgba(230,57,70,.35);
  --tag-bg:    rgba(230,57,70,.1);
  --shadow:    0 32px 80px rgba(0,0,0,.55);
}
[data-theme="light"] {
  --bg:        #f0ede8;
  --bg2:       #e8e4de;
  --bgc:       #ffffff;
  --fg:        #111111;
  --fg2:       #6b6560;
  --acc:       #1a5fb4;
  --acc2:      #1244a0;
  --acc-glow:  rgba(26,95,180,.18);
  --bord:      rgba(0,0,0,.09);
  --bord-acc:  rgba(26,95,180,.3);
  --tag-bg:    rgba(26,95,180,.08);
  --shadow:    0 24px 60px rgba(0,0,0,.14);
}

/* ═══════════════════════════════════════
   RESET
═══════════════════════════════════════ */
*,*::before,*::after { margin:0;padding:0;box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family:'DM Sans',sans-serif;
  background:var(--bg);
  color:var(--fg);
  min-height:100vh;
  overflow-x:hidden;
  transition:background var(--spd) ease,color var(--spd) ease;
  cursor:none;
}
@media(max-width:768px){ body{cursor:auto;} }
img { display:block; width:100%; }
a { text-decoration:none; color:inherit; }
button { border:none; background:none; cursor:none; font-family:inherit; }
@media(max-width:768px){ button{cursor:pointer;} }

.mono {
  font-family:'Space Mono',monospace;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
}
.accent { color:var(--acc); }

/* ═══════════════════════════════════════
   NOISE
═══════════════════════════════════════ */
.noise {
  position:fixed;inset:-200%;width:400%;height:400%;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.025;pointer-events:none;z-index:9000;
  animation:nz .18s steps(2) infinite;
}
@keyframes nz {
  0%{transform:translate(0,0)}
  33%{transform:translate(-1%,2%)}
  66%{transform:translate(2%,-1%)}
  100%{transform:translate(-2%,1%)}
}

/* ═══════════════════════════════════════
   CURSOR
═══════════════════════════════════════ */
.cur,.cur-ring {
  position:fixed;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%);z-index:9999;
}
.cur { width:8px;height:8px;background:var(--acc);transition:transform .1s,background .3s; }
.cur-ring { width:34px;height:34px;border:1.5px solid var(--acc);opacity:.45;transition:transform .22s ease,opacity .3s; }
@media(max-width:768px){ .cur,.cur-ring{display:none;} }

/* ═══════════════════════════════════════
   LOADER
═══════════════════════════════════════ */
.loader {
  position:fixed;inset:0;background:var(--bg);
  z-index:99999;display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease,visibility .6s ease;
}
.loader.out { opacity:0;visibility:hidden; }
.loader-inner { display:flex;flex-direction:column;align-items:center;gap:20px; }
.loader-name { font-size:13px;letter-spacing:6px;color:var(--fg2); }
.loader-dots { display:flex;gap:10px; }
.loader-dots span {
  width:10px;height:10px;border-radius:50%;background:var(--acc);
  animation:dp 1.1s ease-in-out infinite;
}
.loader-dots span:nth-child(2){animation-delay:.18s;}
.loader-dots span:nth-child(3){animation-delay:.36s;}
@keyframes dp {
  0%,100%{transform:scale(.5);opacity:.3;}
  50%{transform:scale(1.25);opacity:1;}
}

/* ═══════════════════════════════════════
   THEME BUTTON
═══════════════════════════════════════ */
.theme-btn {
  position:fixed;top:20px;right:20px;z-index:8000;
  width:40px;height:40px;border-radius:50%;
  background:var(--bgc);border:1px solid var(--bord);
  display:flex;align-items:center;justify-content:center;
  color:var(--fg2);transition:all .3s ease;
}
.theme-btn:hover { border-color:var(--acc);color:var(--acc);transform:rotate(20deg) scale(1.1); }
.theme-btn svg { width:16px;height:16px;position:absolute; }
.icon-sun { transition:opacity .3s,transform .3s; }
.icon-moon { transition:opacity .3s,transform .3s; }
[data-theme="dark"] .icon-sun  { opacity:1;transform:rotate(0deg); }
[data-theme="dark"] .icon-moon { opacity:0;transform:rotate(90deg); }
[data-theme="light"] .icon-sun  { opacity:0;transform:rotate(-90deg); }
[data-theme="light"] .icon-moon { opacity:1;transform:rotate(0deg); }

/* ═══════════════════════════════════════
   PAGE LAYOUT
═══════════════════════════════════════ */
.page {
  max-width:680px;
  margin:0 auto;
  padding:40px 16px 0;
}
@media(min-width:768px){ .page{padding:60px 24px 0;} }

/* ═══════════════════════════════════════
   HERO CARD
═══════════════════════════════════════ */
.hero-card {
  background:var(--bgc);
  border:1px solid var(--bord);
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:background var(--spd) ease,box-shadow var(--spd) ease;
  /* entry animation */
  opacity:0;transform:translateY(30px);
}
.hero-card.in { opacity:1;transform:translateY(0);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),background var(--spd) ease; }

/* Portrait + Identity row */
.hero-identity {
  display:flex;align-items:center;gap:20px;
  padding:24px 20px 20px;
}
@media(max-width:480px){
  .hero-identity{ flex-direction:column;align-items:flex-start;gap:16px; }
}

/* Portrait */
.portrait-zone {
  position:relative;flex-shrink:0;
  width:100px;height:100px;
}
@media(min-width:480px){
  .portrait-zone { width:120px;height:120px; }
}
.portrait-frame {
  position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;
  border:2.5px solid var(--bord-acc);
  box-shadow:0 0 0 4px var(--acc-glow);
}
.portrait { width:100%;height:100%;object-fit:cover;object-position:top center; }
.portrait-glare {
  position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 60%);
  pointer-events:none;
}
.portrait-ring {
  position:absolute;border-radius:50%;border:1px solid var(--bord-acc);
  animation:pr 3s ease-in-out infinite;
}
.portrait-ring.r1 { inset:-8px;animation-delay:0s; }
.portrait-ring.r2 { inset:-16px;opacity:.4;animation-delay:1s; }
@keyframes pr { 0%,100%{transform:scale(1);opacity:.6;}50%{transform:scale(1.04);opacity:1;} }

/* Identity text */
.identity-text { flex:1;min-width:0; }
.identity-tag { color:var(--fg2);margin-bottom:8px; }
.hero-name {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.4rem, 11vw, 4rem);
  line-height:.95;
  letter-spacing:1px;
  margin-bottom:10px;
}
.name-a { color:var(--fg); }
.name-b {
  color:var(--acc);
  text-shadow:0 0 40px var(--acc-glow);
  animation:nameGlow 3s ease-in-out infinite;
}
@keyframes nameGlow{
  0%,100%{text-shadow:0 0 30px var(--acc-glow);}
  50%{text-shadow:0 0 60px var(--acc-glow),0 0 20px var(--acc);}
}
.name-c { color:var(--fg); }
.hero-tagline {
  font-size:clamp(.8rem, 3.5vw, 1rem);
  color:var(--fg2);line-height:1.5;
}
.hero-tagline em { font-style:normal;color:var(--fg);font-weight:600; }

/* Info pills (collapsible) */
.info-pills {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:0 20px;
  max-height:0;overflow:hidden;
  transition:max-height .5s cubic-bezier(.16,1,.3,1),
             padding .5s cubic-bezier(.16,1,.3,1),
             opacity .4s ease;
  opacity:0;
}
.info-pills.open {
  max-height:300px;
  padding:4px 20px 16px;
  opacity:1;
}
@media(max-width:420px){
  .info-pills { grid-template-columns:1fr; }
}
.pill {
  background:var(--bg2);border:1px solid var(--bord);
  border-radius:10px;padding:12px 14px;
  transition:border-color .3s;
}
.pill:hover { border-color:var(--bord-acc); }
.pill-label { display:block;color:var(--fg2);margin-bottom:5px; }
.pill-val { font-size:.82rem;font-weight:500; }
.pill-val.accent { color:var(--acc); }

/* Reveal button */
.reveal-btn {
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:calc(100% - 40px);margin:0 20px 16px;
  padding:12px 0;
  border:1px solid var(--bord);border-radius:10px;
  color:var(--fg2);font-size:.82rem;font-weight:500;
  transition:all .3s ease;
  background:var(--bg2);
}
.reveal-btn:hover {
  border-color:var(--bord-acc);color:var(--acc);
  background:var(--tag-bg);
}
.reveal-btn-arrow {
  width:14px;height:14px;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.reveal-btn.open .reveal-btn-arrow { transform:rotate(180deg); }

/* Connect strip */
.connect-strip {
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--bord);
}
@media(max-width:400px){
  .connect-strip { grid-template-columns:repeat(2,1fr); }
}
.connect-link {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:18px 8px;
  border-right:1px solid var(--bord);
  font-size:.7rem;font-weight:600;letter-spacing:.5px;
  color:var(--fg2);
  transition:all .35s cubic-bezier(.16,1,.3,1);
  position:relative;overflow:hidden;
}
.connect-link:last-child { border-right:none; }
.connect-link::before {
  content:'';position:absolute;inset:0;
  opacity:0;transition:opacity .35s ease;
}
.connect-link svg { width:20px;height:20px;transition:transform .35s cubic-bezier(.16,1,.3,1); }
.connect-link:hover svg { transform:translateY(-3px) scale(1.1); }

.connect-link.tg::before { background:rgba(41,182,246,.1); }
.connect-link.tg:hover { color:#29b6f6;border-color:rgba(41,182,246,.25); }
.connect-link.tg:hover::before { opacity:1; }

.connect-link.ig::before { background:rgba(225,48,108,.1); }
.connect-link.ig:hover { color:#e1306c;border-color:rgba(225,48,108,.25); }
.connect-link.ig:hover::before { opacity:1; }

.connect-link.em::before { background:rgba(var(--acc),.08); }
.connect-link.em:hover { color:var(--acc);border-color:var(--bord-acc); }
.connect-link.em:hover::before { opacity:1; }

.connect-link.yt::before { background:rgba(255,0,0,.08); }
.connect-link.yt:hover { color:#ff0000;border-color:rgba(255,0,0,.25); }
.connect-link.yt:hover::before { opacity:1; }

/* ═══════════════════════════════════════
   SECTIONS WRAP
═══════════════════════════════════════ */
.sections-wrap {
  margin-top:24px;
  display:flex;flex-direction:column;gap:16px;
  padding-bottom:48px;
}

/* ═══════════════════════════════════════
   BLOCK (each section card)
═══════════════════════════════════════ */
.block {
  background:var(--bgc);
  border:1px solid var(--bord);
  border-radius:20px;
  padding:32px 24px;
  transition:background var(--spd),border-color .3s;
  /* reveal */
  opacity:0;transform:translateY(28px);
}
.block.in {
  opacity:1;transform:translateY(0);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),
             transform .7s cubic-bezier(.16,1,.3,1),
             background var(--spd),border-color .3s;
}
.block-label { color:var(--fg2);margin-bottom:14px; }
.block-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(1.8rem, 8vw, 2.8rem);
  line-height:1;letter-spacing:.5px;
  margin-bottom:24px;
}
.block-title em { font-style:normal;color:var(--acc); }

/* ═══════════════════════════════════════
   ABOUT
═══════════════════════════════════════ */
.about-body p {
  color:var(--fg2);font-size:.92rem;line-height:1.75;margin-bottom:14px;
}
.about-body p:last-child { margin-bottom:0; }
.about-stats {
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:12px;margin-top:28px;
}
.astat {
  background:var(--bg2);border:1px solid var(--bord);
  border-radius:12px;padding:18px 14px;
  text-align:center;
  transition:border-color .3s;
}
.astat:hover { border-color:var(--bord-acc); }
.astat-n {
  display:block;
  font-size:clamp(1.6rem,6vw,2.2rem);
  color:var(--acc);letter-spacing:0;
  margin-bottom:6px;
}
.astat-l { font-size:.72rem;color:var(--fg2); }

/* ═══════════════════════════════════════
   SKILLS
═══════════════════════════════════════ */
.skills-list { display:flex;flex-direction:column;gap:0; }
.sk-row {
  display:flex;flex-direction:column;gap:10px;
  padding:18px 0;border-bottom:1px solid var(--bord);
  transition:padding .3s;
}
.sk-row:first-child { padding-top:0; }
.sk-row:last-child { border-bottom:none;padding-bottom:0; }
.sk-row:hover { padding-left:4px; }
.sk-info {
  display:flex;align-items:center;gap:14px;
}
.sk-icon {
  width:38px;height:38px;flex-shrink:0;
  background:var(--tag-bg);border:1px solid var(--bord-acc);
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:var(--acc);
  transition:background .3s;
}
.sk-row:hover .sk-icon { background:var(--acc);color:#fff; }
.sk-icon svg { width:16px;height:16px; }
.sk-name { font-size:.9rem;font-weight:600;margin-bottom:3px; }
.sk-desc { color:var(--fg2); }
.sk-bar-wrap { display:flex;align-items:center;gap:10px; }
.sk-bar {
  flex:1;height:3px;background:var(--bord);border-radius:2px;overflow:hidden;
}
.sk-fill {
  height:100%;width:0%;border-radius:2px;
  background:linear-gradient(90deg,var(--acc2),var(--acc));
  transition:width 1.2s cubic-bezier(.16,1,.3,1);
  box-shadow:0 0 10px var(--acc-glow);
}
.sk-pct { flex-shrink:0;color:var(--fg2); }

/* ═══════════════════════════════════════
   EXPERIENCE
═══════════════════════════════════════ */
.exp-list { display:flex;flex-direction:column;gap:12px; }
.exp-card {
  display:flex;gap:16px;
  background:var(--bg2);border:1px solid var(--bord);
  border-radius:14px;padding:20px;
  transition:all .35s cubic-bezier(.16,1,.3,1);
  position:relative;overflow:hidden;
}
.exp-card::before {
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--acc);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.exp-card:hover::before { transform:scaleY(1); }
.exp-card:hover { border-color:var(--bord-acc);transform:translateX(4px); }
.exp-card.active-card { border-color:var(--bord-acc); }
.exp-card.active-card::before { transform:scaleY(1); }
.exp-num { color:var(--fg2);padding-top:2px; }
.exp-body { flex:1;min-width:0; }
.exp-header { display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px; }
.exp-header h3 { font-size:.95rem;font-weight:600; }
.exp-dur { color:var(--fg2); }
.exp-dur.accent { color:var(--acc); }
.exp-body p { font-size:.84rem;color:var(--fg2);line-height:1.65;margin-bottom:12px; }
.exp-tags { display:flex;flex-wrap:wrap;gap:6px; }
.exp-tags span {
  font-size:.65rem;letter-spacing:1.5px;text-transform:uppercase;
  font-family:'Space Mono',monospace;
  padding:3px 10px;
  background:var(--tag-bg);border:1px solid var(--bord-acc);
  color:var(--acc);border-radius:4px;
}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.site-footer {
  text-align:center;padding:32px 16px 40px;
  color:var(--fg2);
}

/* ═══════════════════════════════════════
   RESPONSIVE TWEAKS
═══════════════════════════════════════ */
@media(max-width:360px){
  .hero-name { font-size:2rem; }
  .block { padding:24px 16px; }
  .about-stats { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════
   CONTROLS ROW (lang + theme)
═══════════════════════════════════════ */
.controls-row {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 8000;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ─── LANG SWITCHER ─── */
.lang-switcher {
  position: relative;
  display: flex;
  background: var(--bgc);
  border: 1px solid var(--bord);
  border-radius: 10px;
  overflow: hidden;
  height: 36px;
}

.lang-btn {
  position: relative;
  z-index: 2;
  width: 38px;
  height: 100%;
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--fg2);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color .25s ease;
}
@media(max-width:768px){ .lang-btn { cursor: pointer; } }

.lang-btn.active {
  color: var(--bgc);
}

/* sliding pill behind active btn */
.lang-slider {
  position: absolute;
  top: 4px; bottom: 4px;
  left: 4px;
  width: calc(33.333% - 4px);
  background: var(--acc);
  border-radius: 6px;
  transition: transform .3s cubic-bezier(.16,1,.3,1),
              background .3s ease;
  pointer-events: none;
  z-index: 1;
}

/* override: theme-btn no longer fixed on its own */
.theme-btn {
  position: static !important;
  top: auto !important;
  right: auto !important;
}