/* ==========================================================================
   LONG BEACH WATER HEATER SERVICES — ANIMATION & TRANSITION SYSTEM
   WCAG 2.2 AA compliant with full prefers-reduced-motion support
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scroll Reveal Base Styles
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0.15;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Fade Up (Headings, Content, Buttons) */
.reveal-fade-up {
  transform: translateY(16px);
  transition-duration: 450ms;
}

/* Fade From Left (Section Images, Side Columns) */
.reveal-fade-left {
  transform: translateX(-24px);
  transition-duration: 550ms;
}

/* Fade From Right (Section Images, Right Columns) */
.reveal-fade-right {
  transform: translateX(24px);
  transition-duration: 550ms;
}

@media (max-width: 1024px) {
  .reveal-fade-left,
  .reveal-fade-right {
    transform: translateY(16px);
  }
}

/* Zoom Subtle */
.reveal-zoom {
  transform: scale(0.96);
  transition-duration: 500ms;
}

/* Active State when in viewport */
.reveal.is-revealed {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* --------------------------------------------------------------------------
   Stagger Delays (Micro-Interaction Sequencing)
   -------------------------------------------------------------------------- */
.delay-100 {
  transition-delay: 100ms;
}

.delay-150 {
  transition-delay: 150ms;
}

.delay-180 {
  transition-delay: 180ms;
}

.delay-200 {
  transition-delay: 200ms;
}

.delay-250 {
  transition-delay: 250ms;
}

.delay-300 {
  transition-delay: 300ms;
}

.delay-350 {
  transition-delay: 350ms;
}

.delay-400 {
  transition-delay: 400ms;
}

/* --------------------------------------------------------------------------
   Hero Keyframe Entrance (Smooth & non-blocking)
   -------------------------------------------------------------------------- */
.hero-animate-eyebrow,
.hero-animate-title,
.hero-animate-desc,
.hero-animate-cta,
.hero-animate-image {
  opacity: 1;
}

/* Primary Call CTA must be 100% visible immediately without delay */
.hero-animate-cta,
.btn-primary-call,
.hero-actions {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Base keyframe animations */
@keyframes heroFadeUp {
  from {
    opacity: 0.85;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-animate-eyebrow {
  animation: heroFadeUp 350ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-animate-title {
  animation: heroFadeUp 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-animate-desc {
  animation: heroFadeUp 450ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --------------------------------------------------------------------------
   Reduced Motion Accessibility (Non-negotiable WCAG 2.2 requirement)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal-fade-up,
  .reveal-fade-left,
  .reveal-fade-right,
  .reveal-zoom {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-animate-eyebrow,
  .hero-animate-title,
  .hero-animate-desc,
  .hero-animate-cta,
  .hero-animate-image {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}