/* styles.css — Dark neon 3D portfolio (lightweight, ~<20KB) */

/* ===== Theme ===== */
:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --border:#1f2a3f;
  --primary:#2563EB;
  --accent:#10B981;
  --text:#93A3B8;
  --heading:#E2E8F0;
  --radius:20px;
  --shadow-1: 0 6px 16px rgba(0,0,0,.35);
  --shadow-2: 0 20px 40px rgba(0,0,0,.45);
  --glow: 0 0 0 0 rgba(37,99,235,0);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 800px at 85% -10%, rgba(37,99,235,.12), transparent 60%),
              radial-gradient(900px 600px at -10% 10%, rgba(16,185,129,.12), transparent 50%),
              var(--bg);
  color:var(--text);
}

/* ===== Layout ===== */
.container{ width:min(1120px, 92%); margin-inline:auto }
.section{ padding: clamp(56px, 9vw, 96px) 0 }
.section__title{
  font: 800 clamp(26px, 5vw, 40px)/1.1 Poppins, Inter, sans-serif;
  color:var(--heading); margin:0 0 18px
}

/* ===== Nav ===== */
.nav{
  position:sticky; top:0; z-index:50; backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  border-bottom:1px solid var(--border);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; height:64px }
.brand{
  font:700 18px Poppins, Inter, sans-serif; color:var(--heading);
  padding:10px 14px; border-radius:14px; border:1px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), var(--shadow-1);
  text-decoration:none; background:linear-gradient(180deg,#121b2f,#0e172a);
}
.nav__links{ display:flex; gap:14px }
.nav__link{
  color:var(--text); text-decoration:none; padding:10px 12px; border-radius:12px; position:relative
}
.nav__link.active, .nav__link:focus-visible{
  color:var(--heading); outline:2px solid transparent; box-shadow:0 0 0 2px var(--border)
}

/* ===== Hero ===== */
.hero{ padding: clamp(64px, 10vw, 120px) 0 40px }
.hero__grid{ display:grid; gap:28px; grid-template-columns: 1.1fr .9fr; align-items:center }
@media (max-width: 900px){ .hero__grid{ grid-template-columns:1fr } }

.hero__copy{ background:linear-gradient(180deg, #111a2f, #0f172a);
  border:1px solid var(--border); border-radius:var(--radius); padding:28px;
  box-shadow: var(--shadow-1), var(--shadow-2);
}
.eyebrow{ display:block; font:600 14px Inter; color:var(--accent); letter-spacing:.4px; margin-bottom:8px }
.hero__title{ font:800 clamp(32px, 8vw, 64px)/1.05 Poppins, Inter, sans-serif; color:var(--heading); margin:0 0 8px }
.hero__tagline{ font:500 clamp(16px,2.6vw,20px)/1.6 Inter, sans-serif; margin:0 0 18px }

.actions{ display:flex; gap:12px; flex-wrap:wrap }
.btn{
  --lift: translateY(0); --ring: var(--glow);
  display:inline-block; padding:12px 18px; border-radius:16px; text-decoration:none;
  font-weight:600; letter-spacing:.2px; transition: transform .25s ease, box-shadow .25s ease, background .25s;
  transform:var(--lift); box-shadow: var(--shadow-1), var(--ring)
}
.btn--primary{
  color:white; background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 92%, #4f46e5), #1d4ed8);
  border:1px solid color-mix(in srgb, var(--primary) 70%, #000);
}
.btn--ghost{
  color:var(--heading); background:linear-gradient(180deg,#111a2f,#0f172a);
  border:1px solid var(--border)
}
.btn:hover{ --lift: translateY(-4px); --ring: 0 0 0 6px color-mix(in srgb, var(--primary) 20%, transparent) }
.btn:active{ transform:translateY(-1px) }

/* 3D hero art (CSS-only) */
.hero__art{ display:grid; place-items:center }
.chip-3d{ width:min(420px, 80%); aspect-ratio:1/1; position:relative; perspective:1000px }
.chip-3d__base,.chip-3d__top{
  position:absolute; inset:0; border-radius:28px; border:1px solid var(--border);
  background:linear-gradient(200deg, #0c162a, #0b1426 60%, #0c162a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 25px 60px rgba(0,0,0,.55);
  transform-style:preserve-3d
}
.chip-3d__top{ transform: translateZ(24px); }
.chip-3d__core{
  position:absolute; inset:18% 18%; border-radius:24px;
  background: radial-gradient(100px 100px at 65% 35%, rgba(37,99,235,.55), transparent 60%),
              radial-gradient(120px 120px at 35% 65%, rgba(16,185,129,.55), transparent 60%),
              linear-gradient(180deg, #111a2f, #0f172a);
  border:1px solid color-mix(in srgb, var(--primary) 40%, var(--border));
  transform: translateZ(40px);
}
.glow{ filter: drop-shadow(0 0 18px rgba(37,99,235,.45)) drop-shadow(0 0 24px rgba(16,185,129,.35)) }
@media (prefers-reduced-motion:no-preference){
  .chip-3d__core{ animation: pulse 2.8s ease-in-out infinite }
}
@keyframes pulse{ 0%,100%{ transform:translateZ(40px) scale(1) } 50%{ transform:translateZ(42px) scale(1.02) } }

/* Highlight pills */
.pills{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; padding:0; list-style:none }
.pill{
  background:#0f1a2c; color:var(--text); border:1px solid var(--border); padding:8px 10px; border-radius:999px;
  font:600 12px/1 Inter; box-shadow: inset 0 0 0 1px rgba(255,255,255,.02)
}
.pill--primary{ color:#dbeafe; border-color:color-mix(in srgb, var(--primary) 60%, var(--border));
  background:linear-gradient(180deg, rgba(37,99,235,.22), rgba(37,99,235,.06))
}

/* ===== Skill chips (emoji + tiny loop) ===== */
.skills{
  display:grid; gap:16px; grid-template-columns: repeat(2, 1fr);
}
@media (max-width:780px){ .skills{ grid-template-columns:1fr } }

.skill{
  display:flex; gap:14px; align-items:flex-start;
  padding:16px; border-radius:18px; border:1px solid var(--border); background:linear-gradient(180deg,#111a2f,#0f172a);
  box-shadow: var(--shadow-1)
}
.skill__emoji{
  font-size:28px; line-height:1; display:grid; place-items:center; width:42px; height:42px;
  border-radius:12px; background:rgba(37,99,235,.12); border:1px solid color-mix(in srgb, var(--primary) 40%, var(--border))
}
.skill.star .skill__emoji{ animation: twinkle 1.8s ease-in-out infinite }
@keyframes twinkle{ 50%{ filter: drop-shadow(0 0 10px rgba(37,99,235,.55)) } }

/* ===== Cards ===== */
.cards{ display:grid; gap:20px; grid-template-columns:1fr 1fr }
@media (max-width:900px){ .cards{ grid-template-columns:1fr } }

.card{
  position:relative; border-radius:22px; overflow:hidden; background:linear-gradient(180deg,#0f172a,#0d1627);
  border:1px solid var(--border); box-shadow: var(--shadow-1); transition: transform .25s ease, box-shadow .25s ease
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-1), var(--shadow-2) }
.card__media{ height:180px; border-bottom:1px solid var(--border) }
.gradient-cover{
  background:
    radial-gradient(220px 140px at 80% 20%, rgba(16,185,129,.28), transparent 60%),
    radial-gradient(260px 200px at 20% 80%, rgba(37,99,235,.32), transparent 60%),
    linear-gradient(180deg, #111a2f, #0f172a);
}
.card__body{ padding:18px }
.card__title{ margin:0 0 8px; color:var(--heading); font:700 22px/1.25 Poppins, Inter, sans-serif }
.card__sub{ margin:0 0 12px }
.bullets{ margin:0 0 12px 18px }
.tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px }
.tags span{
  font:600 12px/1 Inter; padding:6px 8px; border-radius:999px; color:#d1fae5;
  background:linear-gradient(180deg, rgba(16,185,129,.26), rgba(16,185,129,.08));
  border:1px solid color-mix(in srgb, var(--accent) 60%, var(--border))
}
.card__border{ position:absolute; inset:0; pointer-events:none; border-radius:22px; border:1px solid rgba(255,255,255,.06) }

/* Reusable “tilt” wrapper */
.tilt{ transform-style:preserve-3d }
.tilt:hover{ transform: perspective(800px) rotateX(1.2deg) rotateY(-1.2deg) }

/* ===== Contact & Footer ===== */
.contact{ display:flex; gap:16px; flex-wrap:wrap }
.contact__item{ color:#c7d2fe; text-decoration:none; padding:10px 14px; border-radius:14px; border:1px solid var(--border);
  background:linear-gradient(180deg,#111a2f,#0f172a); box-shadow: var(--shadow-1)
}
.footer{ border-top:1px solid var(--border); background:linear-gradient(180deg,#0f172a,#0b1220) }
.footer__inner{ display:flex; justify-content:space-between; align-items:center; height:72px }
.to-top{ text-decoration:none; color:#c7d2fe }

/* ===== A11y focus ===== */
a:focus-visible, button:focus-visible{
  outline:2px solid #60a5fa; outline-offset:2px; border-radius:12px
}

.hero__art {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative; /* keeps video boxed in */
  z-index: 1; /* keeps it below other sections */
}

.hero__art video.logo-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  pointer-events: none; /* 🔑 allows clicks to pass through */
}