/* ===== TrackCoach360 Marketing Site - Custom Styles ===== */

/* Smooth scroll + offset for sticky nav */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

/* ===== NAV STATES ===== */
#navbar {
  background: transparent;
}

#navbar.nav-solid {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Nav logo text - always white on transparent, dark on solid */
#navbar .nav-logo-text {
  color: #fff;
}
#navbar.nav-solid .nav-logo-text {
  color: #0f172a;
}

/* Nav links - white on transparent, dark on solid */
#navbar .nav-link {
  color: rgba(255, 255, 255, 0.8);
}
#navbar .nav-link:hover {
  color: #fff;
}
#navbar.nav-solid .nav-link {
  color: #475569;
}
#navbar.nav-solid .nav-link:hover {
  color: #2563EB;
}

/* Mobile menu button */
#navbar #mobile-menu-btn {
  color: rgba(255, 255, 255, 0.8);
}
#navbar.nav-solid #mobile-menu-btn {
  color: #475569;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out both;
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out both;
}

/* Initial state for scroll-triggered animations */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* Stagger children animations */
.animate-on-scroll.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.animate-on-scroll.is-visible > *:nth-child(2) { transition-delay: 100ms; }
.animate-on-scroll.is-visible > *:nth-child(3) { transition-delay: 200ms; }

/* ===== SCREENSHOT PLACEHOLDERS ===== */
.screenshot-placeholder {
  perspective: 1000px;
}

.screenshot-frame {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transform: rotateY(-2deg) rotateX(1deg);
  transition: transform 0.4s ease;
}

.screenshot-frame:hover {
  transform: rotateY(0deg) rotateX(0deg);
}

.screenshot-dots {
  display: flex;
  gap: 0.375rem;
  padding: 0.875rem 1rem;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}

.screenshot-body {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.screenshot-body.has-image {
  aspect-ratio: auto;
  padding: 0;
  background: none;
  display: block;
}

.screenshot-body.has-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== CTA BUTTON GLOW ===== */
.cta-glow {
  position: relative;
}

.cta-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  box-shadow: 0 0 24px rgba(249, 115, 22, 0.4);
  transition: opacity 0.3s ease;
}

.cta-glow:hover::after {
  opacity: 1;
}

/* ===== FAQ ACCORDION ===== */
.faq-item {
  transition: box-shadow 0.2s ease;
}

.faq-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.faq-question {
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}

.faq-question:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: -2px;
  border-radius: 0.75rem;
}

.faq-chevron {
  transition: transform 0.2s ease;
}

.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
  padding-top: 0;
  padding-bottom: 0;
}

.faq-item.is-open .faq-answer {
  max-height: 300px;
  opacity: 1;
}

/* Override hidden for animation */
.faq-answer:not(.hidden) {
  display: block;
}

/* ===== MISC ===== */

/* Focus styles */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Selection color */
::selection {
  background: rgba(37, 99, 235, 0.15);
  color: inherit;
}

/* Prevent layout shift from scrollbar */
html {
  overflow-y: scroll;
}