/* Modern, responsive portfolio styles */
:root{
  --bg: #0b0f14;
  --fg: #e6eef7;
  --muted: #9db2c7;
  --primary: #6ee7ff;
  --card: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}
:root.light{
  --bg: #f7fbff;
  --fg: #111827;
  --muted: #4b5563;
  --primary: #2563eb;
  --card: rgba(0,0,0,0.04);
  --border: rgba(0,0,0,0.08);
  --shadow: 0 10px 30px rgba(0,0,0,0.10);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--fg); line-height:1.6; overflow-x:hidden;
}
.container{width:min(1100px, 92vw); margin-inline:auto}
.nav{display:flex; align-items:center; justify-content:space-between; padding:20px 0; position:sticky; top:0; backdrop-filter: blur(8px); z-index:10}
.nav nav{display:flex; gap:14px; align-items:center}
.nav a{color:var(--fg); text-decoration:none; opacity:.9}
.nav a:hover{opacity:1}
.brand{display:flex; gap:10px; align-items:center; font-weight:700; letter-spacing:.2px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:14px; padding:10px 16px; border:1px solid var(--border); text-decoration:none;
  color:var(--fg); box-shadow:var(--shadow); transition:transform .15s ease, opacity .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(90deg,var(--primary),#a78bfa); color:#001018; font-weight:700; border:0}
.btn.ghost{background:transparent}
.btn.small{padding:8px 12px; font-size:.9rem; border-radius:10px}

.backdrop{position:fixed; inset:-20vh -10vw auto -10vw; height:60vh; z-index:-1; filter: blur(50px) saturate(140%)}
.blob{position:absolute; width:40vw; height:40vw; border-radius:50%; opacity:.45; mix-blend:screen}
.blob.b1{left:0; top:-10vh; background:#2563eb; animation:float 12s ease-in-out infinite}
.blob.b2{right:0; top:-20vh; background:#06b6d4; animation:float 16s ease-in-out infinite reverse}
.blob.b3{left:20vw; top:-18vh; background:#a78bfa; animation:float 20s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(30px)}}

.hero{display:grid; grid-template-columns:1.2fr .8fr; gap:38px; padding:48px 0 20px}
.hero h1{font-size:clamp(2.2rem, 3.5vw, 3.6rem); line-height:1.15; margin:0 0 10px}
.hi{opacity:.8; font-weight:500}
.name{font-weight:900; letter-spacing:-.5px}
.subtitle{font-size:1.2rem; color:var(--muted); margin:0 0 18px}
.highlight{background:linear-gradient(90deg,var(--primary),#a78bfa); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700}
.cta{display:flex; gap:12px; margin:18px 0 14px}
.quick-facts{display:flex; flex-wrap:wrap; gap:14px; padding:0; margin:16px 0 0; list-style:none; color:var(--muted)}
.hero-art{display:grid; place-items:center}
.card-3d{background:var(--card); border:1px solid var(--border); border-radius:22px; padding:18px; transform-style:preserve-3d; perspective:1000px; box-shadow:var(--shadow)}
.card-3d img{display:block; width:min(420px, 70vw); border-radius:14px}

.section{padding:72px 0 18px}
.section-header h2{font-size:clamp(1.6rem, 2.5vw, 2.2rem); margin:0 0 8px}
.section-header p{color:var(--muted); margin:0 0 26px}
.grid.projects{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card.project{background:var(--card); border:1px solid var(--border); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease}
.card.project:hover{transform:translateY(-4px); box-shadow:0 15px 45px rgba(0,0,0,.35)}
.card.project img{width:100%; height:190px; object-fit:cover; background:#0b2236}
.card-body{padding:16px}
.card-body h3{margin:0 0 6px}
.card-body p{margin:0 0 12px; color:var(--muted)}
.tags{display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 12px; list-style:none}
.tags li{padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.04); font-size:.85rem}
.actions{display:flex; gap:8px}

.chips{display:flex; flex-wrap:wrap; gap:10px; padding:0; list-style:none}
.chips li{border:1px solid var(--border); background:var(--card); padding:10px 12px; border-radius:12px}

.timeline{list-style:none; padding:0; margin:0; border-left:2px dashed var(--border)}
.timeline li{display:grid; grid-template-columns:150px 1fr; column-gap:18px; padding:0 0 26px; margin:0 0 26px 18px; position:relative}
.timeline li::before{content:""; position:absolute; left:-10px; top:6px; width:12px; height:12px; border-radius:50%; background:linear-gradient(90deg,var(--primary),#a78bfa); box-shadow:0 0 0 4px rgba(255,255,255,.06)}
.timeline .time{color:var(--muted); font-weight:600}
.timeline .entry h3{margin:0 0 6px}
.timeline .entry p{margin:0; color:var(--muted)}

.contact{display:grid; grid-template-columns:1fr 1fr; gap:14px; background:var(--card); border:1px solid var(--border); border-radius:18px; padding:16px}
.contact .field{display:flex; flex-direction:column; gap:8px}
.contact .field.half{grid-column:span 1}
.contact .field:not(.half){grid-column:span 2}
.contact input, .contact select, .contact textarea{
  background:#0000; border:1px solid var(--border); border-radius:12px; padding:10px 12px; color:var(--fg)
}
.contact textarea{resize:vertical}
.form-actions{grid-column:span 2; display:flex; align-items:center; gap:12px}
#formStatus{color:var(--muted)}

.footer{display:flex; align-items:center; justify-content:space-between; padding:22px 0 40px; color:var(--muted)}
.footer .socials{display:flex; gap:14px}
.footer .socials a{color:inherit; text-decoration:none; font-size:18px}

.reveal{opacity:0; transform:translateY(10px); transition: all .6s ease}
.reveal.visible{opacity:1; transform:none}

/* Responsive */
@media (max-width: 950px){
  .hero{grid-template-columns:1fr; padding-top:28px}
  .grid.projects{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  nav a:not(.btn){display:none}
  .grid.projects{grid-template-columns:1fr}
  .timeline{border:0}
  .timeline li{grid-template-columns:1fr; margin-left:0}
  .contact{grid-template-columns:1fr}
  .form-actions{grid-column:span 1}
}

/* Fix input and select field visibility in dark mode */
:root {
  --input-bg-dark: rgba(255, 255, 255, 0.05);
  --input-bg-light: rgba(0, 0, 0, 0.03);
}

/* Dark mode fields */
body:not(.light) input,
body:not(.light) select,
body:not(.light) textarea {
  background-color: var(--input-bg-dark);
  color: var(--fg);
  border: 1px solid var(--border);
}

/* Light mode fields */
body.light input,
body.light select,
body.light textarea {
  background-color: var(--input-bg-light);
  color: var(--fg);
  border: 1px solid var(--border);
}

/* Dropdown fix (force visible options) */
select option {
  background-color: var(--bg);
  color: var(--fg);
}

/* On focus: add subtle glow */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 5px var(--primary);
}

/* Consistent input styling across dark & light mode */
.contact input,
.contact select,
.contact textarea {
  background: rgba(255, 255, 255, 0.06); /* translucent neutral background */
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--fg);
  border-radius: 12px;
  padding: 10px 12px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.contact input::placeholder,
.contact textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Ensure dropdown options are readable */
.contact select option {
  background-color: #0f172a;  /* dark neutral dropdown list */
  color: #e5e7eb;
}

/* Focused state (nice glow highlight) */
.contact input:focus,
.contact select:focus,
.contact textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 6px var(--primary);
}

/* Keep same look for light theme */
body.light .contact input,
body.light .contact select,
body.light .contact textarea {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: var(--fg);
}

body.light .contact select option {
  background-color: #f3f4f6;
  color: #111827;
}

/* --- Fix dropdown option colors in light mode --- */
body.light select option,
body.light select optgroup {
  background: #f5f5f5;      /* light popup background */
  color: #050505;           /* dark readable text */
}

/* Dark mode popup stays dark */
body:not(.light) select option,
body:not(.light) select optgroup {
  background: #1e293b;      /* dark neutral */
  color: #e2e8f0;           /* light readable text */
}

.skill-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  margin-right: 6px;
  vertical-align: middle;
}

.footer .socials img {
  width: 26px;
  height: 26px;
  opacity: 0.75;
  transition: opacity .2s ease, transform .2s ease;
}

.footer .socials img:hover {
  opacity: 1;
  transform: translateY(-2px);
}