/* Custom styles - gradient text, animations, JS-toggled states */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

html { scroll-behavior: smooth; }
body { font-family: 'Outfit', sans-serif; -webkit-font-smoothing: antialiased; }

/* Safe area for devices with notches (iPhone X+, etc.) */
header { padding-top: env(safe-area-inset-top); }
footer.footer-safe-area { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 640px) {
  footer.footer-safe-area { padding-bottom: 3rem; }
}

/* Gradient text */
.text-gradient {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Cursor blink */
.cursor { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Hero orbs */
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -30px) scale(1.05); }
}
.animate-float { animation: float 15s ease-in-out infinite; }
.animate-float-reverse { animation: float 12s ease-in-out infinite reverse; }

/* Scroll bounce */
@keyframes bounce-scroll {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
.animate-bounce-scroll { animation: bounce-scroll 2s ease-in-out infinite; }

/* Nav menu mobile - JS toggles .show */
@media (max-width: 767px) {
  .nav-menu-mobile {
    background-color: #0f172a; /* solid slate-900 */
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.4);
    transform: translateX(100%);
    transition: transform 0.35s ease-out;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-menu-mobile.show {
    transform: translateX(0);
    z-index: 100;
  }
}

/* Hamburger to X */
#nav-menu.show ~ #nav-toggle span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
#nav-menu.show ~ #nav-toggle span:nth-child(2) { opacity: 0; }
#nav-menu.show ~ #nav-toggle span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Nav link active state */
.nav__link.active-link { color: #818cf8; background: rgba(99, 102, 241, 0.1); }

/* Header scroll shadow */
#header.scroll-header { box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); }