/* ---------- Root Theme Colors ---------- */
:root {
  --bg: #0f1724;
  --card: #0b1220;
  --muted: #9aa4b2;
  --accent: #7c5cff;
  --text: #e6eef6;
  --glass: rgba(255, 255, 255, 0.03);
}

[data-theme="light"] {
  --bg: #f6f8fb;
  --card: #ffffff;
  --muted: #5a6270;
  --accent: #4f46e5;
  --text: #0b1020;
  --glass: rgba(2, 6, 23, 0.02);
}

/* ---------- Global Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: Inter, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  scroll-behavior: smooth;
  transition: background 0.4s, color 0.4s;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ---------- Navbar ---------- */
.nav {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 20px; position:sticky; top:0; z-index:40;
  background:var(--glass); backdrop-filter: blur(8px);
}
.brand{ font-weight:700; font-size:1.1rem; }
.navlinks{ display:flex; gap:12px; align-items:center; }
.navlinks a{ color:var(--muted); text-decoration:none; padding:6px 8px; border-radius:6px; transition: .22s; }
.navlinks a:hover{ color:var(--text); background:var(--glass); }
.toggle{
  background:var(--card); border:none; border-radius:8px; padding:6px 10px; cursor:pointer; color:var(--text);
}
.toggle:hover{ background:var(--accent); color:#fff; }

/* ---------- Hero ---------- */
.hero {
  display:grid; grid-template-columns:1fr 400px; align-items:center;
  gap:40px; padding:70px 20px;
}
.hero-left h1{ font-size:42px; margin-bottom:10px; }
.lead{ color:var(--muted); font-size:17px; line-height:1.5; margin-bottom:16px; }
.cta{ display:flex; gap:12px; }
.btn{ padding:10px 14px; background:var(--accent); color:#fff; border-radius:8px; text-decoration:none; transition: .2s; display:inline-block; }
.btn:hover{ transform:translateY(-2px); background:#8b6eff; }
.btn.ghost{ background:transparent; border:1px solid var(--muted); color:var(--text); }
.btn.ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- Canvas & Profile ---------- */
.canvas-wrap{
  position:relative; width:380px; height:380px; display:flex; justify-content:center; align-items:center;
  border-radius:20px; overflow:hidden; background:var(--card); box-shadow:0 10px 30px rgba(0,0,0,0.45);
}
.three-canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:auto; cursor: default;
}
.three-canvas.clickable{ cursor: pointer; }

/* profile (kept circular) */
.hero-photo{
  position:relative; z-index:1; width:260px; height:260px; object-fit:cover; border-radius:50%;
  border:3px solid var(--accent); box-shadow:0 0 25px rgba(0,0,0,0.45);
}

/* ---------- Cards / Sections ---------- */
.card{
  background:var(--card); margin:24px; border-radius:16px; padding:24px;
  box-shadow:0 8px 25px rgba(0,0,0,0.35); transition: transform .32s, box-shadow .32s, opacity .6s;
  opacity:0; transform: translateY(18px);
}
.card.visible{ opacity:1; transform:translateY(0); }
.card:hover{ transform: translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,0.45); }

h2{ margin-bottom:12px; color:var(--accent); }
ul{ list-style:disc; margin-left:20px; color:var(--muted); line-height:1.6; }

/* ---------- Research flip cards ---------- */
.research-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-top:18px; }
.flip-card{ perspective:1000px; }
.flip-inner{ position:relative; width:100%; height:160px; transition:transform .6s; transform-style:preserve-3d; }
.flip-card:hover .flip-inner{ transform:rotateY(180deg); }
.front, .back {
  position:absolute; width:100%; height:100%; backface-visibility:hidden; display:flex;
  align-items:center; justify-content:center; text-align:center; padding:14px; border-radius:10px;
  background:var(--glass); box-shadow: inset 0 0 12px rgba(255,255,255,0.03);
}
.back{ transform:rotateY(180deg); color:var(--muted); font-size:14px; line-height:1.4; }

/* ---------- Footer ---------- */
footer{ text-align:center; padding:20px; color:var(--muted); font-size:14px; }

/* ---------- Loader (robust) ---------- */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(6,10,18,0.97) 0%, rgba(2,6,23,0.98) 60%);
  overflow: hidden;
  transition: opacity 420ms cubic-bezier(.2,.9,.2,1), transform 420ms cubic-bezier(.2,.9,.2,1);
  opacity: 1;
  pointer-events: auto;
}
.site-loader.hidden { opacity: 0; pointer-events: none; transform: translateY(-6px); }
.loader-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; background: transparent; }
.loader-ui { position: relative; z-index: 5; text-align: center; color: #dfeeff; max-width: 760px; padding: 16px 22px; pointer-events: auto; }
.loader-brand { font-weight:700; color:var(--accent,#7c5cff); margin-bottom:6px; }
.loader-title { font-size:20px; margin-bottom:6px; color:#eaf3ff; }
.loader-sub { font-family:ui-monospace,monospace; font-size:13px; opacity:.88; margin-bottom:12px; }
.loader-progress { width: 340px; height: 10px; background: rgba(255,255,255,0.04); border-radius:999px; margin:8px auto 10px auto; overflow:hidden; box-shadow:inset 0 -1px 8px rgba(0,0,0,0.4); }
.loader-bar { height:100%; width:0%; background: linear-gradient(90deg, rgba(124,92,255,0.95), rgba(80,200,255,0.95)); border-radius:999px; transition: width 220ms linear; }
.loader-controls { margin-top:8px; display:flex; justify-content:center; }
.loader-skip { background:transparent; color:rgba(230,238,246,0.96); border:1px solid rgba(255,255,255,0.06); padding:8px 12px; border-radius:8px; cursor:pointer; }
.loader-skip:hover{ background: rgba(255,255,255,0.03); transform: translateY(-2px); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; text-align:center; padding:48px 16px; }
  .canvas-wrap{ width:260px; height:260px; margin:0 auto; }
  .hero-photo{ width:180px; height:180px; }
  .cta{ justify-content:center; }
  .card{ margin:16px; padding:20px; }
}


/* ===== Impact & Involvement Section ===== */
#impact {
  padding: 80px 0;
  background: var(--bg-alt, #0e0e0e);
  text-align: center;
}

#impact .section-title {
  font-size: 2.2rem;
  margin-bottom: 50px;
  color: var(--text-primary, #fff);
  font-weight: 700;
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  justify-items: center;
}

.impact-card {
  background: transparent;
  width: 280px;
  height: 330px;
  perspective: 1000px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.impact-card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  backface-visibility: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  background: var(--card-bg, #1a1a1a);
  color: #fff;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: transform 0.6s ease;
}

.card-front {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.card-front .icon {
  font-size: 2.2rem;
  margin-bottom: 15px;
}

.card-front h3 {
  font-size: 1.2rem;
  margin-bottom: 5px;
}

.card-front p {
  font-size: 0.9rem;
  color: #aaa;
}

.card-back {
  transform: rotateY(180deg);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.card-back p {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #ddd;
  margin-bottom: 8px;
}

.icon img {
  width: 40px;
  height: 40px;
}


/* ===== Fade-in Animation for Impact Cards ===== */
.impact-card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.impact-card.show {
  opacity: 1;
  transform: translateY(0);
}
/* ===== End of css/styles.css ===== */