.nav-menu {
  position: fixed;
  top: 0;          /* start from top of viewport */
  bottom: 0;       /* full height */
  width: 16rem;
  background: white;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  z-index: 40;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;

  padding-top: 80px; /* same height as your navbar */
}


/* LTR hidden (off-screen right) */
html[dir="ltr"] .nav-menu {
  right: 0;
  left: auto;
  transform: translateX(100%);
}

/* RTL hidden (off-screen left) */
html[dir="rtl"] .nav-menu {
  left: 0;
  right: auto;
  transform: translateX(-100%);
}

/* Active menu slides in (works for both LTR & RTL) */
html[dir="ltr"] .nav-menu.active,
html[dir="rtl"] .nav-menu.active {
  transform: translateX(0);
}

/* Temporary no-transition helper */
.nav-menu.reset {
  transition: none !important;
}
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.01); /* almost invisible white to block clicks */
  z-index: 35;
  display: none;
}


/* Show when menu is active */
.menu-overlay.active {
  display: block;
}


.active-link {
  color: transparent; /* allow gradient text */
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(to right, #3b82f6, #ec4899); /* gradient */
}

.active-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px; 
  width: 100%; /* underline visible for active page */
  background: linear-gradient(to right, #3b82f6, #ec4899);
}








/* Simple slide down animation */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hamburger {
  position: relative;
  width: 24px; /* consistent width */
  height: 20px; /* enough space for 3 lines */
  cursor: pointer;
}

.hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #1e293b; /* slate-800 */
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center; /* pivot from the middle */
}

.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.hamburger span:nth-child(3) {
  bottom: 0;
}

/* Animate into X */
.hamburger.active span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  bottom: auto; /* reset bottom */
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}






@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.animate-gradient {
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite alternate;
}

@keyframes pulse-slow {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}
.animate-pulse-slow {
  animation: pulse-slow 8s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.animate-float {
  animation: float 4s ease-in-out infinite;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
  animation: fadeUp 1s ease-out forwards;
}

/* Responsive blur optimization */
@media (max-width: 640px) {
  .blur-\[150px\] { filter: blur(100px); }
  .blur-\[120px\] { filter: blur(80px); }
}


/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-up, .animate-pulse-slow, .animate-float {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* --- RTL Inline Flip (for buttons/links with icons) --- */
html[dir="rtl"] .rtl-inline-flip {
  display: inline-flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
}

/* Flip only arrows/chevrons (IMG or SVG) */
html[dir="rtl"] .rtl-inline-flip img[src*="arrow"],
html[dir="rtl"] .rtl-inline-flip img[src*="chevron"],
html[dir="rtl"] .rtl-inline-flip svg {
  order: 2 !important;
  transform: scaleX(-1) !important; /* ← this mirrors SVG horizontally */
  margin-left: 0.5rem !important;
  margin-right: 0 !important;
}

/* Ensure text comes first */
html[dir="rtl"] .rtl-inline-flip span {
  order: 1 !important;
}

/* Skip flipping for decorative icons if needed */
html[dir="rtl"] .no-rtl-flip {
  transform: none !important;
}




/* 🔁 Smarter RTL reversal — safe for mixed layouts */
[dir="rtl"] .rtl-flip:not(.flex-col):not(.flex-col-reverse) {
  flex-direction: row-reverse !important;
}

/* Optional: reverse animation direction when needed */
[dir="rtl"] .rtl-flip .animate-float {
  animation-direction: reverse;
}

a.copied .copied-tooltip {
  opacity: 1 !important;
}
.copied-tooltip {
  transition: opacity 0.3s ease, transform 0.3s ease;
}