/* ============================================================
   Chayon Sinha Portfolio — Custom Styles
   (Tailwind CDN handles utilities; this covers animations,
    custom properties, and anything Tailwind can't do inline)
   ============================================================ */

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: #0a0a0f;
  color: #f8fafc;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar            { width: 6px; }
::-webkit-scrollbar-track      { background: #0a0a0f; }
::-webkit-scrollbar-thumb      { background: #1e1e2e; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover{ background: #6366f1; }

/* ── Nav scroll state ─────────────────────────────────────── */
#site-nav.scrolled {
  background-color: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid #1e1e2e;
}

/* Active nav link */
.nav-link.active { color: #ffffff; }
.nav-link.active::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(135deg, #6366f1, #06b6d4);
  border-radius: 1px;
  margin-top: 2px;
}

/* ── Glow blobs ───────────────────────────────────────────── */
.glow-blob {
  filter: blur(80px);
  will-change: transform;
  animation: drift 14s ease-in-out infinite alternate;
}
.glow-indigo { background: radial-gradient(circle, #6366f1 0%, transparent 70%); }
.glow-cyan   { background: radial-gradient(circle, #06b6d4 0%, transparent 70%); }

@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, -30px) scale(1.05); }
}

/* ── Fade-in-up animation ─────────────────────────────────── */
.fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Expertise card hover glow ────────────────────────────── */
.expertise-card:hover {
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25),
              0 8px 32px -8px rgba(99, 102, 241, 0.15);
}

/* ── Project card hover glow ──────────────────────────────── */
.project-card:hover {
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25),
              0 8px 32px -8px rgba(99, 102, 241, 0.12);
}

/* ── Experience timeline ──────────────────────────────────── */
.experience-card:hover {
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2);
}

/* ── Contact info hover ───────────────────────────────────── */
.contact-info-item:hover {
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25);
  transform: translateX(4px);
  transition: all 0.25s ease;
}

/* ── Form inputs ──────────────────────────────────────────── */
.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: #0a0a0f;
  border: 1px solid #1e1e2e;
  color: #cbd5e1;
  font-size: 0.875rem;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input::placeholder { color: #475569; }
.form-input:focus {
  outline: none;
  border-color: rgba(99, 102, 241, 0.6);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* ── Typed cursor blink ───────────────────────────────────── */
#typed-cursor {
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Mobile menu open state ───────────────────────────────── */
.hamburger-open .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger-open .hamburger-line:nth-child(2) {
  opacity: 0;
}
.hamburger-open .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ── Smooth section scroll offset ────────────────────────── */
section { scroll-margin-top: 80px; }

/* ── Responsive tweaks ────────────────────────────────────── */
@media (max-width: 640px) {
  h1 { font-size: 2.75rem !important; }
}