/* ============================================================
   NARGO — small hand-written CSS
   Everything Tailwind utilities can express lives in index.html
   class attributes. This file only holds things Tailwind can't
   do as a one-off utility: keyframes, scroll-reveal state, and
   a couple of transition-heavy widgets (FAQ, price pulse).
   ============================================================ */

html {
  scroll-behavior: smooth;
}

/* The off-canvas mobile menu is translated out of view with
   translateX(100%), but a translated fixed element can still
   register in the page's horizontal scroll extent — clipping it
   at the html/body level keeps the closed menu from ever causing
   a sideways scroll/blank strip on phones. */
html,
body {
  overflow-x: hidden;
}

/* Scroll-reveal: elements start hidden/offset, JS (IntersectionObserver
   in js/main.js) adds .reveal-visible when they enter the viewport. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-visible {
  opacity: 1;
  transform: none;
}

/* Sticky navbar shrink-on-scroll */
#mainNav {
  transition: padding 0.25s ease, box-shadow 0.25s ease;
}
#mainNav.nav-scrolled {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  box-shadow: 0 8px 24px rgba(13, 44, 78, 0.08);
}

/* Mobile menu slide-in panel */
#mobileMenu {
  transition: transform 0.3s ease;
}

/* Price pulse — brief emphasis when the configurator total changes */
@keyframes price-pulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.price-pulse {
  animation: price-pulse 0.4s ease;
}

/* FAQ accordion */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq-icon {
  transition: transform 0.25s ease;
  display: inline-block;
}

/* Floating WhatsApp button pulse ring */
@keyframes wa-ring {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}
.wa-pulse-ring {
  animation: wa-ring 1.8s ease-out infinite;
}

/* Product/gallery card hover lift */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(13, 44, 78, 0.12);
}

/* Card CTA buttons — shimmer sweep so they read as tappable */
@keyframes btn-shimmer {
  0%, 55% { transform: translateX(-120%) skewX(-20deg); }
  100% { transform: translateX(260%) skewX(-20deg); }
}
.card-btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.card-btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: btn-shimmer 2.8s ease-in-out infinite;
  pointer-events: none;
}
.card-btn:hover { transform: translateY(-2px) scale(1.03); }
.card-btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .card-btn, .card-btn::after { animation: none; }
}

/* Shine colour for white (outline) buttons, where a white shine is invisible */
#catalogueBtn::after {
  background: linear-gradient(90deg, transparent, rgba(46, 125, 50, 0.25), transparent);
}