/* AZ Ventilation — shared stylesheet (plain CSS, works alongside Tailwind CDN utilities) */

html {
  scroll-behavior: smooth;
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

body {
  font-family: "Inter", system-ui, sans-serif;
  background: #ffffff;
  color: #0b1220;
}

h1, h2, h3, h4, .font-heading {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
}

/* Scroll-reveal fade-up animation (replicates the old Next.js .animate-fade-up keyframe) */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Elements tagged with [data-reveal] start hidden and fade up via JS + IntersectionObserver */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Header shrink-on-scroll state, toggled by main.js */
#site-header {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

#site-header.is-scrolled {
  border-bottom-color: #e2e8f0;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 2px rgba(15, 37, 71, 0.06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

#site-header:not(.is-scrolled) {
  border-bottom-color: transparent;
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.dark #site-header.is-scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.1);
  background-color: rgba(5, 11, 22, 0.92);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark #site-header:not(.is-scrolled) {
  border-bottom-color: transparent;
  background-color: rgba(5, 11, 22, 0.8);
}

/* Mobile menu collapse/expand */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  border-top-width: 0;
  transition: max-height 0.3s ease;
}

#mobile-menu.is-open {
  max-height: 40rem;
  border-top-width: 1px;
}

/* Services dropdown */
#services-dropdown {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

#services-dropdown.is-open {
  visibility: visible;
  opacity: 1;
}

/* Lottie containers */
.lottie-box {
  width: 100%;
  height: 100%;
}
.lottie-box svg {
  display: block;
}

/* Two-line clamp fallback for product card titles (in case the Tailwind CDN
   build in use doesn't include the line-clamp utilities) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Horizontally scrollable rows (catalog category chips) without a visible scrollbar */
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* Simple bounce for the hero scroll cue */
@keyframes bounce-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
.animate-bounce-soft {
  animation: bounce-soft 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}