/* site-ui.css - minimalist color system with optimal contrast */
:root {
  /* --- Primary accent (single color system) --- */
  /* Default: slightly darker accent for stronger contrast */
  --accent-primary: #056a88;        /* Default (darker) teal — stronger contrast */
  --accent-600: #04566d;            /* darker variant for strong surfaces */
  --accent-400: #1aa7bd;            /* lighter variant for highlights */
  --accent-200: #7edee9;            /* subtle tint for very light surfaces */
  --accent-foreground: #ffffff;     /* text color used on accent backgrounds */

  /* Legacy mappings (keeps existing template classes working) */
  --accent-light-primary: var(--accent-600);
  --accent-secondary: var(--accent-400);
  --accent-light-secondary: var(--accent-400);

  /* --- Backgrounds --- */
  --light-bg: #ffffff;               /* Pure white background */
  --dark-bg: #0f172a;               /* Deep navy for dark mode */

  /* Card backgrounds */
  --light-card: #f8fafc;             /* Subtle off-white for cards */
  --dark-card: #1e293b;              /* Lighter navy for cards */

  /* --- Text --- */
  --light-text: #0f172a;             /* Near black for light mode */
  --dark-text: #f8fafc;              /* Near white for dark mode */

  /* Single muted variant per theme */
  --light-muted: #475569;            /* Slate for light mode */
  --dark-muted: #94a3b8;             /* Light slate for dark mode */

  /* --- Accent backgrounds / text utilities --- */
  /* --bg-accent-primary: linear-gradient(135deg, rgba(8,145,178,0.12) 0%, rgba(8,145,178,0.04) 100%);
  --bg-accent-primary-dark: linear-gradient(135deg, rgba(26,167,189,0.08) 0%, rgba(5,86,109,0.03) 100%); */
  --text-accent-primary: var(--accent-primary); /* use accent for inline text on neutral backgrounds */
  --bg-accent-primary: linear-gradient(135deg, rgba(8,166,191,0.12) 0%, rgba(8,166,191,0.04) 100%);
  --bg-accent-primary-dark: linear-gradient(135deg, rgba(60,215,225,0.08) 0%, rgba(8,166,191,0.03) 100%);
  /* lighter accent variant optimized for badges/tags in light mode */
  --bg-accent-light-primary: linear-gradient(135deg, rgba(5,122,149,0.16) 0%, rgba(60,215,225,0.06) 100%);
  --bg-accent-light-primary-dark: linear-gradient(135deg, rgba(60,215,225,0.14) 0%, rgba(5,122,149,0.04) 100%);
  
  /* Focus and interactive states */
  --focus-ring: rgba(8,145,178,0.35);
  --hover-light: var(--accent-600);
  --hover-dark: var(--accent-400);

   /* Contrast-safe accents */
  --accessible-accent-light: #065e5c;       /* dark teal — good on light backgrounds */
  --accessible-accent-light-hover: #044c49;
  --accessible-accent-dark: #bffdfb;        /* bright cyan — good on dark backgrounds */
  --accessible-accent-dark-hover: #e6ffff;
  --site-link-focus: rgba(14,165,164,0.22);

  /* --- Brand colors and utilities --- */
  --brand-1: rgb(14 165 164 / 1); /* rgb(14 165 164 / var(--tw-bg-opacity, 1)) normalized */
  --brand-2: #3cd7e1;
  --brand-dark: rgba(6,95,94,1); /* darker stop for depth */
  --brand-border-light: rgba(255,255,255,0.12);
  --brand-border-dark: rgba(0,0,0,0.12);
  --brand-foreground: #ffffff;     /* text on brand */
  
  /* convenience */
  --brand-gradient-size: 200% 200%;
  --brand-gradient: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 50%, var(--brand-dark) 100%);
  --brand-shadow-dark-ambient: 0 6px 18px rgba(0,0,0,0.6);
  --brand-shadow-dark-glow: 0 12px 28px rgba(14,165,164,0.18);
  --brand-shadow-dark-strong: var(--brand-shadow-dark-glow), var(--brand-shadow-dark-ambient);

}
/* Accessible brand icon base (apply to footer/header icon) */
.brand-icon,
.brand-animated {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-foreground);
  background: var(--brand-gradient);
  background-size: var(--brand-gradient-size);
  border-radius: 0.5rem;
  box-shadow: 0 8px 22px rgba(6,95,94,0.18);
  padding: 0.25rem;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
  border: 1px solid var(--brand-border-light);
  transition: box-shadow .18s ease, transform .12s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* static brand gradient */
.brand-gradient {
  background: var(--brand-gradient);
  background-size: var(--brand-gradient-size);
  color: var(--accent-foreground, #fff);
  box-shadow: 0 8px 20px rgba(6,95,94,0.18);
}

/* Start Old V */
/* Light / Dark border tuning so icon separates from busy backgrounds
:root.dark .brand-icon,
:root.dark .brand-animated { border: 1px solid var(--brand-border-light); }
:root:not(.dark) .brand-icon,
:root:not(.dark) .brand-animated { border: 1px solid var(--brand-border-dark); } */
/* End Old V */
:root.dark .brand-icon,
:root.dark .brand-animated {
  /* stronger, tinted glow + deeper ambient shadow for separation on dark backgrounds */
  box-shadow: var(--brand-shadow-dark-strong);
  border: 1px solid rgba(255,255,255,0.06);
}

/* Slightly brighter glossy sheen on dark mode to increase perceived depth */
:root.dark .brand-glossy::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02) 30%, transparent 45%);
  mix-blend-mode: screen;
}

/* Hover / focus state — lift and intensify glow (still respectful of reduced-motion) */
:root.dark .brand-icon:hover,
:root.dark .brand-animated:hover,
:root.dark .brand-icon:focus,
:root.dark .brand-animated:focus {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 18px 44px rgba(14,165,164,0.20), 0 8px 20px rgba(0,0,0,0.65);
  transition: transform .15s ease, box-shadow .18s ease;
}

/* Focus / keyboard-visible ring */
.brand-icon:focus,
.brand-animated:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(14,165,164,0.18);
  transform: translateY(-1px);
}

/* Animated gradient (respect reduced-motion) */
@keyframes brandGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.brand-animated {
  animation: brandGradientShift 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .brand-animated {
    animation: none;
  }

  :root.dark .brand-icon:hover,
  :root.dark .brand-animated:hover,
  :root.dark .brand-icon:focus,
  :root.dark .brand-animated:focus {
    transform: none;
    transition: none;
  }
}

/* Optional glossy sheen for extra separation */
.brand-glossy::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.03) 30%, transparent 40%);
  mix-blend-mode: screen;
  border-radius: inherit;
}
.brand-glossy > * { position: relative; z-index: 1; }
/* Optional lighter accent variant: add `.accent-variant--light` to <body> to use a lighter accent */
.accent-variant--light {
  --accent-primary: #08a6bf; /* lighter primary */
  --accent-600: #0b94aa;
  --accent-400: #3cd7e1;
  --accent-200: #c9fbff;
  --bg-accent-primary: linear-gradient(135deg, rgba(8,166,191,0.12) 0%, rgba(8,166,191,0.04) 100%);
  --bg-accent-primary-dark: linear-gradient(135deg, rgba(60,215,225,0.08) 0%, rgba(8,166,191,0.03) 100%);
  --text-accent-primary: var(--accent-primary);
  --hover-light: var(--accent-600);
  --hover-dark: var(--accent-400);
}

/* Theme-aware link utility */
/* Links with proper contrast */
.site-link {
  color: var(--accessible-accent-light);
  text-decoration: none;
  font-weight: 600;
  transition: color .12s ease, text-decoration .12s ease, box-shadow .12s ease;

  /* outline: 2px solid transparent;
  outline-offset: 2px; */
}

.site-link:hover {
  color: var(--hover-light);
  /* text-decoration: underline; */
}

.site-link:focus-visible {
  outline-color: var(--focus-ring);
  /* text-decoration: underline; */
}

:root.dark .site-link{
  color: var(--accessible-accent-dark);
  text-shadow: 0 1px 0 rgba(0,0,0,0.12);
}
:root.dark .site-link:hover {
  color: var(--hover-dark);
}

/* Stronger dark-mode hover contrast overrides */
:root.dark .site-link:hover,
:root.dark #main-nav .site-link:hover,
:root.dark #mobile-nav .site-link:hover {
  /* use accessible white/bright accent on hover so text stays readable on dark backgrounds */
  color: var(--accent-foreground);
}

:root.dark #main-nav .site-link:focus,
:root.dark #main-nav .site-link:focus-visible {
  color: var(--accent-foreground);
}

/* Ensure links inside cards, hero, and other common containers use accessible colors */
.bg-light-card .site-link,
.card-bg .site-link,
.projects-container .site-link,
section .site-link{
  color: var(--accessible-accent-light);
}
:root.dark .bg-light-card .site-link,
:root.dark .card-bg .site-link,
:root.dark .projects-container .site-link,
:root.dark section .site-link{
  color: var(--accessible-accent-dark);
}

/* Hover / focus styles */
.site-link:hover,
.site-link:active{
  /* text-decoration: underline; */
  color: var(--accessible-accent-light-hover);
}
:root.dark .site-link:hover,
:root.dark .site-link:active{
  color: var(--accessible-accent-dark-hover);
}

/* Strong keyboard focus (visible ring, high contrast) */
.site-link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--site-link-focus);
  border-radius: 0.25rem;
}

/* Micro-fix for very small/low-contrast contexts: force bolder weight */
.site-link.small, .site-link.text-sm { font-weight: 700; }

/* Respect reduced motion for any animated link accents you may add */
@media (prefers-reduced-motion: reduce){
  .site-link{ transition: none; }
}
/* Modern header nav link enhancements
   - animated underline using ::after (performant transform)
   - improved focus-visible ring
   - active state styling (template uses .font-semibold for active)
   - respects light/dark variables and reduced-motion
*/
#main-nav .site-link {
  position: relative;
  display: inline-block;
  padding: 0.25rem 0.375rem;
  transition: color .16s ease, transform .12s ease;
}

#main-nav .site-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--accent-primary);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), background-color .12s ease;
}

/* Hover/active triggers underline expansion and color shift */
#main-nav .site-link:hover,
#main-nav .site-link:focus {
  color: var(--hover-light);
}

#main-nav .site-link:hover::after,
#main-nav .site-link:focus::after,
#main-nav .site-link.font-semibold::after {
  transform: scaleX(1);
}

/* Dark-mode underline color */
:root.dark #main-nav .site-link::after {
  background: var(--accent-400);
}

/* Active link (template marks with font-semibold) — give slightly stronger appearance */
#main-nav .site-link.font-semibold {
  color: var(--accessible-accent-light);
}

:root.dark #main-nav .site-link.font-semibold {
  color: var(--accessible-accent-dark);
}

/* Focus-visible — accessible focus ring */
#main-nav .site-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring);
  border-radius: 0.25rem;
}

/* Mobile stacked nav: make underline appear as left accent bar for blocks */
#mobile-nav .site-link {
  position: relative;
  padding-left: 0.75rem;
}

#mobile-nav .site-link::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 2px;
  background: transparent;
  transition: background-color .12s ease;
}

#mobile-nav .site-link:hover::before,
#mobile-nav .site-link:focus::before,
#mobile-nav .site-link.font-semibold::before {
  background: var(--accent-primary);
}

@media (prefers-reduced-motion: reduce){
  #main-nav .site-link::after,
  #mobile-nav .site-link::before { transition: none; }
}
/* -------------------------
   Accent utilities (single source of truth)
   ------------------------- */
.bg-accent-primary {
  background: var(--bg-accent-primary);
}
.dark .bg-accent-primary {
  background: var(--bg-accent-primary-dark);
}

.bg-accent-solid {
  background-color: var(--accent-primary);
  color: var(--accent-foreground);
}
.dark .bg-accent-solid {
  background-color: var(--accent-600);
  color: var(--accent-foreground);
}

.text-accent-primary {
  color: var(--text-accent-primary);
}
.text-on-accent { color: var(--accent-foreground); }

.hover\:bg-accent-primary:hover { background-color: var(--accent-600); color: var(--accent-foreground); }
.dark .hover\:bg-accent-primary:hover { background-color: var(--accent-400); color: var(--accent-foreground); }

/* Support utility-like classes found in templates (Tailwind-like with opacity e.g. bg-accent-primary/10) */
[class*="bg-accent-primary/10"] {
  background-color: rgba(8,145,178,0.10);
  color: var(--accent-primary);
}
.dark [class*="bg-accent-primary/10"],
[class*="dark:bg-accent-primary/10"] {
  background-color: rgba(8,145,178,0.06);
  color: var(--accent-foreground);
}

/* Accessibility overrides when using the lighter accent variant
   These increase background opacity and use darker accent text so
   small badges and buttons pass contrast checks in light mode. */
.accent-variant--light [class*="bg-accent-primary/10"] {
  /* slightly stronger tint for readable small text */
  background-color: rgba(8,166,191,0.16);
  color: var(--accent-600);
}
.accent-variant--light .dark [class*="bg-accent-primary/10"],
.accent-variant--light [class*="dark:bg-accent-primary/10"] {
  background-color: rgba(8,166,191,0.08);
  color: var(--accent-foreground);
}

/* Use darker accent for inline accent text in light-variant to improve contrast */
.accent-variant--light .text-accent-primary,
.accent-variant--light .text-sm.text-accent-primary {
  color: var(--accent-600) !important;
}

/* Primary buttons on light variant should use the darker shade */
.accent-variant--light .btn-primary {
  background-color: var(--accent-600) !important;
  color: var(--accent-foreground) !important;
}
.accent-variant--light .btn-primary:hover {
  background-color: var(--hover-light) !important;
}

/* Ensure cards use clear text color on light variant */
.accent-variant--light article.bg-light-card,
.accent-variant--light .card-bg,
.accent-variant--light .rounded-2xl {
  color: var(--light-text) !important;
}

[class*="bg-accent-light-primary/10"] {
  /* stronger tint so small text/pills pass contrast in light mode */
  background-color: rgba(5,122,149,0.16);
  color: var(--accent-foreground);
}
.dark [class*="bg-accent-light-primary/10"],
[class*="dark:bg-accent-light-primary/10"] {
  /* keep a subtle tint in dark mode with readable accent text */
  background-color: rgba(60,215,225,0.12);
  color: var(--accessible-accent-dark);
}

/* Utility class for a more visible accent-light primary (use on badges/tags) */
.bg-accent-light-primary {
  background: var(--bg-accent-light-primary);
  color: var(--accent-foreground);
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(5,122,149,0.08);
  border: 1px solid rgba(5,122,149,0.12);
}
.dark .bg-accent-light-primary {
  background: var(--bg-accent-light-primary-dark);
  color: var(--accessible-accent-dark);
  box-shadow: 0 6px 18px rgba(60,215,225,0.06);
  border: 1px solid rgba(255,255,255,0.04);
}

/* Text utility mappings used in templates */
.text-accent-primary { 
    color: var(--accessible-accent-light); /* #065e5c - better contrast */ 
}
.text-accent-light-primary { color: var(--accent-600); }
.dark .text-accent-primary, .dark .text-accent-light-primary { color: var(--accent-400); }

/* Hover-text utility support (templates use hover:text-... classes) */
[class*="hover:text-accent-primary"]:hover { color: var(--accent-primary); }
.dark [class*="hover:text-accent-primary"]:hover, [class*="dark:hover:text-accent-primary"]:hover { color: var(--accent-400); }

[class*="hover:text-accent-light-primary"]:hover { color: var(--accent-600); }
.dark [class*="hover:text-accent-light-primary"]:hover, [class*="dark:hover:text-accent-light-primary"]:hover { color: var(--accent-400); }

/* Primary button with minimalist style */
.btn-primary {
  background-color: var(--accent-primary);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.625rem 1.5rem;
  font-weight: 600;
  transition: all 0.2s ease;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.btn-primary:hover {
  background-color: var(--hover-light);
  transform: translateY(-2px);
}

.btn-primary:focus-visible {
  outline-color: var(--accent-primary);
}

:root.dark .btn-primary:hover {
  background-color: var(--hover-dark);
}

/* Reusable small utilities */
/* Card and container styles with enhanced contrast */
.card-bg {
  background-color: var(--light-card);
  border: 1px solid rgba(15,23,42,0.15);
  color: var(--light-text);
}

/* Language switcher specific styles */
#lang-toggle-btn {
  border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.0));
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

#lang-toggle-btn:hover {
  border-color: rgba(5,122,149,0.12);
  background: var(--bg-accent-primary);
  color: var(--accent-foreground);
}

:root.dark #lang-toggle-btn:hover {
  border-color: rgba(60,215,225,0.12);
  background: var(--bg-accent-primary-dark);
  color: var(--accent-foreground);
}

#lang-toggle-btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring);
}

#lang-custom-list {
  background: var(--light-card);
  border: 1px solid rgba(15,23,42,0.06);
}

:root.dark #lang-custom-list {
  background: var(--dark-card);
  border: 1px solid rgba(255,255,255,0.04);
}

#lang-custom-list ul li {
  transition: background-color .08s ease, color .08s ease;
}

/* Light-mode hover: use a subtle accent tint but darker accent text for contrast */
#lang-custom-list ul li:hover {
  background: rgba(8,145,178,0.06);
  color: var(--accent-600);
}

/* Dark-mode hover: keep white-on-accent for good contrast on dark backgrounds */
:root.dark #lang-custom-list ul li:hover {
  background: rgba(26,167,189,0.08);
  color: var(--accent-foreground);
}

/* Active / selected item styling */
.lang-active {
  background: var(--bg-accent-light-primary);
  /* In light mode the active item uses darker accent text for readability */
  color: var(--accent-600) !important;
  font-weight: 700;
}

:root.dark .lang-active {
  background: var(--bg-accent-light-primary-dark);
  color: var(--accessible-accent-dark) !important;
}

/* Make sure the sr-only select remains visually hidden but accessible */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Native select fallback styling: when the browser displays the real <select>,
   give it a palette-consistent hover and focus state. This doesn't change
   behavior — only the look when the native control is used. */
#lang-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--light-card);
  color: var(--light-text);
  border: 1px solid rgba(15,23,42,0.08);
  padding: 0.45rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.25;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
}

#lang-select:hover {
  background: var(--bg-accent-primary);
  color: var(--accent-foreground);
  border-color: rgba(5,122,149,0.14);
}

:root.dark #lang-select {
  background-color: var(--dark-card);
  color: var(--dark-text);
  border: 1px solid rgba(255,255,255,0.04);
}

:root.dark #lang-select:hover {
  background: var(--bg-accent-primary-dark);
  color: var(--accent-foreground);
  border-color: rgba(60,215,225,0.14);
}

#lang-select:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring);
  border-color: var(--accent-600);
}

.dark .card-bg {
  background-color: var(--dark-card);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--dark-text);
}

/* Badge and tag styles with proper contrast */
.badge,
.tag,
[class*="rounded-full"] {
  /* Use the solid accent background with clear foreground */
  background-color: var(--accent-primary);
  color: var(--accent-foreground);
  font-weight: 600;
}

.dark .badge,
.dark .tag,
.dark [class*="rounded-full"] {
  background-color: var(--accent-600);
  color: var(--accent-foreground);
}

/* Make badges more prominent when using the light accent variant */
.accent-variant--light .badge,
.accent-variant--light .tag,
.accent-variant--light [class*="rounded-full"] {
  background-color: var(--accent-600) !important;
  color: var(--accent-foreground) !important;
}

/* Ensure hover states maintain contrast (kept for backward compatibility) */
.hover\:bg-accent-primary:hover {
  background-color: var(--accent-600);
  color: var(--accent-foreground);
}

.dark .hover\:bg-accent-primary:hover {
  background-color: var(--accent-400);
  color: var(--accent-foreground);
}

/* Card containers with proper contrast */
.rounded-2xl {
  background-color: var(--light-card);
  border: 1px solid rgba(15,23,42,0.15);
  color: var(--light-text);
}

.dark .rounded-2xl {
  background-color: var(--dark-card);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--dark-text);
}

/* Text utilities with proper contrast */
.text-primary {
  color: var(--light-text);
}

.dark .text-primary {
  color: var(--dark-text);
}

/* Enhanced contrast for all text sizes */
.text-sm,
.text-muted {
  color: var(--light-text);
  opacity: 0.9; /* Maintain contrast while suggesting hierarchy */
}

.dark .text-sm,
.dark .text-muted {
  color: var(--dark-text);
  opacity: 0.9;
}

/* Small text with accent colors */
.text-sm.text-accent-primary {
  color: var(--text-accent-primary);
  font-weight: 500;
}

.dark .text-sm.text-accent-primary {
  color: var(--accent-400);
  font-weight: 500;
}

/* Ensure all links have proper contrast */
a.text-sm {
  color: var(--text-accent-primary);
  text-decoration: none;
  font-weight: 500;
}

.dark a.text-sm {
  color: var(--accent-400);
}

a.text-sm:hover {
  text-decoration: underline;
  color: var(--hover-light);
}

.dark a.text-sm:hover {
  color: var(--hover-dark);
}

/* Focus styles for interactive elements */
.focus-outline:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ======================
   Animations & Keyframes
   ====================== */
.animate-fadeInUp {
  animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.2;
  }
}

@keyframes mobileNavOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes nameFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes blobFloat {
  0% { transform: translateY(0) scale(1); opacity: 0.12; }
  25% { transform: translateY(-18px) scale(1.03); opacity: 0.18; }
  50% { transform: translateY(0) scale(1); opacity: 0.12; }
  75% { transform: translateY(10px) scale(0.98); opacity: 0.14; }
  100% { transform: translateY(0) scale(1); opacity: 0.12; }
}

/* Projects page specific layout/styles moved from inline template */
/* Modern Projects Layout */
.projects-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 4rem 1rem;
  position: relative;
  overflow: hidden;
}

/* Header Styles */
.projects-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
}

.header-badge {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--card);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
}

.projects-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s 0.2s ease forwards;
  position: relative;
}

.projects-subtitle {
  color: var(--muted);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s 0.4s ease forwards;
}

.header-decoration {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.decoration-circle {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  opacity: 0.1;
  filter: blur(40px);
  animation: pulse 8s ease-in-out infinite;
}

.decoration-line {
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.2;
}

/* Project Grid */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 2.5rem;
  perspective: 1000px;
}

/* Project Card consolidated base styles */
.project-card {
  /* visual layout */
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--card-border, rgba(0,0,0,0.08));
  box-shadow: var(--card-shadow, 0 4px 6px rgba(0,0,0,0.08));
  position: relative;
  transform-style: preserve-3d;

  /* entrance animation (kept but can be disabled via prefers-reduced-motion) */
  opacity: 0;
  transform: translateY(40px);
  animation: fadeInUp 0.6s ease forwards;
  animation-delay: calc(var(--card-index, 0) * 0.1s + 0.6s);
}

/* Light mode card styles */
@media (prefers-color-scheme: light) {
  :root {
    --card-bg: linear-gradient(to bottom right, var(--card), #f8fafc);
    --card-border: rgba(0, 0, 0, 0.1);
    --card-shadow: 
      0 4px 6px rgba(0, 0, 0, 0.08),
      0 1px 3px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
    --card-hover-bg: var(--card);
    --card-hover-shadow: 
      0 20px 40px rgba(0, 0, 0, 0.12),
      0 0 20px rgba(var(--accent-rgb), 0.15);
  }
}

/* Dark mode card styles */
@media (prefers-color-scheme: dark) {
  :root {
    --card-bg: linear-gradient(to bottom right, var(--card), #1e293b);
    --card-border: rgba(255, 255, 255, 0.12);
    --card-shadow: 
      0 4px 6px rgba(0, 0, 0, 0.25),
      0 1px 3px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --card-hover-bg: var(--card);
    --card-hover-shadow: 
      0 20px 40px rgba(0, 0, 0, 0.3),
      0 0 20px rgba(var(--accent-rgb), 0.2);
  }
}

.project-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, var(--accent));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.project-card:hover {
  transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
  border-color: var(--accent);
  background: var(--card-hover-bg);
  box-shadow: var(--card-hover-shadow);
}

.project-card:hover::before {
  opacity: 0.1;
}

/* Card Header */
.card-header {
  padding: 2rem;
  position: relative;
  overflow: hidden;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
}

/* Header styles by theme */
@media (prefers-color-scheme: light) {
  :root {
    --header-bg: linear-gradient(to right, 
      rgba(255, 255, 255, 0.8),
      rgba(248, 250, 252, 0.9));
    --header-border: rgba(0, 0, 0, 0.06);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --header-bg: linear-gradient(to right, 
      rgba(var(--accent-rgb), 0.05),
      var(--card));
    --header-border: var(--glass);
  }
}

.card-header::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(var(--accent-rgb), 0.1),
    transparent
  );
  transition: transform 0.6s ease;
  transform: translate(-100%, -100%) rotate(45deg);
}

.project-card:hover .card-header::before {
  transform: translate(100%, 100%) rotate(45deg);
}

/* Tags */
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.tag {
  padding: 0.5rem 1.25rem;
  border-radius: 100px;
  font-size: 0.875rem;
  background: var(--glass);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.tag::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.tag:hover {
  color: var(--card);
  transform: translateY(-2px);
  border-color: transparent;
}

.tag:hover::before {
  opacity: 1;
}

/* Card Content */
.card-title {
  font-size: clamp(1.5rem, 3vw, 1.8rem);
  margin: 1rem 0;
  color: var(--text);
  transition: color 0.3s ease;
}

.project-card:hover .card-title {
  color: var(--accent);
}

.card-content {
  padding: 1.5rem;
  background: linear-gradient(
    to bottom,
    var(--card),
    color-mix(in srgb, var(--card) 98%, var(--accent))
  );
}

.description {
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 2rem;
  transition: color 0.3s ease;
}

.project-card:hover .description {
  color: var(--text);
}

/* Highlights Section */
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}

.highlight-item {
  background: var(--glass);
  padding: 1.25rem;
  border-radius: 16px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.project-card:hover .highlight-item {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.2);
  transform: translateY(-5px);
}

.highlight-label {
  color: var(--muted);
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
  transition: color 0.3s ease;
}

.highlight-value {
  color: var(--accent);
  font-weight: 700;
  font-size: 1.25rem;
  transition: all 0.3s ease;
}

.project-card:hover .highlight-value {
  transform: scale(1.1);
  text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3);
}

/* Tech Stack */
.tech-stack {
  margin-top: 2rem;
}

.tech-title {
  color: var(--muted);
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
  transition: color 0.3s ease;
}

.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.tech-tag {
  padding: 0.5rem 1.25rem;
  border-radius: 100px;
  font-size: 0.875rem;
  background: var(--glass);
  color: var(--text);
  border: 1px solid var(--glass);
  transition: all 0.3s ease;
}

.tech-tag:hover {
  background: var(--accent);
  color: var(--card);
  border-color: transparent;
  transform: translateY(-2px);
}

/* Card Footer */
.card-footer {
  padding: 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
}

/* Footer styles by theme */
@media (prefers-color-scheme: light) {
  :root {
    --footer-bg: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.8),
      rgba(248, 250, 252, 0.9));
    --footer-border: rgba(0, 0, 0, 0.06);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --footer-bg: linear-gradient(to bottom,
      rgba(var(--accent-rgb), 0.05),
      var(--card));
    --footer-border: var(--glass);
  }
}

.view-project-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--card);
  border-radius: 100px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.view-project-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.view-project-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(var(--accent-rgb), 0.2);
}

.view-project-btn:hover::before {
  opacity: 1;
}

.view-project-btn::after {
  content: "→";
  transition: transform 0.3s ease;
}

.view-project-btn:hover::after {
  transform: translateX(4px);
}

/* Animations */
/* ======================
   Responsive Design
   ====================== */
@media (max-width: 1024px) {
  .projects-container {
    padding: 3rem 1rem;
  }

  .card-header,
  .card-content,
  .card-footer {
    padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  .projects-grid {
    gap: 2rem;
  }

  .highlights-grid {
    grid-template-columns: 1fr 1fr;
  }

  .decoration-circle {
    width: 200px;
    height: 200px;
  }
}

@media (max-width: 480px) {
  .projects-container {
    padding: 2rem 1rem;
  }

  .highlights-grid {
    grid-template-columns: 1fr;
  }

  .tags-container,
  .tech-tags {
    gap: 0.5rem;
  }

  .tag, .tech-tag {
    font-size: 0.75rem;
    padding: 0.4rem 1rem;
  }

  .view-project-btn {
    padding: 0.875rem 1.5rem;
    font-size: 0.875rem;
  }
}

/* Mobile nav small styles (when script removes .hidden) */
#mobile-nav {
  animation: mobileNavOpen 220ms cubic-bezier(0.2,0.9,0.2,1) both;
}

@keyframes mobileNavOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Tweak header glass for mobile spacing */
.header-glass {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 768px) {
  .header-glass { padding-left: 1.75rem; padding-right: 1.75rem; }
}

/* -----------------------------
   Stronger contrast on small screens
   Make header/footer nearly opaque on mobile so they don't blend with body
   ----------------------------- */
@media (max-width: 767px) {
  .header-glass {
    /* increase opacity so header stands out on mobile */
    background-color: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(15,23,36,0.08) !important;
    box-shadow: 0 6px 18px rgba(2,6,23,0.08);
    backdrop-filter: blur(6px) saturate(105%);
    -webkit-backdrop-filter: blur(6px) saturate(105%);
  }

  :root.dark .header-glass {
    background-color: rgba(6,10,14,0.96) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
    backdrop-filter: blur(6px) saturate(105%);
    -webkit-backdrop-filter: blur(6px) saturate(105%);
  }

  /* Make footer more solid on mobile too */
  .footer-glass {
    background-color: rgba(255,255,255,0.94) !important;
    border-top: 1px solid rgba(15,23,36,0.06) !important;
    box-shadow: 0 -6px 18px rgba(2,6,23,0.06);
  }

  :root.dark .footer-glass {
    background-color: rgba(8,10,14,0.94) !important;
    border-top: 1px solid rgba(255,255,255,0.04) !important;
    box-shadow: 0 -6px 18px rgba(0,0,0,0.45);
  }

  /* Mobile nav panel solid background so links are readable */
  #mobile-nav {
    background-color: rgba(255,255,255,0.98) !important;
    border: 1px solid rgba(15,23,36,0.06) !important;
    box-shadow: 0 10px 30px rgba(2,6,23,0.12);
    /* Ensure it sits above all decorative backgrounds and site elements */
    z-index: 99999 !important;
    position: absolute !important;
    left: 0; right: 0;
  }

  :root.dark #mobile-nav {
    background-color: rgba(6,10,14,0.98) !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    z-index: 99999 !important;
    position: absolute !important;
    left: 0; right: 0;
  }
}

/* ======================
   Accessibility & Motion
   ====================== */
@media (prefers-reduced-motion: reduce) {
  /* Disable all animations site-wide when user prefers reduced motion */
  .project-card,
  .tag,
  .tech-tag,
  .view-project-btn,
  .header-badge,
  .projects-title,
  .projects-subtitle,
  .decoration-circle,
  .highlight-item,
  .highlight-value,
  .site-name,
  .site-bg__blob,
  .site-bg__gradient,
  .header-glass,
  .footer-glass,
  #mobile-nav,
  .site-name::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Focus styles */
.view-project-btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Header & Footer glass/translucent styles */
.header-glass {
  background-color: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  border-radius: 12px;
  margin: 1rem 0;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  transition: background-color 0.25s ease, transform 0.18s ease;
  border: 1px solid rgba(15, 23, 36, 0.06);
}

:root.dark .header-glass {
  background-color: rgba(12, 16, 22, 0.48);
  border: 1px solid rgba(255,255,255,0.04);
}

.header-glass:hover {
  transform: translateY(-2px);
}

.footer-glass {
  background-color: rgba(255,255,255,0.5);
  backdrop-filter: blur(6px) saturate(105%);
  -webkit-backdrop-filter: blur(6px) saturate(105%);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: 1px solid rgba(15, 23, 36, 0.06);
  transition: background-color 0.25s ease, transform 0.18s ease;
}

:root.dark .footer-glass {
  background-color: rgba(8, 10, 14, 0.5);
  border: 1px solid rgba(255,255,255,0.03);
}

/* Name styles with elegant gradient and animation */
@keyframes nameGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.site-name {
  position: relative;
  display: inline-block;
  color: transparent;
  background: linear-gradient(
    135deg, 
    var(--accent-primary) 0%,
    var(--hover-light) 25%,
    var(--accent-primary) 50%,
    var(--hover-dark) 75%,
    var(--accent-primary) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: nameGradient 8s ease infinite;
  transition: transform 0.3s ease;
}

.site-name::after {
  content: '';
  position: absolute;
  inset: -2px -4px;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(8, 145, 178, 0.2),
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: 0.5rem;
}

.site-name:hover {
  transform: translateY(-2px);
}

.site-name:hover::after {
  opacity: 1;
}

:root.dark .site-name {
  background: linear-gradient(
    135deg,
    var(--hover-dark) 0%,
    var(--accent-primary) 50%,
    var(--hover-dark) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
}

.site-name:hover::after {
  opacity: 1;
  transform: translateX(30%);
}

@keyframes nameFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .header-glass, .footer-glass, .site-name { transition: none !important; animation: none !important; }
  .site-name::after { transition: none !important; }
}

/* =============================
   Site background (light + dark)
   - Fixed, pointer-events: none
   - Subtle animated gradient + 3 soft blobs
   - Reduced-motion friendly
   ============================= */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -20;
  pointer-events: none;
  overflow: hidden;
}

.site-bg__gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 10% 20%, rgba(110,231,183,0.06), transparent 20%),
              radial-gradient(50% 50% at 90% 80%, rgba(96,165,250,0.05), transparent 25%);
  transition: opacity 0.4s ease;
  mix-blend-mode: screen;
}

.site-bg__blob {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.18;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
  animation: blobFloat 12s ease-in-out infinite;
}

.site-bg__blob--1 { left: -10%; top: 5%; background: linear-gradient(135deg, rgba(110,231,183,0.9), rgba(96,165,250,0.7)); animation-delay: 0s; }
.site-bg__blob--2 { right: -8%; top: 30%; background: linear-gradient(135deg, rgba(96,165,250,0.85), rgba(96,165,250,0.45)); animation-delay: 3s; width: 520px; height: 520px; opacity: 0.12; }
.site-bg__blob--3 { left: 30%; bottom: -12%; background: linear-gradient(135deg, rgba(96,165,250,0.6), rgba(110,231,183,0.5)); animation-delay: 6s; width: 360px; height: 360px; opacity: 0.14; }

@keyframes blobFloat {
  0% { transform: translateY(0) scale(1); opacity: 0.12; }
  25% { transform: translateY(-18px) scale(1.03); opacity: 0.18; }
  50% { transform: translateY(0) scale(1); opacity: 0.12; }
  75% { transform: translateY(10px) scale(0.98); opacity: 0.14; }
  100% { transform: translateY(0) scale(1); opacity: 0.12; }
}

/* Theme adjustments: darker, subtler blobs for dark mode */
:root.dark .site-bg__gradient {
  background: radial-gradient(60% 60% at 10% 20%, rgba(10,20,30,0.22), transparent 20%),
              radial-gradient(50% 50% at 90% 80%, rgba(20,30,40,0.18), transparent 25%);
  mix-blend-mode: normal;
}

:root.dark .site-bg__blob--1 { background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(59,130,246,0.12)); opacity: 0.12; filter: blur(52px); }
:root.dark .site-bg__blob--2 { background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(59,130,246,0.06)); opacity: 0.08; filter: blur(56px); }
:root.dark .site-bg__blob--3 { background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(16,185,129,0.06)); opacity: 0.09; filter: blur(48px); }

/* Slightly reduce intensity when prefers-color-scheme suggests light explicitly */
@media (prefers-color-scheme: light) {
  .site-bg__gradient { opacity: 0.95; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .site-bg__blob { animation: none; }
  .site-bg__gradient { transition: none; }
}