/* ========== Base + Palette (extracted from your image) ========== */
:root{
  --primary-1:#6f4ff5; /* vibrant purple */
  --primary-2:#e94f9d; /* hot pink */
  --primary-3:#44c6f0; /* bright cyan */
  --primary-4:#ffba4a; /* warm gold */

  --soft-1:#c8a7ff;   /* soft lavender */
  --soft-2:#f4bfd6;   /* pale pink */
  --soft-3:#a4e2f5;   /* light sky blue */
  --soft-4:#ffe3b8;   /* creamy pastel yellow */

  --bg-1:#0b0e1a;     /* dark base */
  --bg-2:#101526;     /* dark depth */
  --text:#f7f8ff;
  --muted: rgba(247,248,255,.75);
  --card: rgba(255,255,255,.05);
  --border: rgba(255,255,255,.08);

  /* gradient control vars updated by JS */
  --mx: 50%;
  --my: 50%;
}

/* Light theme overrides */
body.light{
  --bg-1:#f7f9ff;
  --bg-2:#ffffff;
  --text:#0e1933;
  --muted: rgba(14,25,51,.75);
  --card: rgba(14,25,51,.05);
  --border: rgba(14,25,51,.1);
}

/* ========== Global ========== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: linear-gradient(135deg, var(--bg-1), var(--bg-2));
  overflow-x:hidden;
}

.container{max-width:1100px; margin:0 auto; padding:20px}

/* interactive gradient background layer */
#bg-gradient{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient( 40% 60% at var(--mx) var(--my), rgba(111,79,245,.35), transparent 60%),
    radial-gradient( 30% 45% at calc(100% - var(--mx)) calc(100% - var(--my)), rgba(233,79,157,.28), transparent 60%),
    radial-gradient( 25% 40% at calc(var(--mx) / 1.5) calc(var(--my) / 1.5), rgba(68,198,240,.22), transparent 60%),
    linear-gradient(135deg, var(--bg-1), var(--bg-2));
  transition: background 0.12s ease;
  filter: saturate(1) contrast(1.02);
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,0));
  backdrop-filter: blur(6px);
}
.header-inner{display:flex; justify-content:space-between; align-items:center}
.brand{font-weight:800; letter-spacing:.3px}
.actions{display:flex; gap:8px}

/* Buttons */
.btn{
  background: linear-gradient(90deg, var(--primary-1), var(--primary-2));
  color:#fff; border:none; padding:10px 14px; border-radius:12px; cursor:pointer;
  font-weight:700; box-shadow: 0 10px 25px rgba(111,79,245,.18);
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(111,79,245,.26); }
.btn:active{ transform: translateY(0); }
.btn.ghost{
  background: transparent; border:1px solid var(--border); color:var(--text);
  box-shadow:none;
}
.btn.small{ padding:8px 10px; border-radius:10px; font-size:14px; }

/* Cards & sections */
.section{ margin:18px 0; }
.card{
  background: var(--card); border:1px solid var(--border); border-radius:16px; padding:18px;
  box-shadow: 0 10px 30px rgba(2,6,23,.25);
}

/* Forms */
input, textarea{
  width:100%; background: rgba(255,255,255,.06); border:1px solid var(--border); color:var(--text);
  border-radius:12px; padding:10px 12px; outline:none;
}
textarea{ min-height:96px; resize:vertical; }
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.form-grid > *{ flex:1 1 260px; }

.muted{ color:var(--muted); }

/* Hero */
.hero-inner{ display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.hero-text{ flex:1 1 420px; }
.hero-text h1{ font-size:42px; margin:8px 0 6px 0; letter-spacing:-.5px; }
.hero-text p{ margin:6px 0 12px 0; color:var(--muted); }

.hero-photo{ width:260px; max-width:100%; }
.avatar{
  width:100%; aspect-ratio:1/1; border-radius:16px; background: rgba(255,255,255,.06);
  border:1px solid var(--border); display:grid; place-items:center;
  font-size:48px; color:var(--muted); cursor:pointer;
}
#photoUrl{ margin-top:8px; }

/* Chips (skills) */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.chip{
  background: linear-gradient(90deg, var(--primary-1), var(--primary-3));
  border:1px solid rgba(255,255,255,.16);
  color:#fff; font-weight:700; border-radius:999px; padding:6px 12px;
  display:inline-flex; gap:8px; align-items:center;
  transform: translateZ(0);
}
.chip button{ all:unset; cursor:pointer; opacity:.75; }
.chip:hover{ filter: brightness(1.05); }

/* Featured */
.featured{ display:flex; gap:12px; align-items:center; margin-top:12px; }
.featured-thumb{ width:220px; height:120px; border-radius:12px; overflow:hidden; background:#0f0f12; flex: 0 0 auto; }
.featured-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.featured-title{ font-weight:800; }
.hidden{ display:none !important; }

/* Projects */
.project-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:12px; margin-top:12px;
}
.project-card{
  background: rgba(255,255,255,.05);
  border:1px solid var(--border); border-radius:14px; padding:12px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, outline .18s ease;
  outline: 0 solid transparent;
}
.project-card:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 45px rgba(111,79,245,.22), 0 8px 20px rgba(68,198,240,.18);
  border-color: rgba(233,79,157,.35);
  outline: 2px solid rgba(233,79,157,.2);
}
.project-thumb{
  width:100%; aspect-ratio: 16/9; border-radius:10px; overflow:hidden; background:#0f0f12; margin-bottom:8px;
}
.project-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.project-title{ font-weight:800; margin-bottom:4px; }
.project-desc{ color:var(--muted); font-size:14px; margin-bottom:8px; }
.project-actions{ display:flex; gap:8px; }

/* To Top Button */
.to-top{
  position:fixed; right:18px; bottom:18px; width:54px; height:54px; border-radius:999px; border:none; cursor:pointer;
  background: radial-gradient(120% 120% at 30% 30%, var(--primary-1), var(--primary-2) 60%, var(--primary-3));
  color:#fff; font-size:20px; font-weight:900; box-shadow:0 16px 36px rgba(111,79,245,.3);
  transform: translateY(20px); opacity:0; pointer-events:none;
  transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.to-top.show{ transform: translateY(0); opacity:1; pointer-events:auto; }
.to-top:hover{ box-shadow:0 22px 44px rgba(111,79,245,.38); }
.to-top.pulse{ animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse{
  0%,100%{ box-shadow:0 16px 36px rgba(111,79,245,.30); transform:translateY(0) scale(1); }
  50%{ box-shadow:0 22px 60px rgba(111,79,245,.42); transform:translateY(-1px) scale(1.02); }
}

/* Reveal on scroll */
.reveal-on-scroll{ opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal-on-scroll.is-visible{ opacity:1; transform: translateY(0); }

/* Responsive tweaks */
@media (max-width: 800px){
  .hero-text h1{ font-size:34px; }
  .featured{ flex-direction:column; align-items:flex-start; }
}

#socialLinks a {
  text-decoration: none;
}
/* Cropper modal styles */
.cropper-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.cropper-modal.hidden {
  display: none;
}
.cropper-container {
  background: var(--bg-2);
  padding: 12px;
  border-radius: 10px;
  max-width: 90%;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cropper-container img {
  max-width: 100%;
  max-height: 70vh;
}
.cropper-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
}
.avatar {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* Ensure Portfolio brand and all section headings are white */
.brand, h2 {
    color: white !important;
}

/* Education section styling (reuse timeline styles) */
#education-section .timeline-item {
    background: rgba(255,255,255,0.05);
}

.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.timeline li {
  margin: 10px 0;
  padding: 10px;
  border-left: 3px solid var(--accent, #007bff);
  background: rgba(0, 0, 0, 0.03);
  border-radius: 6px;
}

.timeline li strong {
  display: block;
  font-weight: 600;
}

.timeline li span {
  font-size: 0.9em;
  color: var(--muted, #666);
}
.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.timeline li {
  margin: 10px 0;
  padding: 10px;
  border-left: 3px solid var(--accent, #007bff);
  background: rgba(0, 0, 0, 0.03);
  border-radius: 6px;
}

.timeline li strong {
  display: block;
  font-weight: 600;
}

.timeline li span {
  font-size: 0.9em;
  color: var(--muted, #666);
}