/* ====== Base ====== */
:root{
  --bg: #0c0f14;
  --text: #e9eef6;
  --muted: #a5b1c2;
  --card: rgba(255,255,255,0.06);
  --glass: rgba(255,255,255,0.17);
  --accent: #7aa2ff;
  --accent-2: #b388ff;
  --ring: rgba(122,162,255,0.45);
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  --blur: blur(14px);
}

:root.light{
  --bg:#f2f6ff;
  --text:#0f1728;
  --muted:#536177;
  --card: rgba(0,0,0,0.04);
  --glass: rgba(255,255,255,0.12);
  --accent:#3b6fff;
  --accent-2:#7b61ff;
  --ring: rgba(59,111,255,0.35);
  --shadow: 0 10px 24px rgba(0,0,0,0.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); background:var(--bg);
  font: 400 16px/1.6 "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
}

/* Sky layer: stars for dark, clouds for light */
.sky-layer{
  position:fixed; inset:0; z-index:-3;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,.05), transparent 60%),
              radial-gradient(900px 900px at 80% 120%, rgba(255,255,255,.04), transparent 60%);
}
:root:not(.light) .sky-layer{
  background-image:
    radial-gradient(1px 1px at 15% 20%, rgba(255,255,255,.8) 100%, transparent 0),
    radial-gradient(1.2px 1.2px at 60% 70%, rgba(255,255,255,.75) 100%, transparent 0),
    radial-gradient(1px 1px at 80% 30%, rgba(255,255,255,.65) 100%, transparent 0);
  background-size: 3px 3px, 3px 3px, 3px 3px;
  background-repeat: no-repeat;
}
:root.light .sky-layer{
  background:
    linear-gradient(#cfe6ff, #eaf4ff 40%, #ffffff 100%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width=\"800\" height=\"400\" viewBox=\"0 0 800 400\"><defs><radialGradient id=\"g\" cx=\"50%\" cy=\"50%\"><stop offset=\"0%\" stop-color=\"white\" stop-opacity=\"0.9\"/><stop offset=\"100%\" stop-color=\"white\" stop-opacity=\"0\"/></radialGradient></defs><g opacity=\"0.7\"><ellipse fill=\"url(%23g)\" cx=\"150\" cy=\"120\" rx=\"120\" ry=\"38\"/><ellipse fill=\"url(%23g)\" cx=\"360\" cy=\"90\" rx=\"160\" ry=\"42\"/><ellipse fill=\"url(%23g)\" cx=\"620\" cy=\"130\" rx=\"140\" ry=\"36\"/></g></svg>') repeat-x top/800px 400px;
  filter: saturate(110%);
}

/* Dreamy gradient + particles */
.bg-gradient{
  position:fixed; inset:-20vmax; z-index:-2;
  background:
    radial-gradient(40vmax 40vmax at 20% 20%, rgba(122,162,255,0.35), transparent 60%),
    radial-gradient(40vmax 40vmax at 80% 30%, rgba(179,136,255,0.35), transparent 60%),
    radial-gradient(60vmax 50vmax at 50% 90%, rgba(255,140,184,0.25), transparent 60%);
  filter: var(--blur);
  animation: floatGradient 18s ease-in-out infinite alternate;
}
@keyframes floatGradient { 0%{transform:translateY(-2%) scale(1)} 100%{transform:translateY(2%) scale(1.02)} }

#particles{
  position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.6;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.12) 2px, transparent 3px),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,0.08) 1.5px, transparent 3px),
    radial-gradient(circle at 30% 60%, rgba(255,255,255,0.10) 1.8px, transparent 3px),
    radial-gradient(circle at 85% 25%, rgba(255,255,255,0.07) 1.2px, transparent 3px);
  background-size: 24vmax 24vmax, 22vmax 22vmax, 28vmax 28vmax, 26vmax 26vmax;
  animation: drift 35s linear infinite;
}
:root.light #particles{
  opacity:.5;
  background-image:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,0.75) 12px, transparent 13px),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.65) 10px, transparent 11px);
  background-size: 120vmax 60vmax, 140vmax 70vmax; /* fluffy clouds accents */
}
@keyframes drift{ 0%{background-position:0 0, 0 0} 100%{background-position:200% 200%, -150% -150%} }

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
  backdrop-filter: saturate(120%) blur(12px);
  background: linear-gradient(to bottom, rgba(0,0,0,0.35), transparent);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
:root.light .site-header{ background: linear-gradient(to bottom, rgba(255,255,255,0.7), transparent); }

.logo{ display:flex; align-items:center; gap:6px; text-decoration:none }
.logo .logo-c, .logo .logo-d{
  display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:white; font-weight:800; box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.logo .logo-c{ animation: spin-slow 6s linear infinite }
@keyframes spin-slow{ to{ transform: rotate(360deg)} }
.logo .logo-d{ position:relative; overflow:hidden }
.logo .logo-d::after{ content:""; position:absolute; inset:0 50% 0 0; background:rgba(255,255,255,0.35); transform-origin:left; animation: door-peek 3s ease-in-out infinite }
@keyframes door-peek{ 0%,60%{transform: rotateY(0)} 75%{transform: rotateY(-45deg)} 100%{transform: rotateY(0)} }

.nav{ display:flex; gap:14px; align-items:center }
.nav a{
  color:var(--text); text-decoration:none; padding:8px 12px; border-radius:12px;
  opacity:.85; transition: all .25s ease;
}
.nav a:hover{ background:var(--card); opacity:1 }
.nav a.active{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff }

.header-actions{ display:flex; gap:10px; align-items:center }
.btn{
  border:1px solid rgba(255,255,255,0.18); background:var(--card);
  color:var(--text); padding:10px 14px; border-radius:14px; cursor:pointer;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-2px) }
.btn.primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border-color:transparent;
  box-shadow:0 10px 22px rgba(122,162,255,.25);
}
.btn.ghost{ background:transparent; border-color:rgba(255,255,255,0.25) }
:root.light .btn.ghost{ border-color:rgba(0,0,0,0.12) }

/* Hero */
.hero{ min-height: calc(100dvh - 72px); display:grid; place-items:center; text-align:center; padding:56px 16px 32px; gap:18px }
/* ===== CD Logo (updated with final tweaks) ===== */

/* Base CD logo container */
.cd-logo{
  position:relative;
  width:200px;
  height:200px;
  margin-inline:auto;
  display:grid;
  place-items:center;
  border:none;
  background:transparent;
  cursor:pointer;
}
.cd-logo .hint{
  position:absolute;
  bottom:-14px;
  left:50%;
  transform:translateX(-50%);
  font-size:12px;
  color:var(--muted)
}

/* --- CD Disc (dark mode only) --- */
.cd-c{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.25), transparent 55%),
    conic-gradient(from 0deg, rgba(255,255,255,0.15), rgba(255,255,255,0) 60%, rgba(255,255,255,0.15));
  border: 10px solid transparent;
  outline: 2px dashed rgba(255,255,255,0.25);
  animation: spin-vinyl 7s linear infinite;
}
@keyframes spin-vinyl{ to{ transform: rotate(360deg) } }

/* Hide CD in light mode */
:root.light .cd-c{
  display:none;
}

/* --- Sun (light mode only) --- */
.cd-sun{
  position:absolute;
  inset:0;
  border-radius:50%;
  background: radial-gradient(circle at 50% 50%, #ffd95e 35%, #ffb347 65%, rgba(255,180,70,0) 70%);
  box-shadow: 0 0 40px 12px rgba(255, 213, 94, 0.55);
  animation: spin-sun 12s linear infinite;
  display:none;
}
:root.light .cd-sun{
  display:block;
}
@keyframes spin-sun{ to{ transform: rotate(360deg) } }

/* --- Curved D Door --- */
.cd-d{
  position:absolute;
  width:140px;
  height:160px;
  display:grid;
  place-items:end center;
  perspective: 900px;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.35));
  transform: rotate(90deg); /* rotate the whole D 90° right */
}
.door-arch{
  position:relative;
  width:100%;
  height:100%;
  background:
    radial-gradient(100% 65% at 50% 0%, rgba(255,255,255,0.95) 0 65%, transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,0.95) 66%, rgba(255,255,255,0.95) 100%);
  border-radius: 70px 70px 12px 12px;
  overflow:hidden;
}
.door-panel{
  position:absolute;
  inset:6% 6% 6% 6%;
  background: linear-gradient(135deg, #ffffff, #eaeefc);
  border-radius: 64px 64px 8px 8px;
  transform-origin: left center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
  animation: door-idle 4.2s ease-in-out infinite;
}
:root:not(.light) .door-panel{
  background: linear-gradient(135deg, #ffffff, #f3f6ff);
}
@keyframes door-idle{
  0%,65%{ transform: rotateY(0) }
  80%{ transform: rotateY(-35deg) }
  100%{ transform: rotateY(0) }
}


/* About section (hidden -> revealed) */
.about-section{
  position:relative; overflow:hidden; max-height:0; opacity:0;
  transition: max-height .9s ease, opacity .9s ease;
}
.about-section.open{ max-height:1200px; opacity:1 }
.about-wrap{
  max-width:1100px; margin: 6px auto 64px; padding:22px; border-radius:18px;
}
.about-grid{ display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top:12px }
.about-card{
  background:var(--glass); border:1px solid rgba(255,255,255,0.18); border-radius:16px; padding:14px; box-shadow:var(--shadow);
}
.about-cta{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap }

/* Pages */
.page{ padding:40px 16px 64px; max-width:1100px; margin:auto }
.page-title{ font-size: clamp(24px, 4vw, 40px); margin:12px 0 24px }

/* Projects — cabinet shelves + highlight-on-click */
.shelves h2{ margin:28px 0 10px }
.shelf{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:16px; padding:18px; border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.card{
  position:relative; overflow:hidden; border-radius:18px; background:var(--card);
  border:1px solid rgba(255,255,255,0.12); display:flex; flex-direction:column; min-height:180px;
  transform: translateZ(0); /* GPU promote to avoid reflow jank */
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease, filter .2s ease;
}
.card:hover{ transform: translateY(-4px) }
.card.active{
  border-color: var(--ring);
  box-shadow: 0 0 0 2px var(--ring), 0 16px 38px rgba(122,162,255,.25);
  filter: saturate(1.1);
}
.card.dimmed{ opacity: .55; filter: grayscale(0.2) }
.card-media{ height:120px }
.shimmer{
  background: linear-gradient(90deg, rgba(255,255,255,0.08) 25%, rgba(255,255,255,0.2) 37%, rgba(255,255,255,0.08) 63%);
  background-size:400% 100%; animation: shimmer 2.2s infinite;
}
@keyframes shimmer{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.card-body{ padding:14px 14px 18px; display:grid; gap:8px }
.status.pill{
  align-self:start; padding:6px 10px; border-radius:999px; font-size:12px;
  background:rgba(122,162,255,0.2); color: #cfe0ff; border:1px solid rgba(122,162,255,0.35);
}
.status.pill.hollow{ background:transparent; color:var(--muted); border:1px dashed rgba(255,255,255,0.25) }
.slot{ outline:1px dashed rgba(255,255,255,0.18); align-items:center; justify-content:center; text-align:center }
.slot .slot-dash{ font-size:36px; color:rgba(255,255,255,0.35); line-height:120px }

/* Members — orbit layout, hover bug fix (no layout shift) */
.orbit h2{ margin:22px 0 10px }
.orbit-ring, .orbit-grid{
  display:grid; gap:16px;
}
.orbit-ring{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) }
.orbit-grid{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) }

/* Important: use transforms only; no margins/padding changes on hover */
.orb{
  background:var(--glass); border-radius:22px; padding:14px; text-align:center;
  border:1px solid rgba(255,255,255,0.18); box-shadow: var(--shadow);
  will-change: transform, box-shadow; /* fix jank */
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}
.orb:hover{ transform: translateY(-4px) } /* purely transform */
.avatar{
  width:64px; height:64px; border-radius:50%;
  margin: 4px auto 10px; display:grid; place-items:center; font-weight:800; color:#fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}
.role{ color:var(--muted); margin-top:-4px }

/* Contact forms */
.contact-form{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; margin-bottom:22px;
}
.contact-form .full{ grid-column: 1 / -1 }
.form label{ display:grid; gap:6px; font-weight:600 }
.form input, .form textarea{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); color:var(--text);
  border-radius:14px; padding:12px 12px; outline:none;
}
:root.light .form input, :root.light .form textarea{ background:rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.12) }
.form input:focus, .form textarea:focus{ border-color: var(--ring) }

.contact-card.glass{
  padding:18px; border-radius:18px; background:var(--glass);
  border:1px solid rgba(255,255,255,0.18); box-shadow: var(--shadow);
}
.muted{ color:var(--muted) }

/* Footer: fixed height to avoid reflow jitter */
.site-footer{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px; border-top:1px solid rgba(255,255,255,0.08);
  min-height:72px; /* prevents layout shift on hover elsewhere */
  backdrop-filter: blur(8px);
}
.footer-left small{ opacity:.85 }
.contact-inline{ display:flex; gap:10px; align-items:center; color:var(--muted) }
.socials{ display:flex; gap:10px }
.icon{ width:36px; height:36px; border-radius:12px; display:inline-block; background:var(--card); position:relative; border:1px solid rgba(255,255,255,0.15) }
.icon::after{ content:""; position:absolute; inset:8px; border-radius:6px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); opacity:.6 }

/* Modal */
.modal{ position:fixed; inset:0; display:none; place-items:center; background: rgba(0,0,0,0.45); z-index:100 }
.modal[aria-hidden="false"]{ display:grid }
.modal-card{
  width:min(580px, 92vw); background:var(--glass); padding:18px; border-radius:18px;
  border:1px solid rgba(255,255,255,0.2); box-shadow: var(--shadow); position:relative;
}
.modal-close{
  position:absolute; right:16px; top:10px; font-size:26px; background:transparent; border:none; color:var(--text); cursor:pointer
}

/* Responsive */
@media (max-width: 720px){
  .nav{ gap:6px }
  .nav a{ padding:8px 10px }
  .contact-form{ grid-template-columns: 1fr }
}