/* ═══════════════════════════════════════════════════
   CUSTOM CSS — only what Tailwind cannot handle
   ═══════════════════════════════════════════════════ */

/* ── Base ──────────────────────────────────────────── */
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { font-family: 'Inter', sans-serif; line-height: 1.7; overflow-x: hidden; }
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: #030014; }
::-webkit-scrollbar-thumb { background: #7042f8; border-radius: 3px; }
::selection               { background: rgba(112,66,248,.3); }

/* ── Keyframes ─────────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
@keyframes scroll-wheel {
  0%   { transform: translateY(0); opacity: 1; }
  80%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ── Hero staggered entrance ───────────────────────── */
.hero-greeting { opacity: 0; animation: fade-up .7s ease  .3s forwards; }
.hero-name     { opacity: 0; animation: fade-up .7s ease  .5s forwards; }
.hero-typed    { opacity: 0; animation: fade-up .7s ease  .7s forwards; }
.hero-cta      { opacity: 0; animation: fade-up .7s ease  .9s forwards; }
.hero-socials  { opacity: 0; animation: fade-up .7s ease 1.1s forwards; }
.hero-scroll   { opacity: 0; animation: fade-up  1s ease 1.6s forwards; }
.typed-cursor  { animation: blink 1s step-end infinite; }
.wheel         { animation: scroll-wheel 2s ease infinite; }

/* ── GSAP reveal start state ───────────────────────── */
.reveal { opacity: 0; transform: translateY(36px); }

/* ── Gradient heading text ─────────────────────────── */
.grad-text {
  background: linear-gradient(135deg, #f0f0f8 0%, rgba(200,200,230,.75) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Glass card backdrop ───────────────────────────── */
.glass {
  background: rgba(13,13,43,.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Skill pills ────────────────────────────────────── */
.skill-pill {
  font-size: .78rem;
  font-weight: 500;
  color: #7878a0;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9999px;
  padding: .25rem .75rem;
  transition: color .2s, border-color .2s, background .2s;
  cursor: default;
}
.skill-pill:hover {
  color: #7042f8;
  border-color: rgba(112,66,248,.4);
  background: rgba(112,66,248,.08);
}

/* ── Timeline vertical line ────────────────────────── */
.tl-wrap { position: relative; padding-left: 32px; }
.tl-wrap::before {
  content: '';
  position: absolute;
  left: 5px; top: 16px; bottom: 16px;
  width: 2px;
  background: linear-gradient(to bottom, #7042f8, rgba(112,66,248,.08));
}

/* ── Arrow bullet lists ─────────────────────────────── */
.arrow-list li { position: relative; padding-left: 16px; }
.arrow-list li::before {
  content: '▸';
  position: absolute;
  left: 0; top: 4px;
  color: #7042f8;
  font-size: .68rem;
}
.arrow-list--cyan li::before { color: #00d4ff; }

/* ── Category divider with fade line ───────────────── */
.fade-line { display: flex; align-items: center; gap: 14px; }
.fade-line::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, rgba(112,66,248,.4), transparent);
}
.fade-line--cyan::after {
  background: linear-gradient(to right, rgba(0,212,255,.4), transparent);
}

/* ── Navbar scroll state ────────────────────────────── */
#navbar.scrolled {
  background: rgba(3,0,20,.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 1px 0 rgba(112,66,248,.22);
}

/* ── Mobile nav slide ───────────────────────────────── */
@media (max-width: 767px) {
  #nav-menu {
    position: fixed;
    top: 72px; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px 36px;
    gap: 4px;
    background: rgba(3,0,20,.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(112,66,248,.22);
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform .4s ease, opacity .4s ease;
  }
  #nav-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  #nav-menu li   { width: 100%; }
  .nav-link      { display: block; padding: 12px 0; font-size: 1rem; }
  .nav-resume-wrap { margin: 8px 0 0; }
}

/* ── Hamburger animation ────────────────────────────── */
.hamburger span { transition: transform .3s ease, opacity .3s ease; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }