/**
 * LAST STOP SOLUTIONS — ANIMATIONS
 * Keyframes, micro-interactions, custom animation classes
 * @version 1.0.0
 */

/* ── Fade & Slide ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-32px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* ── Looping animations ── */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); }
}
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes floatUp {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
@keyframes floatUpSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { transform: translateY(-12px); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}
@keyframes particleFloat {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.2; }
  100% { transform: translateY(-120px) rotate(720deg); opacity: 0; }
}
@keyframes stripScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes loadProgress {
  0% { width: 0%; }
  80% { width: 100%; }
  100% { width: 100%; }
}
@keyframes dotBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
  40% { transform: scale(1); opacity: 1; }
}
@keyframes whatsappPulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5), 0 0 0 0 rgba(37, 211, 102, 0.3);
  }
  50% {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5), 0 0 0 14px rgba(37, 211, 102, 0);
  }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes progressBar {
  from { width: 0%; }
}
@keyframes numberCount {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroGlow {
  0%, 100% {
    box-shadow: 0 0 40px rgba(37, 99, 235, 0.2);
  }
  50% {
    box-shadow: 0 0 80px rgba(37, 99, 235, 0.4), 0 0 40px rgba(124, 58, 237, 0.2);
  }
}
@keyframes cardHover {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-8px) scale(1.01); }
}

/* ── Animation Utility Classes ── */
.animate-fade-in { animation: fadeIn 0.6s ease forwards; }
.animate-fade-in-up { animation: fadeInUp 0.6s ease forwards; }
.animate-fade-in-left { animation: fadeInLeft 0.6s ease forwards; }
.animate-fade-in-right { animation: fadeInRight 0.6s ease forwards; }
.animate-scale-in { animation: scaleIn 0.5s ease forwards; }
.animate-float { animation: floatUp 4s ease-in-out infinite; }
.animate-float-slow { animation: floatUpSlow 6s ease-in-out infinite; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-bounce { animation: bounce 1s infinite; }

/* ── Delay helpers ── */
.d-100 { animation-delay: 100ms; }
.d-200 { animation-delay: 200ms; }
.d-300 { animation-delay: 300ms; }
.d-400 { animation-delay: 400ms; }
.d-500 { animation-delay: 500ms; }
.d-600 { animation-delay: 600ms; }
.d-700 { animation-delay: 700ms; }
.d-800 { animation-delay: 800ms; }
.d-1000 { animation-delay: 1000ms; }

/* ── Duration helpers ── */
.dur-300 { animation-duration: 300ms; }
.dur-500 { animation-duration: 500ms; }
.dur-700 { animation-duration: 700ms; }
.dur-1000 { animation-duration: 1000ms; }
.dur-1500 { animation-duration: 1500ms; }
.dur-2000 { animation-duration: 2000ms; }

/* ── Gradient text animation ── */
.gradient-text-animated {
  background: linear-gradient(270deg, #2563EB, #7C3AED, #14B8A6, #2563EB);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease-in-out infinite;
}

/* ── Shimmer loading skeleton ── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

/* ── Hover lift effect ── */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}
.hover-lift-sm:hover { transform: translateY(-3px); }

/* ── Scale on hover ── */
.hover-scale { transition: transform 0.3s ease; }
.hover-scale:hover { transform: scale(1.04); }

/* ── Icon rotate ── */
.hover-icon-rotate:hover i,
.hover-icon-rotate:hover svg {
  transform: rotate(15deg);
  transition: transform 0.3s ease;
}

/* ── Underline slide ── */
.hover-underline {
  position: relative;
  display: inline-block;
}
.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-brand);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.hover-underline:hover::after { width: 100%; }

/* ── Glow on hover ── */
.hover-glow:hover {
  box-shadow: 0 0 24px rgba(37, 99, 235, 0.3) !important;
}

/* ── Stagger reveal ── */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-stagger].revealed > * {
  opacity: 1;
  transform: none;
}
[data-stagger].revealed > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].revealed > *:nth-child(2) { transition-delay: 60ms; }
[data-stagger].revealed > *:nth-child(3) { transition-delay: 120ms; }
[data-stagger].revealed > *:nth-child(4) { transition-delay: 180ms; }
[data-stagger].revealed > *:nth-child(5) { transition-delay: 240ms; }
[data-stagger].revealed > *:nth-child(6) { transition-delay: 300ms; }

/* ── Hero orbit animation ── */
@keyframes orbitRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── Wave animation (service cards) ── */
@keyframes wave {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.btn-gradient::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.btn-gradient:hover::after {
  transform: translateX(100%);
}

/* ── Admin sidebar menu highlight ── */
@keyframes sidebarHighlight {
  from { width: 0; }
  to { width: 3px; }
}

/* ── Card reveal from bottom ── */
@keyframes slideUpCard {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Typing indicator ── */
.typing-indicator {
  display: flex; gap: 4px; align-items: center;
}
.typing-indicator span {
  width: 8px; height: 8px; background: currentColor;
  border-radius: 50%; opacity: 0.4;
  animation: dotBounce 1.4s ease-in-out infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

/* ── Notification badge pulse ── */
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.badge-pulse { animation: badgePulse 2s ease-in-out infinite; }

/* ── Reduce motion preference ── */
@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;
  }
}