/* Font Family Definitions */
:root {
  --font-primary:
    "Inter", "Helvetica", "Arial", "PingFang SC", "Arial Unicode MS", "SimHei",
    "Source Han Sans", "Apple Color Emoji", "Segoe UI Emoji",
    "Noto Color Emoji", sans-serif;
  --font-heading:
    "Inter", "Helvetica", "Arial", "PingFang SC", "Arial Unicode MS", "SimHei",
    "Source Han Sans", "Apple Color Emoji", "Segoe UI Emoji",
    "Noto Color Emoji", sans-serif;
}

/* Prevent layout shift when scrollbar appears/disappears */
html {
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-primary);
}

h1,
h2,
h3,
.font-outfit {
  font-family: var(--font-heading);
}

/* Simplified translucent surfaces (no liquid-glass compositing) */
.glass {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.72);
}

.navbar-glass {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 16px 30px -18px rgba(15, 23, 42, 0.35);
}

.glass-card {
  background: rgba(255, 255, 255, 0.72);
  border-radius: 12px; /* Fixed at 12px */
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 14px 24px -18px rgba(0, 0, 0, 0.15);
}

.glass-tag {
  background: rgba(255, 255, 255, 0.82);
  border-radius: 12px; /* Fixed at 12px */
}

/* Navigation Links */
.nav-link {
  color: #64748b; /* text-slate-500 */
  transition:
    color 0.3s ease,
    opacity 0.3s ease;
  position: relative;
  font-size: 0.875rem; /* text-sm */
  font-weight: 600; /* fixed to avoid width jump on active */
}

.nav-link:hover {
  color: #2563eb; /* text-blue-600 */
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -0.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: #3b82f6; /* bg-blue-500 */
  transition: all 0.3s ease;
  border-radius: 9999px;
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link.active {
  color: #2563eb;
  opacity: 1;
}

.nav-link.active::after {
  width: 100%;
}

/* Custom Elements with 8px Radius */
.btn-sm {
  padding: 0.375rem 1rem;
  border-radius: 8px; /* Fixed at 8px */
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-block;
}

.social-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px; /* Fixed at 8px */
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.82);
  transition: all 0.3s ease;
  font-size: 0.875rem;
  font-weight: 700;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

/* Entry Animations */
@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main > section {
  animation: fadeInSlide 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Mobile Menu Links */
.mobile-nav-link {
  transition: transform 0.2s ease;
}

/* Sidebar Tabs */
.tab-btn {
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.tab-btn.active {
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  color: #2563eb;
}

.tab-btn.active svg {
  color: #2563eb;
}

.tab-content {
  animation: fadeInSlide 0.4s ease-out;
}

/* Mobile stability mode: keep motion conservative */
@media (max-width: 1023px) {
  .glass {
    background: rgba(255, 255, 255, 0.92);
  }

  .glass-card {
    background: rgba(255, 255, 255, 0.82);
    transition: background 0.2s ease, box-shadow 0.2s ease;
  }

  .glass-card:hover {
    transform: none;
    box-shadow: 0 14px 24px -18px rgba(0, 0, 0, 0.15);
  }

  #mobile-menu {
    background: rgba(255, 255, 255, 0.9) !important;
  }

  main > section,
  .tab-content {
    animation: none;
  }
}