/* ==============================================
   Water Main Repair CA — wm-animations.css
   ============================================== */

/* ---- Keyframes ---- */
@keyframes wm-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.4); }
}

@keyframes wm-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes wm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes wm-slide-in-left {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes wm-slide-in-right {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes wm-scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes wm-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@keyframes wm-count-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes wm-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

@keyframes wm-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes wm-bounce-in {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes wm-wave-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(44,111,173,0.4); }
  70%  { box-shadow: 0 0 0 20px rgba(44,111,173,0); }
  100% { box-shadow: 0 0 0 0 rgba(44,111,173,0); }
}

@keyframes wm-progress-fill {
  from { width: 0; }
  to   { width: var(--target-width, 100%); }
}

/* ---- Scroll Reveal Classes ---- */
.wm-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.wm-reveal.wm-visible {
  opacity: 1;
  transform: translateY(0);
}

.wm-reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.wm-reveal-left.wm-visible {
  opacity: 1;
  transform: translateX(0);
}

.wm-reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.wm-reveal-right.wm-visible {
  opacity: 1;
  transform: translateX(0);
}

.wm-reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.wm-reveal-scale.wm-visible {
  opacity: 1;
  transform: scale(1);
}

/* ---- Staggered Children ---- */
.wm-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.wm-stagger.wm-visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.05s; }
.wm-stagger.wm-visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.12s; }
.wm-stagger.wm-visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.19s; }
.wm-stagger.wm-visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.26s; }
.wm-stagger.wm-visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.33s; }
.wm-stagger.wm-visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.40s; }

/* ---- Hero Animation ---- */
.wm-hero-animate-1 {
  animation: wm-fade-up 0.8s ease both;
  animation-delay: 0.1s;
}

.wm-hero-animate-2 {
  animation: wm-fade-up 0.8s ease both;
  animation-delay: 0.25s;
}

.wm-hero-animate-3 {
  animation: wm-fade-up 0.8s ease both;
  animation-delay: 0.4s;
}

.wm-hero-animate-4 {
  animation: wm-fade-up 0.8s ease both;
  animation-delay: 0.55s;
}

.wm-hero-animate-5 {
  animation: wm-fade-up 0.8s ease both;
  animation-delay: 0.7s;
}

.wm-hero-card-animate {
  animation: wm-slide-in-right 0.9s ease both;
  animation-delay: 0.6s;
}

/* ---- Floating elements ---- */
.wm-float-anim {
  animation: wm-float 4s ease-in-out infinite;
}

.wm-float-anim-slow {
  animation: wm-float 6s ease-in-out infinite;
}

/* ---- Loader Shimmer ---- */
.wm-shimmer {
  background: linear-gradient(90deg, var(--wm-mist) 25%, #e2e8f0 50%, var(--wm-mist) 75%);
  background-size: 400px 100%;
  animation: wm-shimmer 1.4s infinite;
}

/* ---- Number Counter ---- */
.wm-counter-animated {
  animation: wm-count-up 0.6s ease both;
}

/* ---- Pulse ring ---- */
.wm-pulse-ring {
  animation: wm-wave-pulse 2s infinite;
}

/* ---- Progress bars ---- */
.wm-progress-bar {
  height: 6px;
  background: var(--wm-border);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 12px;
}

.wm-progress-fill-anim {
  height: 100%;
  border-radius: 100px;
  width: 0;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(90deg, var(--wm-mid-blue), var(--wm-light-blue));
}

/* ---- Loading Spinner ---- */
.wm-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--wm-border);
  border-top-color: var(--wm-mid-blue);
  border-radius: 50%;
  animation: wm-spin 0.7s linear infinite;
  display: inline-block;
}

/* ---- Page transition ---- */
.wm-page-loaded .wm-page-transition {
  animation: wm-fade-in 0.4s ease both;
}

/* ---- Card hover lifts ---- */
.wm-hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wm-hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: var(--wm-shadow-lg);
}

/* ---- Nav scroll effect ---- */
.wm-nav-scrolled .wm-nav-inner {
  background: rgba(13,31,51,0.99);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* ---- Timeline connector pulse ---- */
.wm-timeline-dot.wm-t1 {
  box-shadow: 0 0 0 0 rgba(39,174,96,0.4);
  animation: wm-wave-pulse 2.5s infinite;
}

/* ---- Quiz step transition ---- */
.wm-quiz-step-anim {
  animation: wm-fade-up 0.35s ease both;
}

/* ---- Bounce check ---- */
.wm-check-bounce {
  animation: wm-bounce-in 0.5s ease both;
}

/* ---- Typewriter cursor ---- */
.wm-typewriter::after {
  content: '|';
  animation: wm-pulse 1s step-end infinite;
  color: var(--wm-light-blue);
}

/* ---- Micro-interactions ---- */
.wm-btn:active  { transform: scale(0.97); }

.wm-form-input:focus,
.wm-form-textarea:focus,
.wm-form-select:focus {
  box-shadow: 0 0 0 3px rgba(44,111,173,0.15);
}

/* ---- Reduced motion fallback ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}