/* ============================================================
   Rob Willemsen Portfolio – Global Styles
   ============================================================ */

/* Smooth scroll & font rendering */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #800020;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: #9a0026; }

/* Focus outline */
:focus-visible {
  outline: 2px solid #800020;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Selection color */
::selection {
  background: rgba(128, 0, 32, 0.20);
  color: inherit;
}

/* ── Animations ────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

.animate-fade-up  { animation: fadeUp  0.65s cubic-bezier(0.22,1,0.36,1) forwards; }
.animate-fade-in  { animation: fadeIn  0.50s ease forwards; }
.animate-float    { animation: float   6s ease-in-out infinite; }
.animate-scale-in { animation: scaleIn 0.50s cubic-bezier(0.22,1,0.36,1) forwards; }

/* Staggered delay helpers */
.delay-100 { animation-delay: 0.10s; }
.delay-200 { animation-delay: 0.20s; }
.delay-300 { animation-delay: 0.30s; }
.delay-400 { animation-delay: 0.40s; }
.delay-500 { animation-delay: 0.50s; }
.delay-600 { animation-delay: 0.60s; }
.delay-700 { animation-delay: 0.70s; }

/* Hidden before animation plays */
.will-animate { opacity: 0; }

/* ── Navbar ─────────────────────────────────────── */
.nav-link {
  position: relative;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.25s;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: #800020;
  border-radius: 2px;
  transition: width 0.3s cubic-bezier(0.22,1,0.36,1);
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }
.nav-link:hover,
.nav-link.active { color: #800020; }

/* ── Bordeaux Button ────────────────────────────── */
.btn-bordeaux {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  background: #800020;
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  letter-spacing: 0.02em;
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
  box-shadow: 0 4px 14px rgba(128,0,32,0.30);
}
.btn-bordeaux:hover {
  background: #9a0026;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(128,0,32,0.40);
}
.btn-bordeaux:active { transform: translateY(0); }

/* ── Outline Button ─────────────────────────────── */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  border: 1.5px solid #800020;
  color: #800020;
  font-weight: 600;
  border-radius: 8px;
  letter-spacing: 0.02em;
  transition: background 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.btn-outline:hover {
  background: #800020;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(128,0,32,0.30);
}

/* ── Section Title ──────────────────────────────── */
.section-tag {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #800020;
}
.section-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.section-divider {
  width: 3rem;
  height: 3px;
  background: #800020;
  border-radius: 2px;
  margin: 1rem 0 1.5rem;
}

/* ── Project Card ───────────────────────────────── */
.project-card {
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
}
.dark .project-card {
  background: #18181b;
  border-color: rgba(255,255,255,0.07);
}
.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.12), 0 0 0 1.5px #800020;
}
.dark .project-card:hover {
  box-shadow: 0 20px 48px rgba(0,0,0,0.40), 0 0 0 1.5px #800020;
}

/* image overlay on hover */
.project-card .img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(128,0,32,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  opacity: 0;
  transition: opacity 0.35s;
}
.project-card:hover .img-overlay { opacity: 1; }

/* ── Skill Chip ─────────────────────────────────── */
.skill-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.25rem 0.75rem;
  border-radius: 12px;
  background: #f8f8f8;
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  cursor: default;
}
.dark .skill-chip {
  background: #18181b;
  border-color: rgba(255,255,255,0.06);
}
.skill-chip:hover {
  transform: translateY(-4px);
  border-color: #800020;
  box-shadow: 0 8px 24px rgba(128,0,32,0.15);
}

/* ── Contact Form ───────────────────────────────── */
.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1.5px solid rgba(0,0,0,0.12);
  background: #fff;
  color: #111;
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.25s, box-shadow 0.25s;
  outline: none;
}
.dark .form-input {
  background: #18181b;
  border-color: rgba(255,255,255,0.12);
  color: #f1f5f9;
}
.form-input:focus {
  border-color: #800020;
  box-shadow: 0 0 0 3px rgba(128,0,32,0.12);
}
.form-input::placeholder { color: #9ca3af; }

/* ── Social icon button ─────────────────────────── */
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(128,0,32,0.35);
  color: #800020;
  transition: background 0.25s, color 0.25s, transform 0.25s, border-color 0.25s;
}
.social-btn:hover {
  background: #800020;
  color: #fff;
  border-color: #800020;
  transform: translateY(-3px);
}

/* ── Glassmorphism Card ─────────────────────────── */
.glass-card {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.35);
}
.dark .glass-card {
  background: rgba(24,24,27,0.70);
  border-color: rgba(255,255,255,0.08);
}

/* ── Hero gradient blob ─────────────────────────── */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.55;
}

/* ── Code badge ─────────────────────────────────── */
.code-badge {
  font-family: 'Fira Code', monospace;
  font-size: 0.8rem;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  background: rgba(128,0,32,0.10);
  color: #800020;
  font-weight: 500;
}
.dark .code-badge {
  background: rgba(128,0,32,0.20);
}

/* ── Intersection Observer fade-ins ─────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Mobile nav overlay */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.mobile-menu.open { transform: translateX(0); }