/**
 * Fusion Foams — Smooth Modern Animations & Micro-Interactions
 * GPU-Accelerated (transform & opacity), 60fps, Zero Reflow / Zero Layout Shift
 */

/* ==============================================================================
   1. Scroll Reveal Animations (IntersectionObserver triggered)
   ============================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal--left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal--right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal--zoom {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Active visible state */
.reveal.is-visible,
.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--zoom.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Stagger Delays for grid columns */
.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.3s !important; }
.delay-4 { transition-delay: 0.4s !important; }
.delay-5 { transition-delay: 0.5s !important; }

/* ==============================================================================
   2. Card & Image Hover Micro-Interactions
   ============================================================================== */
.product-card,
.feature-card,
.app-card,
.contact-info-card,
.contact-form-card,
.eng-highlight-card,
.why-list li,
.news-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.product-card:hover,
.feature-card:hover,
.app-card:hover,
.eng-highlight-card:hover,
.news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.12) !important;
}

/* Media Image Subtle Zoom */
.product-media,
.app-media,
.feature-img-box,
.news-image {
  overflow: hidden;
}

.product-media img,
.app-media img,
.feature-img-box img,
.news-image img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.product-card:hover .product-media img,
.app-card:hover .app-media img,
.feature-card:hover .feature-img-box img,
.news-card:hover .news-image img {
  transform: scale(1.06);
}

/* ==============================================================================
   3. Buttons & Links Smooth Hover
   ============================================================================== */
.btn-pill,
.btn-downloads,
.submit-btn,
.btn-cta-contact,
.app-btn,
.product-link {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  overflow: hidden;
}

.btn-pill:hover,
.submit-btn:hover,
.btn-cta-contact:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -4px rgba(216, 11, 50, 0.35);
}

/* ==============================================================================
   4. Smooth FAQ Accordion Transition
   ============================================================================== */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  opacity: 0;
}

.faq-item.active .faq-answer {
  max-height: 800px;
  opacity: 1;
}

.faq-icon {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

/* ==============================================================================
   5. Accessibility: Respect prefers-reduced-motion
   ============================================================================== */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--zoom {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .product-card:hover,
  .feature-card:hover,
  .app-card:hover,
  .eng-highlight-card:hover {
    transform: none !important;
  }
}