/* style.css
   Gen Z portfolio styles
   - Uses CSS variables for theme
   - Glassmorphism, neon accents, gradients
   - Responsive grid/flex layouts
*/

/* -----------------------
   Root variables + resets
   ----------------------- */
:root{
  --bg: #0b0f1a;
  --card: rgba(255,255,255,0.03);
  --muted: rgba(255,255,255,0.7);
  --accent1: #9b5cff; /* purple */
  --accent2: #00d4ff; /* cyan */
  --accent3: #ff2ea6; /* pink neon */
  --glass: rgba(255,255,255,0.04);
  --glass-strong: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.08);
  --text: #eaf0ff;
  --radius: 14px;
  --shadow-neon: 0 8px 30px rgba(155,92,255,0.14), 0 0 20px rgba(0,212,255,0.06);
  --glass-blur: 10px;
  --max-width: 1200px;
}

/* Light theme variables (overrides) */
:root.light {
  --bg: linear-gradient(180deg,#f6f8ff,#eaf2ff);
  --card: rgba(10,10,20,0.02);
  --glass: rgba(255,255,255,0.6);
  --text: #071030;
  --muted: rgba(7,16,48,0.6);
}

/* Dark mode toggled with .dark on body */
body.dark {
  --bg: linear-gradient(135deg,#05040a,#0b0f1a 50%);
  --card: rgba(255,255,255,0.02);
  --text: #eaf0ff;
  --muted: rgba(234,240,255,0.7);
}

/* reset */
* {box-sizing: border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior: smooth; /* smooth scrolling */
  line-height:1.5;
}

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

/* -----------------------
   Navbar
   ----------------------- */
.nav-wrap{
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.navbar{
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  padding: 0.75rem 0;
}
.brand{font-weight:800; letter-spacing:0.6px; text-decoration:none; color:var(--text)}
.brand .dot{color:var(--accent3)}
.nav-links{display:flex; gap:1rem; list-style:none; margin:0; padding:0}
.nav-link{color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:10px; font-weight:600}
.nav-link:hover, .nav-link.active{background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-neon)}
.nav-actions{display:flex; gap:0.5rem; align-items:center}
.btn {display:inline-flex; align-items:center; justify-content:center; padding: 0.6rem 0.9rem; border-radius: 10px; font-weight:700; text-decoration:none; cursor:pointer; border: none}
.btn.primary{background: linear-gradient(90deg,var(--accent1),var(--accent2)); color:#06122a; box-shadow: var(--shadow-neon)}
.btn.outline{background:transparent; border:1px solid var(--glass-border); color:var(--text)}
.btn.ghost{background:transparent; color:var(--muted); border:1px dashed rgba(255,255,255,0.03)}
.btn.small{padding:0.4rem 0.6rem; font-size:0.9rem}
.cta{background:linear-gradient(90deg,var(--accent3),var(--accent2)); color:#fff; padding:0.55rem 0.8rem; border-radius:10px; text-decoration:none}

/* mobile menu btn hidden on desktop */
.mobile-menu-btn{display:none; background:transparent; border:none; font-size:1.2rem}

/* -----------------------
   Hero
   ----------------------- */
.hero{padding:4rem 0}
.hero-grid{display:grid; grid-template-columns: 1fr 420px; gap:2rem; align-items:center}
.eyebrow{color:var(--accent2); font-weight:700}
.h1, h1{font-size:2.4rem; margin:0 0 0.5rem; font-weight:900}
h1{font-size: clamp(2rem, 4.5vw, 3.2rem)}
.lead{margin:1rem 0; color:var(--muted)}

.profile-card{
  display:flex; gap:1rem; align-items:center; padding:1rem; border-radius:14px; overflow:hidden;
  border:1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.profile-pic{width:84px; height:84px; border-radius:12px; display:grid; place-items:center; font-size:2.2rem; background:linear-gradient(135deg,var(--accent1),var(--accent3)); box-shadow: 0 6px 20px rgba(155,92,255,0.14)}
.profile-info h3{margin:0 0 6px}
.muted{color:var(--muted)}

/* floating shapes */
.floating-shapes{position:relative}
.shape{position:absolute; border-radius:50%; filter: blur(40px); opacity:0.6}
.s1{width:120px; height:120px; right:-20px; top:-30px; background:linear-gradient(90deg,var(--accent1),var(--accent2))}
.s2{width:60px; height:60px; right:40px; top:80px; background:linear-gradient(90deg,var(--accent3),var(--accent2))}

/* -----------------------
   Sections general
   ----------------------- */
.section{padding:3rem 0}
.section h2{font-size:1.6rem; margin-bottom:1rem; font-weight:800}
.split{display:grid; grid-template-columns:1fr 350px; gap:2rem; align-items:start}

/* Skills grid */
.skills-grid{display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:1rem}
.skill-card{padding:1rem; border-radius:12px; border:1px solid var(--glass-border); background:var(--card)}
.skill-bars .bar{height:10px; background: rgba(255,255,255,0.06); border-radius:8px; position:relative; overflow:hidden}
.skill-bars .bar span{position:absolute; right:8px; top:-22px; font-weight:700; font-size:0.8rem}
.skill-bars .bar::after{content:""; position:absolute; left:0; top:0; bottom:0; width:0%; background: linear-gradient(90deg,var(--accent1),var(--accent2)); border-radius:8px; transition:width 1s ease}

/* Projects */
.filter-row{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem}
.filters{display:flex; gap:0.5rem; flex-wrap:wrap}
.filter-btn{padding:0.5rem 0.7rem; border-radius:10px; border:1px solid rgba(255,255,255,0.03); background:transparent; color:var(--muted); cursor:pointer; font-weight:700}
.filter-btn.active{background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:#fff; box-shadow:var(--shadow-neon)}

/* projects grid */
.projects-grid{display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap:1rem}
.project-card{display:flex; flex-direction:column; border-radius:12px; overflow:hidden; border:1px solid var(--glass-border); background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); transition: transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s}
.project-card:hover{transform:translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.45), 0 0 40px rgba(155,92,255,0.06)}
.card-media{height:140px; background: linear-gradient(120deg, rgba(155,92,255,0.16), rgba(0,212,255,0.08)); display:block}
.card-body{padding:1rem}
.card-tags{display:flex; gap:0.4rem; margin-top:0.5rem}
.tag{padding:0.25rem 0.6rem; border-radius:999px; font-weight:700; font-size:0.8rem; background:rgba(255,255,255,0.03)}

/* timeline */
.timeline{display:flex; flex-direction:column; gap:1rem}
.timeline-item{padding:1rem; border-radius:12px; border:1px solid var(--glass-border); background:var(--card)}

/* Contact form */
.contact-form{display:flex; flex-direction:column; gap:1rem}
.form-grid{display:grid; grid-template-columns: 1fr 1fr; gap:1rem}
.form-grid input, .form-grid textarea, input, textarea{padding:0.8rem; border-radius:10px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:var(--text); resize:vertical}
.form-actions{display:flex; gap:0.5rem}

/* footer */
.footer{padding:2rem 0; border-top:1px solid rgba(255,255,255,0.02)}
.footer-grid{display:flex; justify-content:space-between; align-items:center}

/* small helper classes */
.glass{border-radius:14px; border:1px solid var(--glass-border); background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); backdrop-filter: blur(var(--glass-blur))}

/* -----------------------
   Responsive
   ----------------------- */
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr; text-align:center}
  .split{grid-template-columns:1fr}
  .nav-links{display:none}
  .mobile-menu-btn{display:inline-block}
  .profile-card{justify-content:center}
  .form-grid{grid-template-columns:1fr}
}

/* small screens */
@media (max-width: 520px){
  .brand{font-size:1.1rem}
  .hero{padding:2.5rem 0}
  h1{font-size:1.8rem}
}

/* -----------------------
   Animations and micro-interactions
   ----------------------- */
/* progress bars animation applied via JS by changing width of ::after */
.skill-bars .bar[data-animated="true"]::after{
  width: var(--progress);
}

/* subtle floating animation */
@keyframes floaty {
  0%{ transform: translateY(0px) }
  50%{ transform: translateY(-10px) }
  100%{ transform: translateY(0px) }
}
.shape.s1{animation: floaty 6s ease-in-out infinite}
.shape.s2{animation: floaty 5s ease-in-out infinite}

/* fade-in when elements appear */
.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: all 0.6s ease;
}
.reveal.visible{ opacity:1; transform: translateY(0); }

/* small utility */
.muted{opacity:0.85; font-size:0.95rem}