/*  Variables */
:root{
  --max-width:1200px; --radius:18px; --gap:1rem;
  --accent-a:#6dd3ff; --accent-b:#8b5cf6; --accent-c:#00cfe8; --accent-d:#0b3b66;
  --muted:#64748b; --text:#071023; --card:#ffffff;
  --glass-light: rgba(255,255,255,0.6); --glass-border:rgba(255,255,255,0.28);
  --skill-bg-light:#e6eef9;
  --shadow-lg:0 22px 60px rgba(16,24,40,0.08);
  --transition:300ms cubic-bezier(.2,.9,.2,1);
  --nav-glow: linear-gradient(90deg,var(--accent-c),var(--accent-b));
  --hero-text-light:#0f2b3a; --meta-text-light:#10202f; --quick-text-light:#0b2540;
  --hero-text-dark:#cfefff; --meta-text-dark:#bfe9ff; --quick-text-dark:#9fe6ff;
}

/* Dark theme overrides */
body.theme-dark{
  --text:#e8f4ff; --muted:#98a0b3; --card:rgba(6,10,16,0.65);
  --glass:rgba(255,255,255,0.03); --glass-border:rgba(255,255,255,0.06);
  --skill-bg:#1b2230; /* subtle dark full background */
  --hero-text:var(--hero-text-dark); --meta-text:var(--meta-text-dark); --quick-text:var(--quick-text-dark);
  background:linear-gradient(180deg,#061021,#031427 60%);
}
body:not(.theme-dark){
  --glass:var(--glass-light); --skill-bg:var(--skill-bg-light);
  --hero-text:var(--hero-text-light); --meta-text:var(--meta-text-light); --quick-text:var(--quick-text-light);
  background:linear-gradient(180deg,#f7fafc,#eef5ff);
}

/* Base */
*{box-sizing:border-box}
html{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial; font-size:16px; scroll-behavior:smooth}
body{margin:0;color:var(--text)}
.container{max-width:var(--max-width);margin:0 auto;padding:1.25rem}
a{color:inherit;text-decoration:none}

/* Header */
.site-header{position:sticky;top:0;z-index:60;padding:0.6rem 0;backdrop-filter:blur(8px);transition:background var(--transition)}
.header-inner{display:flex;gap:1rem;align-items:center;justify-content:space-between}
.brand{display:flex;gap:0.6rem;align-items:center;color:var(--text)}
.main-nav ul{display:flex;gap:0.5rem;list-style:none;margin:0;padding:0}
.main-nav a{padding:0.5rem 0.75rem;border-radius:12px;color:var(--muted);font-weight:700;transition:var(--transition)}
.site-header.scrolled{background:rgba(255,255,255,0.55);backdrop-filter:blur(10px) saturate(140%)}

/*  Dark Mode Navigation Visibility Fix */
body.theme-dark .main-nav a {
  color: #e8f4ff; /* Bright text for dark backgrounds */
}

body.theme-dark .main-nav a:hover {
  color: var(--accent-a); /* Cyan accent on hover */
}

body.theme-dark .main-nav a.active {
  color: var(--accent-c); /* Highlighted active link */
  background: rgba(109, 211, 255, 0.12);
}

/* Ensure scrolled header in dark mode has good contrast */
body.theme-dark .site-header.scrolled {
  background: rgba(6, 10, 16, 0.85); /* Dark background when scrolled */
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Brand text visibility in dark mode */
body.theme-dark .brand-text {
  color: #e8f4ff;
}

/* Icon buttons in dark mode */
body.theme-dark .icon-btn {
  color: #e8f4ff;
  background: rgba(255, 255, 255, 0.05);
}

body.theme-dark .icon-btn:hover {
  background: rgba(109, 211, 255, 0.15);
}

/* HERO */
.hero{position:relative;padding:2.25rem 0;min-height:460px;overflow:hidden}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(24px) brightness(0.9);transform:translateZ(0);z-index:0;opacity:0.92}
.hero-grid{position:relative;display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:center;z-index:2}
.hero-title{font-size:clamp(2rem,5vw,3rem);margin:0}
.tagline{color:var(--muted);font-weight:600;margin:0.4rem 0}
.rotator{font-weight:700;color:var(--accent-a);font-size:1.05rem}
.rotating-role{display:inline-block;padding:0.15rem 0.6rem;background:linear-gradient(90deg,var(--accent-a),var(--accent-b));color:#021026;border-radius:999px;font-weight:800}
.hero-blurb{color:var(--hero-text);font-weight:500}
.cta-row{display:flex;gap:0.75rem}
.btn{display:inline-flex;align-items:center;gap:0.6rem;padding:0.6rem 0.9rem;border-radius:12px;border:0;cursor:pointer;font-weight:800;transition:var(--transition)}
.btn.primary{background:linear-gradient(90deg,var(--accent-a),var(--accent-c));color:#021026;box-shadow:0 10px 30px rgba(13,60,90,0.12)}
.btn.ghost{background:transparent;border:1px solid rgba(0,0,0,0.06);color:var(--text)}
.meta-list{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1rem;list-style:none;padding:0}
.meta-text{color:var(--meta-text)}
.profile-quick-text{color:var(--quick-text)}

/* Glass card base */
.glass-card{background:linear-gradient(145deg,rgba(255,255,255,0.55),rgba(255,255,255,0.28));backdrop-filter:blur(12px) saturate(130%);border-radius:18px;border:1px solid rgba(255,255,255,0.36);padding:1rem;box-shadow:0 10px 26px rgba(0,0,0,0.06);transition:var(--transition)}
body.theme-dark .glass-card{background:rgba(26,28,32,0.45);border-color:rgba(255,255,255,0.08)}

/* Profile card (compact) */
.profile-card{display:flex;flex-direction:column;align-items:center;gap:0.6rem;padding:1rem;border-radius:18px}
.profile-circle-small{width:120px;height:120px;border-radius:999px;object-fit:cover;box-shadow:0 12px 36px rgba(0,0,0,0.12);border:4px solid rgba(255,255,255,0.06)}
.profile-name{margin:0;font-weight:800}
.profile-degree{margin:0;color:var(--muted)}

/* chips */
.chip{display:inline-block;padding:0.25rem 0.5rem;border-radius:999px;background:linear-gradient(90deg, rgba(109,211,255,0.12), rgba(139,92,246,0.08));margin-right:0.4rem;font-size:0.85rem}

/*  ABOUT — Side-by-side layout restored */
.about-wrapper {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 1.5rem;
  align-items: start;
}
.about-sidebar {
  width: 100%;
  max-width: 360px;
  padding: 1rem;
}
.about-content {
  padding: 1rem;
}
.about-photo {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  margin-bottom: 0.75rem;
}
.quick-facts {
  margin: 0;
  padding-left: 1rem;
}
.quick-facts li {
  margin-bottom: 0.45rem;
  line-height: 1.4;
}

/* SKILLS */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.progress{position:relative;width:100%;height:18px;background:var(--skill-bg);border-radius:12px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,0.6)}
body.theme-dark .progress{ background:var(--skill-bg) }
.progress .fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg,var(--accent-c),var(--accent-b));box-shadow:0 8px 20px rgba(107,93,230,0.22);border-radius:12px;transition:width 1100ms cubic-bezier(.2,.9,.2,1)}
.progress.pulse::before{content:"";position:absolute;left:-20%;top:-40%;width:140%;height:120%;background:radial-gradient(circle at 20% 30%, rgba(109,211,255,0.06), transparent 12%, transparent 100%);transform:scale(1);opacity:0.9;animation:progressPulse 900ms ease-in-out infinite}
@keyframes progressPulse{0%{transform:translateX(0) scale(1);opacity:0.9}50%{transform:translateX(6%) scale(1.04);opacity:0.6}100%{transform:translateX(0) scale(1);opacity:0.9}}

/*  PROJECTS: Stable, non-shifting cards with tilt & glow  */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}

/*  Fixed height card to prevent layout shift */
.project-card {
  box-sizing: border-box;
  height: 320px !important;
  min-height: 320px !important;
  max-height: 320px !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  transition: transform 300ms cubic-bezier(.2,.9,.2,1), box-shadow 300ms !important;
  will-change: transform;
  
  /* Tilt & Glow setup */
  perspective: 1000px;
  transform-style: preserve-3d;
  position: relative;
  
  /* Blue-tech border */
  border: 1px solid rgba(40,130,255,0.08);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  backdrop-filter:blur(6px);
  border-radius:16px;
}

/*  Fixed image/media area */
.project-media {
  height: 160px !important;
  flex: 0 0 160px !important;
  width: 100% !important;
  overflow: hidden !important;
  display: block;
}

/*  Image scales inside container */
.project-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform-origin: center center !important;
  transition: transform 360ms cubic-bezier(.2,.9,.2,1) !important;
  will-change: transform;
}

/*  Fixed body content area */
.project-body {
  padding: 14px 16px !important;
  flex: 1 1 auto !important;
  min-height: calc(320px - 160px - 28px) !important;
  max-height: calc(320px - 160px - 28px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/*  Glow effect element */
.project-card .glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%),
      rgba(0,255,255,0.18),
      transparent 40%);
  opacity: 0;
  transition: opacity 0.25s ease-out;
  z-index: 1;
}

/* 5) Hover: lift + scale image + blue-tech glow + show gradient glow */
.project-card:hover {
  transform: translateY(-8px) !important;
  border: 1px solid rgba(109,211,255,0.45);
  box-shadow:
    0 14px 50px rgba(0,230,255,0.18),
    0 0 22px rgba(109,211,255,0.22),
    0 0 32px rgba(139,92,246,0.18),
    inset 0 0 12px rgba(109,211,255,0.14);
}

.project-card:hover .project-media img {
  transform: scale(1.06) !important;
  filter: brightness(1.05) saturate(1.2);
}

.project-card:hover .glow {
  opacity: 1;
}

/* No transform on body/text during hover */
.project-card:hover .project-body,
.project-card:hover .project-body * {
  transform: none !important;
  transition: none !important;
}

/* 6) Prevent inline JS transforms from changing layout */
.project-card[style] {
  height: 320px !important;
  min-height: 320px !important;
  max-height: 320px !important;
}

.project-card h3, 
.project-card p {
  margin: 0.35rem 0;
}

/* TIMELINES side-by-side */
.two-timelines{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}
.timeline-list{display:grid;gap:1rem;padding:0;list-style:none;margin-top:1rem}
.timeline-item{display:grid;grid-template-columns:96px 1fr;gap:1rem;align-items:start;padding:0.8rem;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);transition:var(--transition);position:relative;overflow:visible}
.timeline-item time{font-weight:800;color:var(--muted)}
.timeline-item article h3{color:var(--text);margin:0 0 0.25rem 0}
.timeline-item article p{color:var(--muted);margin:0}
.timeline-item{margin-bottom:1.4rem;padding-bottom:0.4rem}

/* hover effect (C) — pulse dot */
.timeline-item.timeline-hoverable::before{content:"";position:absolute;left:18px;top:18px;width:12px;height:12px;border-radius:50%;background:transparent;transition:transform 280ms,var(--transition)}
.timeline-item.timeline-hoverable:hover{transform:translateY(-8px);box-shadow:0 20px 60px rgba(13,60,120,0.12);background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.06)}
.timeline-item.timeline-hoverable:hover::before{background:linear-gradient(90deg,var(--accent-a),var(--accent-b));box-shadow:0 0 18px rgba(109,211,255,0.24), 0 0 30px rgba(139,92,246,0.12);transform:scale(1.25);animation:dotPulse 1100ms infinite}
@keyframes dotPulse{0%{box-shadow:0 0 4px rgba(109,211,255,0.12)}50%{box-shadow:0 0 20px rgba(109,211,255,0.16),0 0 30px rgba(139,92,246,0.08)}100%{box-shadow:0 0 4px rgba(109,211,255,0.12)}}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:1rem;align-items:start}
.contact-form input,.contact-form textarea{width:100%;padding:0.6rem;border-radius:10px;border:1px solid rgba(0,0,0,0.06);background:transparent}
.form-actions{display:flex;gap:0.6rem;margin-top:0.6rem}

/* FAQ — Glass cards */
.faq-list details{background:var(--glass);padding:0.8rem;margin:0.6rem 0;border-radius:16px;cursor:pointer;transition:var(--transition);border:1px solid rgba(255,255,255,0.12)}
body.theme-dark .faq-list details{border:1px solid rgba(255,255,255,0.06)}
.faq-list summary{font-weight:800;display:flex;justify-content:space-between;align-items:center}
.faq-list summary::after{content:"+";font-weight:800;color:var(--accent-c)}
.faq-list details[open] summary::after{content:"—"}
.faq-list p{margin:.6rem 0 0 0;color:var(--muted)}

/* FOOTER — Bottom-right on desktop */
.site-footer{position:fixed;right:18px;bottom:12px;z-index:80}
.site-footer .footer-inner{display:flex;gap:1rem;align-items:center;background:transparent}
.site-footer .footer-inner p{margin:0;padding:0.35rem 0.6rem;border-radius:10px;background:rgba(255,255,255,0.06);backdrop-filter:blur(6px);font-weight:600}
.site-footer .footer-nav a{display:inline-block;margin-left:0.5rem;padding:0.35rem 0.6rem;border-radius:10px;background:rgba(255,255,255,0.02);font-weight:700}
body.theme-dark .site-footer .footer-inner p,body.theme-dark .site-footer .footer-nav a{background:rgba(255,255,255,0.03)}

/*  PROJECT MODAL */
.modal {
  width: min(90%, 520px);
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(145deg,rgba(255,255,255,0.55),rgba(255,255,255,0.28));
  backdrop-filter: blur(12px) saturate(130%);
  box-shadow: 0 24px 64px rgba(0,0,0,0.2);
}

body.theme-dark .modal {
  background: rgba(26,28,32,0.85);
  border-color: rgba(255,255,255,0.08);
}

.modal::backdrop {
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
}

/* Responsiveness */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .two-timelines{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .main-nav{display:none}
  .nav-mobile{display:inline-block}
  .site-footer{left:0;right:0;bottom:0;display:flex;justify-content:center;padding:0.6rem}
  .site-footer .footer-inner{background:transparent}
  .about-wrapper{grid-template-columns:1fr}
  
  /* Project cards on mobile */
  .project-card { height: 300px !important; min-height: 300px !important; max-height: 300px !important; }
  .project-media { height: 150px !important; flex: 0 0 150px !important; }
  .project-body { min-height: calc(300px - 150px - 28px) !important; max-height: calc(300px - 150px - 28px) !important; }
}

@media(max-width:560px){
  :root{font-size:15px}
  
  /* Allow stacking on very small screens */
  .project-card { height: auto !important; min-height: 0 !important; max-height: none !important; }
  .project-media { height: 160px !important; }
  .project-body { min-height: 0 !important; max-height: none !important; overflow: visible !important; }
}



@media(max-width:980px){
  .main-nav.open {
    display: block !important;
    position: absolute;
    top: 64px;
    right: 12px;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 0.75rem 1rem;
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
    z-index: 200;
  }

  body.theme-dark .main-nav.open {
    background: rgba(6,10,16,0.92);
    border: 1px solid rgba(255,255,255,0.08);
  }

  .main-nav.open ul {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
}