/* ==========================================
   JSD SAS - Base Styles
   Stack: HTML5 + Tailwind CDN + Vanilla JS
   ========================================== */

/* --- Hero background grid texture --- */
.hero-grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px);
  background-size: 48px 48px;
}


/* --- Navbar transitions --- */
#navbar {
  background-color: transparent;
}

#navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid rgb(228 228 231); /* zinc-200 */
  box-shadow: 0 1px 20px 0 rgba(0,0,0,0.06);
}

#navbar.scrolled .nav-logo-text {
  color: #18181b; /* zinc-900 */
}

#navbar.scrolled .nav-link {
  color: #52525b; /* zinc-600 */
}

/* Hero section: navbar links are white initially */
#navbar:not(.scrolled) .nav-link {
  color: #a1a1aa; /* zinc-400 */
}

#navbar:not(.scrolled) .nav-link:hover {
  color: #34d399; /* brand-400 */
}

#navbar:not(.scrolled) .nav-logo-text {
  color: #ffffff;
}

#navbar:not(.scrolled) .nav-logo-sub {
  color: #71717a; /* zinc-500 */
}

/* --- Reveal animations --- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-on-load {
  opacity: 0;
  transform: translateY(20px);
  animation: reveal-fade-in 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.reveal-on-load.delay-200 {
  animation-delay: 0.2s;
}

@keyframes reveal-fade-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Pulse animation for live dot --- */
@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.animate-pulse-slow {
  animation: pulse-slow 2.5s ease-in-out infinite;
}

/* --- Bento card hover states --- */
.bento-card:hover {
  transform: translateY(-2px);
}

.bento-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

/* --- Form input focus ring enhancement --- */
.form-input:focus {
  background-color: #ffffff;
}

.form-input.is-invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* --- Submit button loading state --- */
.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Reduced motion support --- */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .reveal-on-load {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  .animate-pulse-slow {
    animation: none;
  }

  .bento-card {
    transition: none;
  }

  .bento-card:hover {
    transform: none;
  }
}

/* --- Mobile menu animation --- */
#mobile-menu {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* --- Smooth scroll with offset for fixed nav --- */
html {
  scroll-padding-top: 80px;
}