/**
 * 🎨 MOBILE ANIMATIONS & EFFECTS
 * Animations fluides et effets visuels pour mobile
 */

/* ========================================
   ✨ RIPPLE EFFECT
   ======================================== */

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: scale(0);
  animation: ripple-animation 0.6s ease-out;
  pointer-events: none;
  z-index: 10;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ========================================
   🎭 SCROLL ANIMATIONS
   ======================================== */

.card,
.service-card,
.feature,
.stat,
.professional-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.card.animate-in,
.service-card.animate-in,
.feature.animate-in,
.stat.animate-in,
.professional-card.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger animations */
.grid .card:nth-child(1) { transition-delay: 0.1s; }
.grid .card:nth-child(2) { transition-delay: 0.2s; }
.grid .card:nth-child(3) { transition-delay: 0.3s; }
.grid .card:nth-child(4) { transition-delay: 0.4s; }

/* ========================================
   📱 LOADING STATES
   ======================================== */

.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 16px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.skeleton-card {
  height: 200px;
  border-radius: 16px;
}

/* ========================================
   🎯 PULL TO REFRESH
   ======================================== */

.pull-to-refresh {
  position: fixed;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: top 0.3s ease-out;
  z-index: 9999;
}

.pull-to-refresh.active {
  top: 20px;
}

.pull-to-refresh i {
  font-size: 1.25rem;
  color: var(--primary-color);
  animation: spin 1s linear infinite;
}

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

/* ========================================
   💫 FLOATING ACTION BUTTON
   ======================================== */

.fab {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom));
  right: 20px;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.4);
  cursor: pointer;
  z-index: 999;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.fab:active {
  transform: scale(0.9);
}

.fab i {
  color: white;
  font-size: 1.5rem;
}

.fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.6);
}

/* ========================================
   🌊 WAVE ANIMATION
   ======================================== */

.wave-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  overflow: hidden;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23fff' fill-opacity='0.1'/%3E%3C/svg%3E") repeat-x;
  animation: wave-animation 10s linear infinite;
}

.wave:nth-child(2) {
  opacity: 0.5;
  animation-duration: 15s;
}

.wave:nth-child(3) {
  opacity: 0.3;
  animation-duration: 20s;
}

@keyframes wave-animation {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ========================================
   🎨 GRADIENT ANIMATIONS
   ======================================== */

.gradient-animated {
  background: linear-gradient(
    45deg,
    var(--primary-color),
    var(--secondary-color),
    var(--primary-color)
  );
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ========================================
   ⚡ PULSE ANIMATION
   ======================================== */

.pulse {
  animation: pulse-animation 2s ease-in-out infinite;
}

@keyframes pulse-animation {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

/* ========================================
   🌟 SHIMMER EFFECT
   ======================================== */

.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer-animation 2s infinite;
}

@keyframes shimmer-animation {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ========================================
   🎭 SLIDE IN ANIMATIONS
   ======================================== */

.slide-in-left {
  animation: slide-in-left 0.5s ease-out;
}

@keyframes slide-in-left {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-right {
  animation: slide-in-right 0.5s ease-out;
}

@keyframes slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-up {
  animation: slide-in-up 0.5s ease-out;
}

@keyframes slide-in-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ========================================
   🎯 FADE ANIMATIONS
   ======================================== */

.fade-in {
  animation: fade-in 0.5s ease-out;
}

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

.fade-in-scale {
  animation: fade-in-scale 0.5s ease-out;
}

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

/* ========================================
   💫 BOUNCE ANIMATION
   ======================================== */

.bounce {
  animation: bounce-animation 1s ease-in-out infinite;
}

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

/* ========================================
   🎪 FLIP CARD
   ======================================== */

.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/* ========================================
   🌈 PROGRESS BARS
   ======================================== */

.progress-bar {
  height: 4px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  border-radius: 2px;
  animation: progress-fill 1s ease-out;
}

@keyframes progress-fill {
  from { width: 0; }
}

.progress-indeterminate {
  position: relative;
  overflow: hidden;
}

.progress-indeterminate::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--primary-color));
  animation: indeterminate-progress 1.5s ease-in-out infinite;
}

@keyframes indeterminate-progress {
  0% { left: -50%; }
  100% { left: 100%; }
}

/* ========================================
   🎨 TOAST NOTIFICATIONS
   ======================================== */

.toast {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(200%);
  background: white;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: var(--z-mobile-toast);
  max-width: calc(100% - 32px);
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}

.toast-success {
  border-left: 4px solid var(--success);
}

.toast-error {
  border-left: 4px solid var(--error);
}

.toast-warning {
  border-left: 4px solid var(--warning);
}

.toast-info {
  border-left: 4px solid var(--info);
}

/* ========================================
   ⚡ UTILITY ANIMATIONS
   ======================================== */

.rotate-360 {
  animation: rotate-360 1s linear infinite;
}

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

.shake {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  10%, 30% { transform: scale(1.1); }
  20%, 40% { transform: scale(0.9); }
}

/* ========================================
   🎯 LOADING SPINNER
   ======================================== */

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(var(--primary-rgb), 0.2);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner-sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.spinner-lg {
  width: 60px;
  height: 60px;
  border-width: 6px;
}

/* ========================================
   🌊 BACKGROUND PATTERNS
   ======================================== */

.pattern-dots {
  background-image: radial-gradient(
    circle,
    rgba(var(--primary-rgb), 0.1) 1px,
    transparent 1px
  );
  background-size: 20px 20px;
}

.pattern-grid {
  background-image: 
    linear-gradient(rgba(var(--primary-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--primary-rgb), 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ========================================
   🎨 GLASSMORPHISM
   ======================================== */

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-dark {
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.1);
}