/* ================= VARIABLES ================= */
/* :root {
  --bg: #0e0e11;
  --card-bg: #16161d;
  --text: #eaeaf0;
  --muted: #a1a1aa;
  --accent: #2f80ed;
  --gradient-start: #6a5acd;
  --gradient-end: #00c6ff;
} */

:root {
  --bg: #07070a;        /* deeper black */
  --card-bg: #111118;  /* still distinguishable */
  --text: #f1f1f5;
  --muted: #9a9aa3;

  /* Accent pulled from your palette */
  --accent: rgb(0, 145, 173); /* Blue munsell */

  /* Gradient colors */
  --g1: rgb(183, 9, 76);   /* Amaranth purple */
  --g2: rgb(160, 26, 88);  /* Murrey */
  --g3: rgb(137, 43, 100); /* Byzantium */
  --g4: rgb(114, 60, 112); /* Finn */
  --g5: rgb(92, 77, 125);  /* Ultra-violet */
  --g6: rgb(69, 94, 137);  /* Yinmn blue */
  --g7: rgb(46, 111, 149); /* UCLA blue */
  --g8: rgb(23, 128, 161); /* Cerulean */
  --g9: rgb(0, 145, 173);  /* Blue munsell */
}


/* ================= RESET ================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased; /* Optional: makes text crisper */
}
h1, h2, h3 {
  font-family: 'Inter', sans-serif;
  /* font-weight: 700; */
  font-weight: bold;
}
/* ================= SECTIONS ================= */
section {
  padding: 80px 10%;
  scroll-margin-top: 80px;
}

h2 {
  font-size: 2.2rem;
  margin-bottom: 30px;
}
section {
  padding: 70px 12%;
}

.navbar {
  padding-inline: 12%;
}



/* ================= HERO =================
#home {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(
    135deg,
    var(--gradient-start),
    var(--gradient-end)
  );
}

.home-content {
  text-align: center;
}

.home-content h1 {
  font-size: 3.5rem;
  margin-bottom: 15px;
}

.home-content p {
  font-size: 1.3rem;
  opacity: 0.95;
} */

/* ================= HERO ================= */


/* 
#home {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}

.home-content {
  max-width: 720px;
}

.home-content h1 {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  margin-bottom: 10px;
}

.gradient-text {
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.about-text {
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 28px;
} */

/* ================= SOCIAL ICONS ================= */


/* 

.social-links {
  display: flex;
  justify-content: center;
  gap: 18px;
}

.social-links a {
  font-size: 1.3rem;
  color: var(--muted);
  transition: color 0.25s ease, transform 0.25s ease;
}

.social-links a:hover {
  color: var(--accent);
  transform: translateY(-3px);
} */

/* Hero section */
/* ================= Hero Section ================= */
#home {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  position: relative;
  background-color: var(--bg); /* keep the dark background */
  overflow: hidden;
  text-align: left; /* default for content on left */
}

/* Glow / radial gradient behind content */
#home::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0,145,173,0.15), transparent 70%);
  z-index: 0;
  border-radius: 50%;
}

/* Floating accent circles */
#home::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  width: 250px;
  height: 250px;
  top: 15%;
  left: 10%;
  z-index: 0;
  animation: float 15s infinite linear;
}

@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(20px); }
  100% { transform: translateY(0px); }
}

/* ================= Wrapper for Left + Right ================= */
.home-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center; /* center both left and right */
  width: 100%;
  max-width: 800px; /* reduce total width so content is closer */
  z-index: 1; /* above floating circles */
  gap: 30px; /* smaller gap between left and right */
  margin: 0 auto; /* center wrapper horizontally */
}


/* ---------------- Left Side: Text Content ---------------- */
.home-content {
  flex: 1.5;
  max-width: 720px;
  z-index: 1;
  padding-left: 100px;
}

.home-content h1 {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  margin-bottom: 15px;
  font-weight: 700;
  color: #fff;
}

/* Gradient text for emphasis */
.home-content .gradient-text {
  background: linear-gradient(90deg, var(--g1), var(--g2), var(--g8), var(--g9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-weight: 700;
}

.home-content .about-text {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 30px;
  font-size: 1.1rem;
}

/* ---------------- Social Links ---------------- */
.social-links {
  display: flex;
  justify-content: flex-start; /* left align */
  gap: 18px;
  color: rgba(255, 255, 255, 0.6);
}

.social-links a {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.6);
  transition: transform 0.25s ease;
}

.social-links a:hover {
  transform: translateY(-1px) scale(1.1);
  color: var(--accent);
}

.social-icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  transition: all 0.3s ease;
  fill: gray;
  transform: translateY(-1px);
}

.social-links a:hover .social-icon {
  fill: var(--accent);
  transform: translateY(-1px) scale(1.1);
}

/* ---------------- Right Side: Image ---------------- */
.home-image {
  flex: 1;
  display: flex;
  justify-content: flex-end; /* push image to right */
  align-items: center;
}

.home-image img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px; /* optional */
}


/* ============================================================= */


/* Fade-in reveal effect */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}



/* ================= PROJECTS ================= */

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.tag {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;

  padding: 4px 10px;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);

  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* topic / field */
.tag-topic {
  color: var(--g8);
  border-color: rgba(23, 128, 161, 0.4);
}

/* language / tool */
.tag-lang {
  color: var(--g6);
  border-color: rgba(69, 94, 137, 0.4);
}

/* project type */
.tag-type {
  color: var(--g3);
  border-color: rgba(137, 43, 100, 0.4);
}
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.project-card {
  background: var(--card-bg);
  padding: 25px;
  border-radius: 14px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.project-card h3 {
  margin-bottom: 10px;
}

.project-card p {
  color: var(--muted);
  margin-bottom: 15px;
}

.project-card a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.tag {
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease, transform 0.2s ease;
  font-weight: 700;

}

.tag:hover {
  background: rgba(255, 255, 255, 0.1);
}

.tag-topic {
  --tag-color: var(--g8);
  color: var(--tag-color);
  border-color: rgba(23, 128, 161, 0.4);
}

/* language / tool */
.tag-lang {
  --tag-color: var(--g6);
  color: var(--tag-color);
  border-color: rgba(69, 94, 137, 0.4);
}
.tag-lang {
  --tag-color: var(--g5);
  color: var(--tag-color);
  border-color: rgba(69, 94, 137, 0.4);
}
.tag-tool {
  --tag-color: var(--g6);
  color: var(--tag-color);
  border-color: rgba(69, 94, 137, 0.4);
}

/* project type */
.tag-type {
  --tag-color: var(--g3);
  color: var(--tag-color);
  border-color: rgba(137, 43, 100, 0.4);
}
.tag.active {
  /* It uses the variable defined in the classes above */
  background: var(--tag-color); 
  color: var(--bg);
  border-color: var(--tag-color);
}

/* ================= PROJECT CARD BUTTONS ================= */
.project-links {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

/* Icons inside buttons */
.btn i {
  font-size: 1rem;
}

/* ---------------- GitHub button ---------------- */
.project-card a.btn-github {
  background: #111118;             /* dark black-gray */
  color: #ffffff;                  /* white text */
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.project-card a.btn-github:hover {
  background: #07070a;             /* ultra-dark hover */
  color: #ffffff;
  transform: translateY(-2px);
}

/* ---------------- Demo button ---------------- */
.project-card a.btn-demo {
  background: #f1f1f5;             /* light background */
  color: #000000;                  /* black text */
  border: none;
}

.project-card a.btn-demo:hover {
  background: #a1a1aa;             /* muted gray hover */
  color: #000000;
  transform: translateY(-2px);
}

/* ---------------- Documentation button ---------------- */
.project-card a.btn-docs {
  background: #d9d9d9;             /* medium-light gray */
  color: #000000;                  /* black text */
  border: none;
}

.project-card a.btn-docs:hover {
  background: #bfbfbf;             /* slightly darker hover */
  color: #000000;
  transform: translateY(-2px);
}

/* ================= PROJECT DESCRIPTION REVEAL ================= */


/* desc */
.project-desc {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);

  transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* Reveal on hover OR keyboard focus */
.project-card:hover .project-desc,
.project-card:focus-within .project-desc {
  max-height: 200px; /* large enough for text */
  opacity: 1;
  transform: translateY(0);
}

/* ------------ SHOW MORE  -------------------- */
#show-more-projects {
  display: block;                  /* allows centering with margin auto */
  margin: 40px auto;               /* vertical spacing + horizontal centering */
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;                  /* white text */
  background: none;                /* no background */
  border: none;                    /* no borders */
  text-align: center;              /* center text */
  cursor: pointer;
  transition: color 0.3s ease, transform 0.2s ease;
}

/* Animated gradient underline */
#show-more-projects::after {
  content: "";
  display: block;
  width: 0%;                       /* starts invisible */
  height: 3px;
  background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3));
  transition: width 0.3s ease;
  margin: 10px auto 0 auto;         /* positions below text, centered */
  border-radius: 1px;
}

/* Hover effect */
#show-more-projects:hover {
  transform: translateY(-2px);     /* slight lift */
}

#show-more-projects:hover::after {
  width: 40%;                       /* underline grows on hover */
}

.projects-grid .project-card.revealed {
  animation: fadeIn 0.35s ease forwards;
}

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}


/* ================= SCROLL REVEAL ================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
/* .reveal {
  opacity: 1 !important;
} */

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}



/* ================= TIMELINE ================= */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center; /* center the vertical line */
  margin: 40px 0;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%; /* center line */
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: var(--accent);
}

.timeline-item {
  position: relative;
  width: 45%; /* slightly less than half to leave space */
  margin: 20px 0;
  padding: 15px 20px;
  box-sizing: border-box;
}

.timeline-item::before {
  content: "";
  position: absolute;
  top: 20px; /* vertical position of the circle */
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 50%;
}

.timeline-item:nth-child(odd) {
  align-self: flex-start; /* left side */
  text-align: right;
}

.timeline-item:nth-child(odd)::before {
  right: -43px; /* circle near the center line */
}

.timeline-item:nth-child(even) {
  align-self: flex-end; /* right side */
  text-align: left;
}

.timeline-item:nth-child(even)::before {
  left: -43px; /* circle near the center line */
}

.timeline-item .date {
  font-size: 0.9rem;
  color: var(--muted);
}

.timeline-item h3 {
  margin: 5px 0 10px;
}

.timeline-item p {
  margin: 0;
}
/* Default: centered timeline line for large screens */
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%; /* center line */
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: var(--accent);
}

/* Responsive: remove the line on small screens */
@media (max-width: 768px) {
  .timeline {
    gap: 3rem;
    align-items: flex-start; /* stop centering children */
  }

  .timeline::before {
    display: none; /* hide vertical line */
  }

  .timeline-item {
    width: 100%;                /* FULL WIDTH */
    align-self: stretch;        /* cancel left/right alternation */
    padding-left: 2.5rem;
    text-align: left;           /* normal reading */
  }

  .timeline-item::before {
    top: 0.75rem;
    left: 0;
    transform: none;
  }
}



.role-info {
  display: block;           /* ensures it’s on its own line */
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--accent);         
  margin-bottom: 8px;       /* space before the description */
}

.company-logo {
  height: 24px;       /* small but visible */
  width: auto;        /* maintain aspect ratio */
  vertical-align: middle;  /* aligns with text */
  margin-right: 8px;  /* space between logo and text */
}
.company-logo:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease-in-out;
}
a.company-link {
  text-decoration: none;      /* removes underline */
  color: inherit;             /* keeps normal text color */
  display: inline-flex;       /* align logo and text nicely */
  align-items: center;        /* vertically center logo with text */
  gap: 8px;                   /* space between logo and text */
}

a.company-link img.company-logo {
  height: 24px;
  width: auto;
}



/* ================= FOOTER ================= */
footer {
  text-align: center;
  padding: 30px;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
  section {
    padding: 60px 6%;
  }

  .home-content h1 {
    font-size: 2.5rem;
  }
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;

  background: rgba(14, 14, 17, 0.75);
  backdrop-filter: blur(10px);
}

.navbar {
  max-width: 1200px;
  margin: auto;
  padding: 15px 5%;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-weight: 600;
  font-size: 1.1rem;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 25px;
}


.nav-links a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--g1);
  transition: width 0.25s ease;
}
/* make the bg color in nav-links gradient based */

.nav-links a:hover::after {
  width: 100%;
}
/* 
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;

  background: linear-gradient(
    90deg,
    var(--g1),
    var(--g5),
    var(--g9)
  );

  transition: width 0.25s ease;
} */

/* ================= TIMELINE TEXT FLOW FIX ================= */

/* Constrain text width for readability */
.timeline-item p,
.timeline-item ul {
  max-width: 520px;
}

/* LEFT side items: keep header right-aligned, body text left-aligned */
.timeline-item:nth-child(odd) p,
.timeline-item:nth-child(odd) ul {
  margin-left: auto;     /* push text inward */
  text-align: left;      /* normal reading direction */
}

/* RIGHT side items: normal flow */
.timeline-item:nth-child(even) p,
.timeline-item:nth-child(even) ul {
  margin-right: auto;
  text-align: left;
}


/* ================= expeience =========================== */

.role-type {
  display: block;
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 10px;
  font-style: italic;
}
.exp-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.exp-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
}

.exp-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0.1em;
  font-size: 1.1em;
  color: var(--muted);
}


/* ================= about and education ================= */
.about-text {
  max-width: 800px;
  font-size: 1.05rem;
  color: var(--muted);
}

.education-item {
  margin-bottom: 30px;
}

.education-item span {
  color: var(--muted);
  font-size: 0.9rem;
}

#education {
  max-width: 1200px;
  /* margin-left: 0;
  margin-right: 0;
  padding: 40px 20px; */
}

/* Timeline container */
.education-timeline {
  display: flex;
  flex-direction: column;
  gap: 40px; /* spacing between items */
}

.education-item {
  display: flex;
  /* align-items: center; */
  gap: 20px;
  transition: transform 0.25s ease;
}

.education-item:hover {
  transform: translateY(-3px);
}

/* Circular logo container */
.edu-logo {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;           /* circle */
  overflow: hidden;
  background: #ffffff;           /* white background */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo image fills container */
.edu-logo img {
  width: 80%;                   /* leave small padding inside circle */
  height: 80%;
  object-fit: contain;           /* keeps aspect ratio */
}
/* Make sure the link fills the circle */
.edu-logo a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-decoration: none; /* remove underline */
}

.edu-logo a:hover img {
  transform: scale(1.08); /* subtle zoom on hover */
  transition: transform 0.25s ease;
}

/* Content text */
.edu-content h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
}

.edu-content span {
  display: block;
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 6px;
}

.edu-content p {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
}


/* ================= about ================= */

.about-content {
  max-width: 780px;
}

.about-lead {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 14px;
  position: relative;
  padding-left: 14px;
}

/* subtle anchor line */
.about-lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 3px;
  height: 1.1em;
  background: var(--accent);
  border-radius: 2px;
}

.about-text {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--muted);
}



/* ================= gradient text utility ================= */
.gradient-text {
  font-size: 1.3rem;
  font-weight: 500;

  background-image: linear-gradient(
    90deg,
    var(--g1),
    var(--g2),
    var(--g3),
    var(--g4),
    var(--g5),
    var(--g6),
    var(--g7),
    var(--g8),
    var(--g9)
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;
  color: transparent;
}