/* ===== SCROLL REVEAL ===== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.animate-on-scroll[data-delay="1"] { transition-delay: 0.05s; }
.animate-on-scroll[data-delay="2"] { transition-delay: 0.1s; }
.animate-on-scroll[data-delay="3"] { transition-delay: 0.15s; }
.animate-on-scroll[data-delay="4"] { transition-delay: 0.2s; }
.animate-on-scroll[data-delay="5"] { transition-delay: 0.25s; }
.animate-on-scroll[data-delay="6"] { transition-delay: 0.3s; }
.animate-on-scroll[data-delay="7"] { transition-delay: 0.35s; }
.animate-on-scroll[data-delay="8"] { transition-delay: 0.4s; }

/* Fade in from left */
.animate-from-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-from-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade in from right */
.animate-from-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-from-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale in */
.animate-scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate-scale-in.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ===== CAROUSEL ===== */
.carousel-container {
  position: relative;
  overflow: hidden;
}
.carousel-track {
  display: flex;
  transition: transform 0.4s ease-in-out;
}

/*
 * Carousel slides: hidden by default, shown only when .is-active.
 * Uses !important + position:absolute to guarantee no whitespace from hidden slides.
 */
.carousel-slide {
  display: none !important;
  opacity: 0;
  position: absolute !important;
  width: 100%;
  top: 0;
  left: 0;
  transform: translateX(60px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.carousel-slide.is-active {
  display: block !important;
  position: relative !important;
  opacity: 1;
  transform: translateX(0);
}
.carousel-slide.exit-left {
  display: block !important;
  position: absolute !important;
  opacity: 0;
  transform: translateX(-60px);
}
.carousel-slide.exit-right {
  display: block !important;
  position: absolute !important;
  opacity: 0;
  transform: translateX(60px);
}

/* ===== ACCORDION ===== */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.accordion-content.is-open {
  opacity: 1;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Accordion chevron rotation */
.accordion-chevron {
  transition: transform 0.3s ease;
}
.accordion-trigger.is-open .accordion-chevron {
  transform: rotate(180deg);
}

/* ===== MOBILE NAV ===== */
.mobile-nav-backdrop {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-drawer {
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-nav-drawer.is-open {
  transform: translateX(0);
}

/* ===== FLOATING CTA ===== */
.floating-cta {
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.floating-cta.is-visible {
  transform: translateY(0);
}

/* ===== DROPDOWN MENU ===== */
.dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.nav-item-has-children:hover .dropdown-menu,
.dropdown-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ===== URGENCY BANNER ===== */
.urgency-banner {
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
  overflow: hidden;
}
.urgency-banner.is-dismissed {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* ===== QUOTE FORM STEPS ===== */
.quote-step {
  display: none;
  opacity: 0;
  transform: translateX(40px);
}
.quote-step.is-active {
  display: block;
  animation: stepFadeIn 0.35s ease forwards;
}
.quote-step.is-exiting {
  animation: stepFadeOut 0.25s ease forwards;
}

@keyframes stepFadeIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes stepFadeOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-40px); }
}

/* ===== COUNTER ANIMATION ===== */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.counter-animated {
  animation: countUp 0.6s ease-out forwards;
}

/* ===== PULSE / FLOAT ===== */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.animate-shimmer {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* ===== NOTIFICATION POPUP ===== */
.activity-notification {
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.activity-notification.is-visible {
  transform: translateX(0);
  opacity: 1;
}

/* ===== GALLERY FILTER ===== */
.gallery-item {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.gallery-item.is-hidden {
  opacity: 0;
  transform: scale(0.9);
  position: absolute;
  pointer-events: none;
}