/* === Base tokens (unique theme) === */
:root{
  --bg:#0b1220;          /* deep navy */
  --panel:#111827;       /* dark panel */
  --muted:#ffffff;       /* grey text */
  --accent-1:#2048ca;    /* cyan */
  --accent-2:#f722f7;    /* violet */
  --glass: rgba(255,255,255,0.03);
  --radius:14px;
  --maxw:1100px;
  --bg-color: #FFDBFD;      /* background */
  --text-color: #111;       /* main text */
  --muted-color: #C9BEFF;   /* secondary text, muted */
  --accent-color: #8494FF;  /* buttons, links, highlights */
  --card-bg: #D78FEE;       /* cards / containers */

}



/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:linear-gradient(180deg,var(--bg),#071021 140%);
  color:#f722f7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

/* Containers */
.container{width:92%;max-width:var(--maxw);margin:0 auto}

/* Header */
.site-header {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: #f722f7; 
}

body {
  padding-top: 80px; 
}

.carousel-wrap {
  position: relative; 
  z-index: 1;
}


.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{font-weight:700;color:var(--accent-1);text-decoration:none;font-size:1.1rem;letter-spacing:0.6px}
.main-nav{display:flex;gap:18px}
.main-nav a{color:var(--muted);text-decoration:none;padding:6px 8px;border-radius:8px;transition:all .18s}
.main-nav a:hover{color:var(--accent-1);transform:translateY(-2px)}
/* Base menu button styling */
.menu-btn {
  display: none;          
  background: transparent;
  border: 0;
  padding: 6px;
  cursor: pointer;
  color: rgb(6, 4, 7);           
}

.menu-btn svg rect {
  fill: currentColor;
}

@media (max-width: 768px) {
  .menu-btn {
    display: inline-flex;
  }
}


/* Hero */
.hero-section{padding:54px 0 32px}
.hero-grid{display:grid;grid-template-columns:1fr 220px;gap:28px;align-items:center}
.hero-text .muted-intro{color:var(--accent-2);font-weight:600;margin:0 0 6px}
.hero-title {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* 🌞 Light mode (awake) */
body.light .hero-title {
  color: #f722f7; /* slate-900 → strong contrast on white */
}

/* 🌙 Dark mode (sleeping) */
body:not(.light) .hero-title {
  color: #015bc2; /* soft white */
  text-shadow: 0 0 10px rgba(148,163,184,0.25);
}

.hero-sub{color:var(--muted);max-width:62ch}
.hero-actions{margin-top:16px;display:flex;gap:12px;align-items:center}
.btn{cursor:pointer;border:0;padding:10px 16px;border-radius:999px;font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:#f9fafc;box-shadow:0 8px 30px rgba(247, 248, 248, 0.945)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}

/* Avatar (unique) */
.hero-avatar{display:flex;justify-content:center}
.avatar-ring{width:220px;height:220px;border-radius:50%;padding:10px;background:conic-gradient(from 210deg,var(--accent-2),var(--accent-1));display:flex;align-items:center;justify-content:center}
.avatar-shape{width:100%;height:100%;border-radius:50%;overflow:hidden;display:block;filter:drop-shadow(0 8px 28px rgba(10,12,16,.6))}

/* Sections */
.section{padding:40px 0;border-top:1px solid rgba(21, 136, 212, 0.979)}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.section h2{margin:0;font-size:1.6rem}
.muted{color:var(--muted)}

/* Carousel */
.carousel-wrap{display:flex;align-items:center;gap:12px}
.carousel{display:flex;gap:16px;overflow-x:auto;padding:10px 6px;scroll-snap-type:x mandatory;scroll-behavior:smooth}
.carousel:focus{outline:2px solid rgba(167,139,250,0.12)}
.project-card{min-width:320px;max-width:360px;background:var(--panel);border-radius:12px;padding:18px;box-shadow:0 10px 30px rgba(2,6,23,0.55);border:1px solid rgba(255,255,255,0.03);scroll-snap-align:start}
.project-card h3{margin:0 0 8px}
.card-desc{color:var(--muted);margin:0 0 10px}
.tags{list-style:none;padding:0;margin:0;display:flex;gap:8px;flex-wrap:wrap}
.tags li{background:rgba(255,255,255,0.04);padding:6px 8px;border-radius:8px;font-size:.78rem;color:var(--muted)}
.link{display:inline-block;margin-top:12px;color:var(--accent-1);text-decoration:none;font-weight:600}
.carousel-btn{background:transparent;border:0;color:var(--accent-1);font-size:1.6rem;padding:8px 10px;cursor:pointer}

/* Skills */
.skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.skill-block h3{margin-top:0;color:var(--accent-2)}
.skill-list{margin:12px 0 0;padding:0}
.skill-item{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.skill-item dt{width:110px;color:var(--muted)}
.skill-item dd{flex:1;margin:0}
.skill-item dd span{display:block;height:10px;border-radius:999px;background:linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));position:relative;overflow:hidden}
.skill-item dd span::before{content:'';position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--accent-2),var(--accent-1));width:var(--p);transition:width .45s ease}

/* Soft list */
.soft-list{margin:10px 0 0;padding-left:0;list-style:none}
.soft-list li{padding:8px 0;color:var(--muted)}

/* Contact */
.contact-section{text-align:center}
.contact-cards{display:flex;gap:12px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.contact-card{background:var(--glass);padding:14px;border-radius:12px;min-width:200px;backdrop-filter: blur(6px);border:1px solid rgba(255,255,255,0.02)}
.contact-card .icon{width:28px;height:28px;display:block;margin-bottom:8px;fill:var(--accent-1)}
.contact-card a{color:var(--accent-1);text-decoration:none}

.footer-inner {
  display: flex;
  justify-content: center; /* centers content horizontally */
  align-items: center;
  gap: 10px;
  text-align: center; /* ensures text inside is centered */
  flex-direction: column; /* optional: stack vertically if needed */
}

/* Modal */
.modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(2,6,23,0.6);backdrop-filter: blur(4px);z-index:100;visibility:hidden;opacity:0;transition:opacity .18s,visibility .18s}
.modal[aria-hidden="false"]{visibility:visible;opacity:1}
.modal-panel{background:var(--panel);padding:18px;border-radius:12px;min-width:260px;box-shadow:0 12px 40px rgba(2,6,23,0.5)}
.modal-actions{display:flex;justify-content:flex-end;margin-top:14px}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* Responsive */
@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr; text-align:left}
  .hero-avatar{order:-1;margin-bottom:12px;justify-content:flex-start}
  .header-inner{gap:8px}
  .main-nav{display:none;position:absolute;right:16px;top:64px;background:var(--panel);padding:10px;border-radius:8px}
  .menu-btn{display:inline-flex}
  .carousel{padding-bottom:12px}
  .skills-grid{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;gap:8px}
}
.hero-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
}

.avatar-ring {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  padding: 6px;
  background: linear-gradient(135deg, #A78BFA, #22D3EE);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(167, 139, 250, 0.4);
}

.avatar-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #0F172A; /* matches dark background */
}
@keyframes avatar-glow {
  0% { box-shadow: 0 0 15px rgba(167,139,250,0.4); }
  50% { box-shadow: 0 0 25px rgba(34,211,238,0.6); }
  100% { box-shadow: 0 0 15px rgba(167,139,250,0.4); }
}

/* Ensure buttons don't block cards */
.carousel-wrap {
  position: relative;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10; /* above carousel visually */
  background: rgba(0, 0, 0, 0.2); 
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#prevProject { left: -18px; }
#nextProject { right: -18px; }

/* Make sure cards are fully clickable */
.project-card {
  position: relative;
  z-index: 5; 
}
#prevQA, #nextQA {
  all: unset; /* reset */
  font-size: 2rem;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
#prevQA:hover, #nextQA:hover {
  background-color: #f0f0f0;
}

#prevAI, #nextAI {
  all: unset; /* reset */
  font-size: 2rem;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
#prevQA:hover, #nextQA:hover {
  background-color: #f0f0f0;
}

body.light {
  background: #8494FF;
  color: #0f172a;
}

body.light .site-header {
  background: rgba(0, 0, 0, 0.9);
}

body.light .project-card {
  background: #4A4A4A;
  color: #0f172a;
}






/* 🌞 Light mode text colors */
body.light {
  color: #000000; /* main text */
}

body.light .hero-title {
  color: #010102; /* accent for hero titles */
}

body.light .hero-text .muted-intro {
  color: #fffdff; /* muted intro text */
}

body.light .hero-sub {
  color: #ffffff; /* secondary/muted text */
}

body.light .project-card,
body.light .soft-list li,
body.light .skill-item dt {
  color: #fffeff; /* main card & list text */
}

body.light .tags li,
body.light .link,
body.light .carousel-btn {
  color: #ffffff; /* links, tags, highlights */
}






/* === Hero Section Base === */
.hero-section {
  padding: 80px 0;
  background: linear-gradient(180deg, #FFDBFD 0%, #C9BEFF 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.hero-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  width: 92%;
  gap: 40px;
}

/* === Hero Content === */
.hero-content {
  flex: 1 1 500px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.badge-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.badge {
  background: #8494FF;
  color: #ffffff;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 12px;
  display: inline-block;
  font-size: 0.85rem;
  animation: badge-pop 1s ease forwards;
}

@keyframes badge-pop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.muted-intro {
  font-weight: 600;
  color: #A78BFA;
}

/* Hero Title */
.hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
}

/* .text-gradient {
  background: linear-gradient(90deg, #8494FF, #D78FEE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: gradient-move 3s ease infinite;
} */

@keyframes gradient-move {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Hero Subtitle */
.hero-sub {
  font-size: 1rem;
  color: #111;
  max-width: 520px;
  line-height: 1.6;
}

/* Tech Stack */
/* Container for personality / zodiac traits */
.tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;       /* increases spacing between items */
  margin: 16px 0;  /* increases spacing above/below container */
  justify-content: center; /* center items on smaller screens */
}

/* Individual badges for each trait */
.stack-item {
  background: #D78FEE;
  color: #fff;
  padding: 1.5px 2px;    /* more padding inside badges */
  border-radius: 999px;
  font-size: 0.8rem;    /* slightly larger text */
  font-weight: 600;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.stack-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(215, 143, 238, 0.5); /* subtle hover glow */
}

/* Hero Actions */
.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.btn.primary {
  background: linear-gradient(90deg, #8494FF, #D78FEE);
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn.primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(132, 148, 255, 0.4);
}

.btn.secondary {
  background: transparent;
  color: #8494FF;
  border: 2px solid #8494FF;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn.secondary:hover {
  background: #8494FF;
  color: #fff;
}

/* === Hero Visual / Avatar === */
.hero-visual {
  flex: 1 1 400px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-wrapper {
  position: relative;
  width: 280px;
  height: 280px;
}

.blob-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: conic-gradient(from 210deg, #A78BFA, #22D3EE);
  border-radius: 50%;
  filter: blur(30px);
  animation: blob-rotate 6s linear infinite;
}

@keyframes blob-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.avatar-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  position: relative;
  z-index: 2;
  animation: avatar-bounce 4s ease-in-out infinite;
}

@keyframes avatar-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Floating Cards */
.floating-card {
  position: absolute;
  padding: 8px 12px;
  background: #fff;
  color: #111;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  opacity: 0;
  animation: float-in 1.5s forwards;
}

.card-1 { top: -20px; left: -50px; animation-delay: 0.5s; }
.card-2 { top: -25px; right: -80px; animation-delay: 0.8s; }
.card-3 { bottom: -15px; left: -25px; animation-delay: 1.1s; }
.card-4 { bottom: -25px; right: -25px; animation-delay: 1.4s; }
@keyframes float-in {
  0% { transform: translateY(-20px) scale(0.8); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Responsive */
@media (max-width: 900px) {
  .hero-container { flex-direction: column-reverse; gap: 30px; }
  .hero-visual { margin-bottom: 5px; }
  .hero-title { text-align: center; }
  .hero-sub { text-align: center; }
  .tech-stack { justify-content: center; }
  .hero-actions { justify-content: center; }
  .badge-container {
    order: -1; /* moves badge container to the top */
    margin-bottom: 12px; /* space below badge */
    text-align: center; /* center content above avatar */
  }
  .muted-intro {
    margin: 0; /* remove extra margin for better spacing */
  }

  .badge {
    display: inline-block; /* ensure badge stays inline */
    margin-bottom: 6px;
  }

}

.project-card {
  background: var(--card);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: 0.3s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.project-card:hover {
  transform: translateY(-6px);
}

/* IMAGE */
.project-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* CONTENT */
.project-content {
  padding: 15px;
}

/* HEADER */
.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.role-badge {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 20px;
  background: rgba(124,77,255,0.15);
  color: var(--text);
}

/* DESCRIPTION */
.card-desc {
  margin: 10px 0;
  opacity: 0.85;
  font-size: 14px;
}

/* IMPACT LINE */
.impact {
  font-size: 13px;
  margin: 8px 0;
  color: #7c4dff;
}

/* TAGS */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.tags li {
  list-style: none;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 12px;
  background: rgba(124,77,255,0.12);
}

/* LINKS */
.project-links {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.project-links a {
  text-decoration: none;
  color: #7c4dff;
  font-weight: 600;
  font-size: 13px;
}