/* ============================================================
   SCROLL REVEAL & ENTRANCE ANIMATIONS
   Modern transition-based replacement for Framer Motion runtimes.
   ============================================================ */

.reveal-on-scroll {
  opacity: 0.001 !important;
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* 1. Header Navigation Bar (0.8s spring, translateY -20px) */
.reveal-nav {
  transform: translateY(-20px);
  transition: 
    opacity 800ms var(--esteem-transition-ease) 100ms, 
    transform 800ms var(--esteem-transition-ease) 100ms;
}

/* 2. Hero Contents (Title, CTA) (0.4s tween, translateY 20px) */
.reveal-hero-content {
  transform: translateY(20px);
  transition: 
    opacity 400ms cubic-bezier(.44, 0, .56, 1) 800ms, 
    transform 400ms cubic-bezier(.44, 0, .56, 1) 800ms;
}

/* 3. Hero Graphic (Spring, translateY 150px, scale 1.1) */
.reveal-hero-graphic {
  transform: translateY(150px) scale(1.1);
  transition: 
    opacity 1000ms var(--esteem-transition-ease) 100ms, 
    transform 1000ms var(--esteem-transition-ease) 100ms;
}

/* 4. Value prop cards, Calculator panel, Features, Reviews, FAQ (0.6s tween, translateY 40px) */
.reveal-fade-up {
  transform: translateY(40px);
  transition: 
    opacity 600ms cubic-bezier(.44, 0, .56, 1) 100ms, 
    transform 600ms cubic-bezier(.44, 0, .56, 1) 100ms;
}

/* 5. Reduced-motion overrides */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}