/* style.css — Professional Matte Dark/Light Theme */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ===== Dark Mode (default) ===== */
:root{
  --burnt-rose:#984447;
  --icy-blue:#add9f4;
  --smart-blue:#476c9b;
  --pacific-cyan:#468c98;
  --ink-black:#101419;

  --bg:#0c1017;
  --card:rgba(14,19,28,0.62);
  --accent:#5fa8b5;
  --accent2:#b85a5d;
  --accent3:#c4e3f5;
  --accent4:#5e85b8;
  --muted:#8fa4b8;
  --text:#e2edf6;
  --glass:rgba(14,19,28,0.50);
  --shadow:rgba(70,140,152,0.08);
  --border:rgba(95,168,181,0.10);

  /* Spacing system */
  --space-xs:8px;
  --space-sm:14px;
  --space-md:24px;
  --space-lg:36px;
  --space-xl:48px;
  --space-2xl:64px;
  --radius:16px;
  --radius-sm:12px;
  --radius-lg:20px;

  /* Blob opacity for JS */
  --blob-alpha:0.45;
  --overlay-bg:rgba(12,16,23,0.45);
}

/* ===== Light Mode (system preference) ===== */
@media(prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#f0f4f8;
    --card:rgba(255,255,255,0.60);
    --accent:#3d8e9a;
    --accent2:#a04548;
    --accent3:#2e6a96;
    --accent4:#476c9b;
    --muted:#5a6d82;
    --text:#1a2332;
    --glass:rgba(255,255,255,0.48);
    --shadow:rgba(60,120,140,0.08);
    --border:rgba(60,120,140,0.12);
    --blob-alpha:0.38;
    --overlay-bg:rgba(240,244,248,0.35);
  }
}

/* ===== Manual Light Mode Override ===== */
:root[data-theme="light"]{
  --bg:#f0f4f8;
  --card:rgba(255,255,255,0.60);
  --accent:#3d8e9a;
  --accent2:#a04548;
  --accent3:#2e6a96;
  --accent4:#476c9b;
  --muted:#5a6d82;
  --text:#1a2332;
  --glass:rgba(255,255,255,0.48);
  --shadow:rgba(60,120,140,0.08);
  --border:rgba(60,120,140,0.12);
  --blob-alpha:0.38;
  --overlay-bg:rgba(240,244,248,0.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{height:100%}

body{
  font-family:'Inter','Space Grotesk',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
  line-height:1.6;
}

/* ===== Lava-lamp gradient canvas background ===== */
#orb-canvas{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
}

/* Matte frosted overlay — diffuses blobs into soft cloudy gradients */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  background:var(--overlay-bg);
  backdrop-filter:blur(100px) saturate(1.4);
  -webkit-backdrop-filter:blur(100px) saturate(1.4);
}

/* ===== Intro Animation Overlay ===== */
#intro-overlay{
  position:fixed;
  inset:0;
  z-index:10002;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity 0.8s ease;
}
#intro-overlay.fade-out{
  opacity:0;
  pointer-events:none;
}

.intro-word{
  position:absolute;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(48px,10vw,120px);
  color:var(--text);
  text-align:center;
  width:90%;
  max-width:1000px;
  padding:0 var(--space-md);
  top:50%;
  left:50%;
  opacity:0;
  transform:translate(-50%, -50%) scale(0.88);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
}
.intro-word.active{
  animation:introWordIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.intro-text {
  position:relative;
  z-index:2;
  display:block;
}

#intro-canvas {
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
}

/* "Impact." gets gradient text on the actual text element for reliable clipping */
#intro-w3 .intro-text{
  /* fallback color to ensure visibility if background-clip isn't supported */
  color: var(--accent);
  background:linear-gradient(135deg,var(--accent),var(--accent3));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Individual stagger-up animations for each word */
#intro-w1.stagger-up-1st{
  animation:introWordStaggerUp1st 0.7s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}
#intro-w1.stagger-up-2nd{
  animation:introWordStaggerUp1st2nd 0.7s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}
#intro-w2.stagger-up-1st{
  animation:introWordStaggerUp2st 0.7s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

@keyframes introWordIn{
  0%{opacity:0;transform:translate(-50%, -50%) scale(0.88)}
  100%{opacity:1;transform:translate(-50%, -50%) scale(1)}
}

/* Word 1: first stagger (0 to -12vh) */
@keyframes introWordStaggerUp1st{
  0%{opacity:1;transform:translate(-50%, calc(-50% - 0vh)) scale(1)}
  100%{opacity:0.2;transform:translate(-50%, calc(-50% - 12vh)) scale(0.95)}
}

/* Word 1: second stagger (-12vh to -24vh) */
@keyframes introWordStaggerUp1st2nd{
  0%{opacity:0.2;transform:translate(-50%, calc(-50% - 12vh)) scale(0.95)}
  100%{opacity:0.2;transform:translate(-50%, calc(-50% - 24vh)) scale(0.95)}
}

/* Word 2: first stagger (0 to -12vh) */
@keyframes introWordStaggerUp2st{
  0%{opacity:1;transform:translate(-50%, calc(-50% - 0vh)) scale(1)}
  100%{opacity:0.2;transform:translate(-50%, calc(-50% - 12vh)) scale(0.95)}
}

/* ===== Layout ===== */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:var(--space-xl) var(--space-md);
}

/* ===== Header ===== */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:var(--space-md);
  border-radius:var(--radius);
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--border);
  margin-bottom:var(--space-lg);
}

.brand{display:flex;align-items:center;gap:var(--space-sm)}
.brand img{
  width:44px;height:44px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(95,168,181,0.2);
}
.brand h1{font-size:18px;font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--text)}
.subtitle{font-size:13px;color:var(--muted);font-weight:500}

nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
nav a{
  font-size:13px;
  color:var(--muted);
  text-decoration:none;
  padding:8px 16px;
  border-radius:var(--radius-sm);
  font-weight:600;
  transition:all 0.25s ease;
  border:1px solid transparent;
  white-space:nowrap;
}
nav a:hover{
  color:var(--text);
  background:rgba(95,168,181,0.06);
  border-color:var(--border);
}
nav a.active{
  color:var(--accent);
  background:rgba(95,168,181,0.08);
  border-color:rgba(95,168,181,0.12);
}

/* ===== Matte Card ===== */
.card{
  padding:var(--space-lg);
  border-radius:var(--radius-lg);
  background:var(--glass);
  backdrop-filter:blur(24px) saturate(1.3);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);
  border:1px solid var(--border);
  position:relative;
  overflow:hidden;
  transition:all 0.35s ease;
  display:flex;
  flex-direction:column;
}
.card:hover{
  box-shadow:0 8px 40px rgba(95,168,181,0.06);
  border-color:rgba(95,168,181,0.15);
}

/* Even spacing between stacked cards (not inside grid layouts) */
.card + .card,
main > section + section,
main > .card + .card{
  margin-top:var(--space-md);
}
.hero > .card + .card{
  margin-top:0;
}

/* ===== Hero Layout ===== */
.hero{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:var(--space-md);
  align-items:stretch;
}

/* ===== Profile Card ===== */
.profile-card{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-md);
}
.profile-card img{
  width:120px;height:120px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid rgba(95,168,181,0.2);
}
.profile-bio{color:var(--muted);font-size:13px;line-height:1.8}

/* ===== Intro Section ===== */
.intro h2{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(24px,5vw,32px);
  font-weight:700;
  margin-bottom:var(--space-md);
  line-height:1.2;
}
.gradient-text{
  background:linear-gradient(135deg,var(--accent),var(--accent3));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.typewriter-cursor{
  display:inline-block;width:2px;height:1em;
  background:var(--accent);vertical-align:text-bottom;
  animation:blink 1s step-end infinite;margin-left:2px;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.tagline{
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
  margin-bottom:var(--space-md);
}

/* ===== Stats ===== */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:var(--space-md);
}
.stat{
  padding:var(--space-sm) var(--space-md);
  border-radius:var(--radius-sm);
  background:rgba(95,168,181,0.06);
  border:1px solid rgba(95,168,181,0.12);
  text-align:center;
  transition:all 0.3s ease;
}
.stat:hover{
  transform:translateY(-2px);
  background:rgba(95,168,181,0.08);
}
.stat-value{
  font-family:'Space Grotesk',sans-serif;
  font-size:22px;
  font-weight:700;
  color:var(--accent3);
}
.stat-label{font-size:11px;color:var(--muted);margin-top:6px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}

/* ===== CTA Buttons ===== */
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 32px;
  border-radius:var(--radius-sm);
  font-weight:700;
  font-size:14px;
  color:var(--text);
  text-decoration:none;
  background:linear-gradient(135deg,var(--accent),var(--accent4));
  border:none;
  cursor:pointer;
  transition:all 0.3s ease;
  font-family:inherit;
  white-space:nowrap;
}
.cta:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(95,168,181,0.2);
}
.cta-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 32px;
  border-radius:var(--radius-sm);
  font-weight:700;
  font-size:14px;
  color:var(--accent);
  text-decoration:none;
  border:1.5px solid var(--border);
  background:transparent;
  transition:all 0.3s ease;
  white-space:nowrap;
}
.cta-secondary:hover{
  border-color:var(--accent);
  background:rgba(95,168,181,0.06);
  transform:translateY(-2px);
}

/* ===== Skill Chips ===== */
.skills{display:flex;flex-wrap:wrap;gap:8px}
.skill{
  padding:5px 12px;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  color:var(--accent);
  background:rgba(95,168,181,0.08);
  border:1px solid rgba(95,168,181,0.10);
  transition:all 0.25s ease;
}
.skill:hover{
  background:rgba(95,168,181,0.14);
  transform:translateY(-1px);
}

/* ===== Marquee ===== */
.marquee-container{
  overflow:hidden;
  padding:var(--space-sm) 0;
  margin:var(--space-lg) 0;
  border-radius:var(--radius-sm);
  background:rgba(95,168,181,0.03);
  border:1px solid var(--border);
}
.marquee{
  display:flex;
  gap:var(--space-xl);
  white-space:nowrap;
  animation:scrollX 45s linear infinite;
}
.marquee span{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  letter-spacing:0.3px;
  padding:0 var(--space-sm);
}
@keyframes scrollX{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ===== Section Title ===== */
.section-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(18px,4vw,24px);
  font-weight:700;
  color:var(--text);
  line-height:1.3;
  margin:0;
}

/* ===== Project Grid ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--space-md);
  margin-top:var(--space-md);
}

.project{
  padding:var(--space-md);
  border-radius:var(--radius);
  background:var(--glass);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid var(--border);
  position:relative;
  overflow:hidden;
  transition:all 0.35s ease;
  min-height:200px;
  display:flex;
  flex-direction:column;
}
.project:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 30px var(--shadow);
  border-color:rgba(95,168,181,0.2);
}

.project h3{margin:0 0 var(--space-xs);font-size:16px;font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--text)}
.project-tag{
  display:inline-block;
  padding:3px 10px;
  border-radius:6px;
  font-size:11px;
  font-weight:700;
  margin-bottom:10px;
  letter-spacing:0.5px;
  text-transform:uppercase;
}
.tag-ai{background:rgba(95,168,181,0.12);color:var(--accent)}
.tag-auto{background:rgba(184,90,93,0.12);color:var(--accent2)}
.tag-bi{background:rgba(196,227,245,0.10);color:var(--accent3)}

.project p{color:var(--muted);margin:var(--space-xs) 0;font-size:13px;line-height:1.7;flex-grow:1}

/* --- BI / Data animation: scrolling data rows --- */
.project[data-anim="bi"]::after{
  content:'';position:absolute;right:0;bottom:0;
  width:100px;height:100%;opacity:0.04;pointer-events:none;
  background:repeating-linear-gradient(0deg,var(--accent3) 0px,var(--accent3) 2px,transparent 2px,transparent 12px);
  animation:dataScroll 4s linear infinite;
}
@keyframes dataScroll{from{background-position:0 0}to{background-position:0 -120px}}

.project[data-anim="bi"]::before{
  content:'';position:absolute;right:16px;bottom:16px;
  width:60px;height:50px;opacity:0;transition:opacity 0.4s ease;pointer-events:none;
  background:
    linear-gradient(0deg,var(--accent3) 0%,var(--accent3) 100%) 0 100%/8px 0 no-repeat,
    linear-gradient(0deg,var(--accent) 0%,var(--accent) 100%) 12px 100%/8px 0 no-repeat,
    linear-gradient(0deg,var(--accent4) 0%,var(--accent4) 100%) 24px 100%/8px 0 no-repeat,
    linear-gradient(0deg,var(--accent3) 0%,var(--accent3) 100%) 36px 100%/8px 0 no-repeat,
    linear-gradient(0deg,var(--accent) 0%,var(--accent) 100%) 48px 100%/8px 0 no-repeat;
  animation:none;
}
.project[data-anim="bi"]:hover::before{opacity:0.2;animation:barGrow 1.5s ease-out forwards}
@keyframes barGrow{to{background-size:8px 70%,8px 45%,8px 85%,8px 55%,8px 65%}}

/* --- GenAI animation: text generation lines --- */
.project[data-anim="ai"]::after{
  content:'';position:absolute;right:12px;bottom:12px;
  width:80px;height:60px;opacity:0.04;pointer-events:none;
  background:
    linear-gradient(90deg,var(--accent) 0%,transparent 100%) 0 0/0% 2px no-repeat,
    linear-gradient(90deg,var(--accent3) 0%,transparent 100%) 0 10px/0% 2px no-repeat,
    linear-gradient(90deg,var(--accent) 0%,transparent 100%) 0 20px/0% 2px no-repeat,
    linear-gradient(90deg,var(--accent3) 0%,transparent 100%) 0 30px/0% 2px no-repeat,
    linear-gradient(90deg,var(--accent) 0%,transparent 100%) 0 40px/0% 2px no-repeat;
  animation:typeLines 3s ease-in-out infinite;
}
@keyframes typeLines{
  0%{background-size:0% 2px,0% 2px,0% 2px,0% 2px,0% 2px}
  20%{background-size:90% 2px,0% 2px,0% 2px,0% 2px,0% 2px}
  40%{background-size:90% 2px,70% 2px,0% 2px,0% 2px,0% 2px}
  60%{background-size:90% 2px,70% 2px,80% 2px,0% 2px,0% 2px}
  80%{background-size:90% 2px,70% 2px,80% 2px,60% 2px,0% 2px}
  100%{background-size:90% 2px,70% 2px,80% 2px,60% 2px,45% 2px}
}

/* --- Automation animation: flowing dots --- */
.project[data-anim="auto"]::after{
  content:'';position:absolute;right:0;bottom:20px;
  width:100%;height:3px;opacity:0.06;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--accent2) 0px,var(--accent2) 6px,transparent 6px,transparent 18px);
  animation:flowDots 2s linear infinite;
}
@keyframes flowDots{from{background-position:0 0}to{background-position:60px 0}}

.project[data-anim="auto"]::before{
  content:'⚙';position:absolute;right:16px;bottom:16px;
  font-size:28px;opacity:0;color:var(--accent2);
  transition:opacity 0.3s ease;animation:gearSpin 4s linear infinite;pointer-events:none;
}
.project[data-anim="auto"]:hover::before{opacity:0.12}
@keyframes gearSpin{to{transform:rotate(360deg)}}

/* --- Strategy animation: rising trend line --- */
.project[data-anim="strategy"]::after{
  content:'';position:absolute;right:12px;bottom:12px;
  width:70px;height:50px;opacity:0.06;pointer-events:none;
  border-bottom:2px solid var(--accent3);border-left:2px solid var(--accent3);
}
.project[data-anim="strategy"]::before{
  content:'';position:absolute;right:14px;bottom:14px;
  width:64px;height:44px;opacity:0;pointer-events:none;
  background:linear-gradient(to top right,transparent 45%,var(--accent4) 45%,var(--accent4) 47%,transparent 47%);
  transition:opacity 0.4s ease;
}
.project[data-anim="strategy"]:hover::before{opacity:0.15;animation:trendPulse 2s ease-in-out infinite}
@keyframes trendPulse{0%,100%{opacity:0.15}50%{opacity:0.25}}

/* --- BCM / Shield animation --- */
.project[data-anim="bcm"]::before{
  content:'🛡';position:absolute;right:16px;bottom:16px;
  font-size:26px;opacity:0;transition:opacity 0.3s ease;pointer-events:none;
  animation:shieldPulse 2.5s ease-in-out infinite;
}
.project[data-anim="bcm"]:hover::before{opacity:0.12}
@keyframes shieldPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* --- Analytics animation: floating data points --- */
.project[data-anim="analytics"]::after{
  content:'';position:absolute;right:10px;bottom:10px;
  width:80px;height:60px;opacity:0.05;pointer-events:none;
  background:
    radial-gradient(circle 3px,var(--accent3) 100%,transparent 100%) 10px 10px no-repeat,
    radial-gradient(circle 3px,var(--accent) 100%,transparent 100%) 30px 25px no-repeat,
    radial-gradient(circle 3px,var(--accent4) 100%,transparent 100%) 50px 15px no-repeat,
    radial-gradient(circle 3px,var(--accent2) 100%,transparent 100%) 20px 40px no-repeat,
    radial-gradient(circle 3px,var(--accent3) 100%,transparent 100%) 60px 38px no-repeat,
    radial-gradient(circle 3px,var(--accent) 100%,transparent 100%) 40px 48px no-repeat;
  animation:dataPop 3s ease-in-out infinite alternate;
}
@keyframes dataPop{0%{transform:scale(0.9);opacity:0.03}100%{transform:scale(1.1);opacity:0.07}}

/* --- Copilot animation: blinking cursor --- */
.project[data-anim="copilot"]::after{
  content:'_';position:absolute;right:18px;bottom:18px;
  font-family:monospace;font-size:20px;color:var(--accent);
  opacity:0;pointer-events:none;animation:cursorBlink 1s step-end infinite;
}
.project[data-anim="copilot"]:hover::after{opacity:0.2}
@keyframes cursorBlink{0%,100%{opacity:0.2}50%{opacity:0}}

/* --- Workflow animation: connected nodes --- */
.project[data-anim="workflow"]::after{
  content:'';position:absolute;right:12px;bottom:16px;
  width:70px;height:30px;opacity:0.05;pointer-events:none;
  background:
    radial-gradient(circle 5px,var(--accent) 100%,transparent 100%) 0 12px no-repeat,
    linear-gradient(90deg,var(--accent) 0%,var(--accent) 100%) 8px 14px/18px 2px no-repeat,
    radial-gradient(circle 5px,var(--accent4) 100%,transparent 100%) 28px 12px no-repeat,
    linear-gradient(90deg,var(--accent4) 0%,var(--accent4) 100%) 36px 14px/18px 2px no-repeat,
    radial-gradient(circle 5px,var(--accent3) 100%,transparent 100%) 56px 12px no-repeat;
  animation:nodeFlow 2s ease-in-out infinite;
}
@keyframes nodeFlow{0%,100%{opacity:0.05}50%{opacity:0.1}}

/* ===== Experience timeline ===== */
.timeline{position:relative;padding-left:28px;margin-top:var(--space-md)}
.timeline::before{
  content:'';position:absolute;left:10px;top:0;bottom:0;
  width:2px;border-radius:1px;
  background:linear-gradient(180deg,var(--accent),var(--accent2),var(--accent4));
  opacity:0.3;
}

.timeline-item{
  position:relative;
  margin-bottom:var(--space-md);
  padding:var(--space-md);
  background:var(--glass);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-radius:var(--radius);
  border:1px solid var(--border);
  transition:all 0.3s ease;
}
.timeline-item:hover{
  transform:translateX(4px);
  box-shadow:0 4px 20px var(--shadow);
}
.timeline-item::before{
  content:'';position:absolute;left:-24px;top:24px;
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);border:2px solid var(--bg);
  box-shadow:0 0 8px rgba(95,168,181,0.3);
}

.timeline-date{font-size:12px;font-weight:600;color:var(--accent);margin-bottom:6px}
.timeline-title{font-size:16px;font-weight:700;font-family:'Space Grotesk',sans-serif;margin-bottom:4px;color:var(--text)}
.timeline-company{font-size:13px;color:var(--muted);margin-bottom:var(--space-md);font-weight:500}
.timeline-item ul{padding-left:20px;color:var(--muted);font-size:13px;line-height:1.8;margin:0}
.timeline-item li{margin-bottom:6px}

/* ===== Education & Certs ===== */
.edu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-md);margin-top:var(--space-md)}
.edu-item{
  padding:var(--space-md);border-radius:var(--radius);
  background:var(--glass);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--border);transition:all 0.3s ease;
}
.edu-item:hover{transform:translateY(-3px);box-shadow:0 4px 16px var(--shadow)}
.edu-item h4{font-size:14px;font-weight:700;margin-bottom:6px;color:var(--text)}
.edu-item p{color:var(--muted);font-size:13px;margin:0;line-height:1.6}

.cert-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:var(--radius-sm);
  background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border);font-size:13px;font-weight:600;color:var(--text);
  transition:all 0.3s ease;animation:badgeFade 0.5s ease-out backwards;
}
.cert-badge:hover{transform:scale(1.03);border-color:rgba(95,168,181,0.15)}
@keyframes badgeFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ===== Extracurricular ===== */
.extra-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-md);margin-top:var(--space-md)}
.extra-item{
  padding:var(--space-md);border-radius:var(--radius-sm);
  background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border);transition:all 0.3s ease;
}
.extra-item:hover{transform:translateY(-2px);border-color:rgba(95,168,181,0.12)}
.extra-item h4{font-size:13px;font-weight:700;margin-bottom:4px;color:var(--text)}
.extra-item p{color:var(--muted);font-size:12px;margin:0;line-height:1.6}

/* ===== Footer ===== */
.footer{
  margin-top:var(--space-xl);padding:var(--space-md);
  color:var(--muted);text-align:center;font-size:13px;line-height:1.8;
  border-radius:var(--radius-lg);background:var(--glass);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);
}
.footer a{color:var(--accent3);text-decoration:none;font-weight:600;transition:color 0.25s ease}
.footer a:hover{color:var(--accent)}

/* ===== Reveal animations ===== */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease,transform 0.6s ease}
.reveal.revealed{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-20px);transition:opacity 0.6s ease,transform 0.6s ease}
.reveal-left.revealed{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(20px);transition:opacity 0.6s ease,transform 0.6s ease}
.reveal-right.revealed{opacity:1;transform:translateX(0)}

/* ===== Animated underline ===== */
.underline{position:relative;display:inline-block;color:var(--accent3);text-decoration:none;font-weight:600}
.underline::after{
  content:'';position:absolute;left:0;bottom:-2px;
  height:2px;width:100%;border-radius:1px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transform:scaleX(0);transform-origin:left;transition:transform 0.3s ease;
}
.underline:hover::after{transform:scaleX(1)}

/* ===== Pulse text ===== */
.pulse{display:inline-block;animation:pulse 2.5s ease-in-out infinite;color:var(--accent3);font-weight:700}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}

/* ===== Blob ===== */
.blob{
  position:absolute;right:-100px;top:-60px;opacity:0.08;
  width:500px;height:500px;filter:blur(50px);pointer-events:none;
  animation:blobMorph 12s ease-in-out infinite alternate;
}
@keyframes blobMorph{0%{transform:scale(1) rotate(0deg)}100%{transform:scale(1.15) rotate(20deg)}}

/* ===== Confetti / sparkles canvas ===== */
#confetti-canvas{position:fixed;inset:0;z-index:9998;pointer-events:none}

/* ===== Form Styles ===== */
.form-group{display:flex;flex-direction:column;gap:var(--space-md)}
.form-group input,
.form-group textarea{
  padding:14px 18px;border-radius:var(--radius-sm);
  border:1.5px solid var(--border);
  background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--text);font-family:inherit;font-size:14px;line-height:1.6;
  transition:all 0.25s ease;outline:none;
  box-sizing:border-box;
}
.form-group input:focus,
.form-group textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 12px var(--shadow);
}
.form-group input::placeholder,
.form-group textarea::placeholder{color:var(--muted);opacity:0.5}

/* ===== Cursor dots ===== */
.cursor-dot{position:fixed;pointer-events:none;z-index:9999;mix-blend-mode:normal;transition:transform .1s linear}

/* ===== Competency grid ===== */
.competency-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-sm);margin-top:var(--space-md)}
.competency-item{
  padding:14px 16px;border-radius:var(--radius-sm);
  background:rgba(95,168,181,0.04);border:1px solid rgba(95,168,181,0.06);
  font-size:13px;font-weight:500;color:var(--text);
  display:flex;align-items:center;gap:10px;transition:all 0.25s ease;
}
.competency-item:hover{transform:translateX(3px);background:rgba(95,168,181,0.08)}
.competency-item .icon{font-size:16px;flex-shrink:0}

/* ===== Tech stack 3-col ===== */
.tech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-md);margin-top:var(--space-md)}
.tech-category{
  padding:var(--space-md);border-radius:var(--radius);
  background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border);
}
.tech-category h4{font-size:14px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px;color:var(--text)}
.tech-category ul{list-style:none;padding:0;margin:0}
.tech-category li{padding:6px 0;color:var(--muted);font-size:13px;display:flex;align-items:center;gap:8px;line-height:1.6}
.tech-category li::before{content:'›';color:var(--accent);font-weight:700;font-size:16px;flex-shrink:0}

/* ========================================
   Theme Editor Panel
   ======================================== */

#theme-toggle{
  position:fixed;bottom:24px;right:24px;z-index:10001;
  width:48px;height:48px;border-radius:50%;
  border:1.5px solid var(--border);background:var(--glass);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  color:var(--accent);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.3s ease;box-shadow:0 4px 20px var(--shadow);
}
#theme-toggle:hover{transform:scale(1.08);border-color:var(--accent)}
#theme-toggle.active{background:rgba(95,168,181,0.15);border-color:var(--accent)}

#theme-panel{
  position:fixed;bottom:84px;right:24px;z-index:10000;
  width:320px;max-height:calc(100vh - 120px);overflow-y:auto;
  border-radius:var(--radius-lg);background:var(--glass);
  backdrop-filter:blur(30px) saturate(1.4);-webkit-backdrop-filter:blur(30px) saturate(1.4);
  border:1px solid var(--border);box-shadow:0 12px 48px var(--shadow);
  padding:var(--space-md);
  opacity:0;visibility:hidden;transform:translateY(12px) scale(0.96);
  transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
}
#theme-panel.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

#theme-panel::-webkit-scrollbar{width:4px}
#theme-panel::-webkit-scrollbar-track{background:transparent}
#theme-panel::-webkit-scrollbar-thumb{background:rgba(95,168,181,0.15);border-radius:2px}

.tp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}
.tp-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;color:var(--text)}
.tp-close{
  width:28px;height:28px;border-radius:8px;border:1px solid var(--border);
  background:transparent;color:var(--muted);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;
}
.tp-close:hover{color:var(--text);border-color:var(--accent2);background:rgba(184,90,93,0.08)}

.tp-swatches{display:flex;flex-direction:column;gap:10px;margin-bottom:var(--space-md)}
.tp-swatch-row{display:flex;align-items:center;gap:10px}
.tp-swatch-label{font-size:12px;font-weight:600;color:var(--muted);width:80px;flex-shrink:0}
.tp-color-input{width:36px;height:28px;border:1px solid var(--border);border-radius:6px;background:transparent;cursor:pointer;padding:0;flex-shrink:0}
.tp-color-input::-webkit-color-swatch-wrapper{padding:2px}
.tp-color-input::-webkit-color-swatch{border-radius:4px;border:none}
.tp-hex-label{font-size:12px;font-family:'Space Grotesk',monospace;color:var(--muted);letter-spacing:0.3px}

.tp-divider{height:1px;background:var(--border);margin:var(--space-sm) 0}

.tp-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:10px 16px;border-radius:var(--radius-sm);
  font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;
  transition:all 0.25s ease;border:1px solid transparent;
}
.tp-btn-random{background:rgba(95,168,181,0.08);color:var(--accent);border-color:rgba(95,168,181,0.10)}
.tp-btn-random:hover{background:rgba(95,168,181,0.14);transform:translateY(-1px)}
.tp-btn-apply{background:linear-gradient(135deg,var(--accent),var(--accent4));color:var(--text);border:none;margin-top:var(--space-xs)}
.tp-btn-apply:hover{transform:translateY(-1px);box-shadow:0 4px 16px var(--shadow)}
.tp-btn-reset{background:transparent;color:var(--muted);border-color:var(--border)}
.tp-btn-reset:hover{color:var(--accent2);border-color:rgba(184,90,93,0.15);background:rgba(184,90,93,0.04)}

/* Dark/Light mode toggle in theme panel */
.tp-mode-row{display:flex;align-items:center;justify-content:space-between;padding:0 2px;margin-bottom:4px}
.tp-mode-btns{display:flex;gap:6px}
.tp-btn-mode{background:rgba(95,168,181,0.06);color:var(--muted);border-color:var(--border);padding:5px 12px;font-size:12px;min-width:auto}
.tp-btn-mode:hover{color:var(--text);background:rgba(95,168,181,0.10)}
.tp-btn-mode.active{background:rgba(95,168,181,0.18);color:var(--accent);border-color:var(--accent)}

.tp-import-section{display:flex;flex-direction:column;gap:var(--space-xs)}
.tp-label{font-size:13px;font-weight:600;color:var(--text)}
.tp-label a{color:var(--accent);text-decoration:none;font-weight:700}
.tp-label a:hover{text-decoration:underline}
.tp-hint{font-size:11px;color:var(--muted);line-height:1.6;opacity:0.8}
.tp-hint a{color:var(--accent3);text-decoration:none}
.tp-hint a:hover{text-decoration:underline}
.tp-hint strong{color:var(--text);font-weight:600}

.tp-textarea{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);
  border:1.5px solid var(--border);background:var(--glass);
  color:var(--text);font-family:'Space Grotesk',monospace;font-size:12px;
  line-height:1.6;resize:vertical;outline:none;transition:border-color 0.25s ease;
}
.tp-textarea:focus{border-color:var(--accent)}
.tp-textarea::placeholder{color:var(--muted);opacity:0.4}

/* ===== Responsive ===== */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:var(--space-md)}
  .header{flex-direction:column;gap:var(--space-sm);text-align:center}
  nav{justify-content:center}
  .competency-grid{grid-template-columns:1fr 1fr}
  #theme-panel{right:12px;left:12px;width:auto;bottom:78px}
  #theme-toggle{bottom:16px;right:16px;width:44px;height:44px}
  main > .hero[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
}
@media(max-width:600px){
  .container{padding:var(--space-md) var(--space-sm)}
  .card{padding:var(--space-md)}
  .project{padding:var(--space-md);min-height:180px}
  .grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .competency-grid{grid-template-columns:1fr}
  .edu-grid{grid-template-columns:1fr}
  .extra-grid{grid-template-columns:1fr}
  .tech-grid{grid-template-columns:1fr}
  nav{gap:4px;justify-content:center}
  nav a{padding:6px 12px;font-size:12px}
}