/* load-animations.css */
/* Consistent fade + slide-up animations for all sections and elements */

/* ============================================
   INITIAL PAGE LOAD
   ============================================ */

/* Prevent flash of unstyled content */
body {
  opacity: 0;
  animation: fadeInBody 0.4s ease-out 0.2s forwards;
}

@keyframes fadeInBody {
  to { opacity: 1; }
}

/* Fade in images after load */
img {
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
img.loaded {
  opacity: 1;
}

/* ============================================
   UNIVERSAL SCROLL ANIMATIONS
   ============================================ */

/* Hidden state */
.scroll-animate,
.hero-section,
.logo-section,
.video-features-section,
.how-it-works-section,
#portfolio,
.testimonials-section,
.faq-section,
.contact-section,
footer {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Visible state */
.scroll-animate.visible,
.hero-section.visible,
.logo-section.visible,
.video-features-section.visible,
.how-it-works-section.visible,
#portfolio.visible,
.testimonials-section.visible,
.faq-section.visible,
.contact-section.visible,
footer.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   STAGGERED CHILDREN (optional)
   ============================================ */

.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger-children.visible > * {
  opacity: 1;
  transform: translateY(0);
}
.stagger-children.visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.15s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.2s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.25s; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.3s; }
.stagger-children.visible > *:nth-child(7) { transition-delay: 0.35s; }
.stagger-children.visible > *:nth-child(8) { transition-delay: 0.4s; }

/* ============================================
   LOADING SPINNER (optional)
   ============================================ */
.page-loading {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: white;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.3s ease-out;
}
.page-loading.hide {
  opacity: 0;
  pointer-events: none;
}
.page-loading::after {
  content: '';
  width: 40px; height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #333;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }