/* Header scroll effect — subtle frosted glass in light theme */
#site-header {
  transition:
    background-color 320ms cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-backdrop-filter 320ms cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 320ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 320ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 320ms cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: 1px solid transparent;
  will-change: background-color, backdrop-filter;
}

#site-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: rgba(0, 0, 0, 0.06);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.02),
    0 4px 20px rgba(0, 0, 0, 0.03);
}

/* Mobile menu — solid light panel matching the scrolled header style */
#site-header #mobile-menu {
  background-color: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  animation: hx-mobile-menu-in 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

#site-header #mobile-menu a {
  border-radius: 8px;
  padding-left: 12px;
  padding-right: 12px;
  transition: background-color 160ms ease;
}

#site-header #mobile-menu a:hover,
#site-header #mobile-menu a:active {
  background-color: rgba(0, 0, 0, 0.04);
}

@keyframes hx-mobile-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #site-header #mobile-menu {
    animation: none;
  }
}

/* ============================================
   Button hover polish — applied site-wide
   Overrides bland Astro CTA hovers (which reuse
   base colors and give no visual feedback).
   ============================================ */

/* Primary filled dark CTAs */
.hero-pill-primary,
.cta-primary,
.nav-pill {
  transition:
    background-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
    color 220ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hero-pill-primary:hover,
.cta-primary:hover {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.hero-pill-primary:active,
.cta-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Ghost / secondary CTAs */
.hero-pill,
.cta-secondary {
  transition:
    background-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
    color 220ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 220ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hero-pill:hover,
.cta-secondary:hover {
  transform: translateY(-1px);
}

/* Download pill in top nav */
.nav-pill:hover {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.nav-pill:hover svg {
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .hero-pill-primary,
  .cta-primary,
  .nav-pill,
  .hero-pill,
  .cta-secondary {
    transition: none !important;
  }
  .hero-pill-primary:hover,
  .cta-primary:hover,
  .nav-pill:hover,
  .hero-pill:hover,
  .cta-secondary:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #site-header {
    transition: none;
  }
}