// ═══════════════════════════════════════════════════════════════════════════
// WP Compress — Animations & Keyframes
// ═══════════════════════════════════════════════════════════════════════════
// All @keyframes extracted verbatim from the original style.less.
// 32 animations covering: modals, loading states, pulses, fades, UI effects.
// ═══════════════════════════════════════════════════════════════════════════


// ─── Modal Animations ────────────────────────────────────────────────────

@keyframes modalEnter {
  from { opacity: 0; transform: scale(0.95) translateY(16px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes modalSlideDown {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(16px); }
}

@keyframes backdropFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes wpcModalFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}


// ─── Fade & Slide Animations ─────────────────────────────────────────────

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOutDown {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(20px); }
}

@keyframes wpcSmoothSlideUp {
  0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes stepFadeIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

// Materialization — Linear-grade entrance
@keyframes wpcMaterialize {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes celebrateSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}


// ─── Pop & Scale Effects ─────────────────────────────────────────────────

@keyframes popEffect {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes badgePop {
  0% { opacity: 0; transform: scale(0.7); }
  60% { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes popupErrorFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}


// ─── Pulse Animations ────────────────────────────────────────────────────

@keyframes bluePulse {
  0% { box-shadow: 0 0 0 0 var(--wpc-brand-shadow, rgba(92, 177, 255, 0.6)); }
  70% { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes greenPulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  70% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@keyframes monitoringPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
  50% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.08); }
}

@keyframes monitorHeartbeat {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes pulse-border {
  0% { transform: scale(1); box-shadow: 0 0 0 3px rgba(61, 161, 230, 0.15); }
  50% { transform: scale(1); box-shadow: 0 0 0 4px rgba(61, 161, 230, 0.35); }
  100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(61, 161, 230, 0.15); }
}


// ─── Dot Pulse (three-dot loading indicator) ─────────────────────────────

@keyframes dotPulseBefore {
  0% { box-shadow: 9984px 0 0 -5px var(--wpc-brand-primary-light, @color-primary); }
  30% { box-shadow: 9984px 0 0 2px var(--wpc-brand-primary-light, @color-primary); }
  60%, 100% { box-shadow: 9984px 0 0 -5px var(--wpc-brand-primary-light, @color-primary); }
}

@keyframes dotPulse {
  0% { box-shadow: 9999px 0 0 -5px var(--wpc-brand-primary-light, @color-primary); }
  30% { box-shadow: 9999px 0 0 2px var(--wpc-brand-primary-light, @color-primary); }
  60%, 100% { box-shadow: 9999px 0 0 -5px var(--wpc-brand-primary-light, @color-primary); }
}

@keyframes dotPulseAfter {
  0% { box-shadow: 10014px 0 0 -5px var(--wpc-brand-primary-light, @color-primary); }
  30% { box-shadow: 10014px 0 0 2px var(--wpc-brand-primary-light, @color-primary); }
  60%, 100% { box-shadow: 10014px 0 0 -5px var(--wpc-brand-primary-light, @color-primary); }
}


// ─── Checkbox Animation ──────────────────────────────────────────────────

@keyframes shrink-bounce {
  0% { transform: scale(1); }
  33% { transform: scale(.85); }
  100% { transform: scale(1); }
}

@keyframes checkbox-check {
  0% { width: 0; height: 0; border-color: white; transform: translate3d(0, 0, 0) rotate(45deg); }
  33% { width: 4px; height: 0; transform: translate3d(0, 0, 0) rotate(45deg); }
  100% { width: 4px; height: 8px; border-color: white; transform: translate3d(0, -.4em, 0) rotate(45deg); }
}


// ─── Loading Spinners & Loaders ──────────────────────────────────────────

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

@keyframes lds-ring {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes scaleUpwpcLoader {
  0% { transform: translate(-50%, -50%) scale(0); }
  60%, 100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes pulsewpcLoader {
  0%, 60%, 100% { transform: scale(1); }
  80% { transform: scale(1.2); }
}

@keyframes shimmer {
  0% { opacity: 0.5; transform: translateX(-100%); }
  50% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0.5; transform: translateX(100%); }
}


// ─── Dashboard & Stats ───────────────────────────────────────────────────

@keyframes ringReveal {
  from { stroke-dashoffset: 251; } // 2 * PI * 40 ≈ 251
  to { stroke-dashoffset: 0; }
}

// V2 circle fill — starts empty, ends at inline stroke-dashoffset value
// Circumference = 2 * PI * 21 ≈ 131.95
@keyframes v2RingFill {
  from { stroke-dashoffset: 131.95; }
}

@keyframes barGrow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

