/* ============================================
   Mary's Dog Grooming - Animations
   mdg-animations.css
   ============================================ */

/* Keyframes */

@keyframes mdg-fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mdg-fadeSlideDown {
  from { opacity: 0; transform: translateY(-24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mdg-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mdg-popIn {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes mdg-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-12px) rotate(2deg); }
  66% { transform: translateY(-6px) rotate(-2deg); }
}

@keyframes mdg-floatReverse {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(10px) rotate(-3deg); }
  66% { transform: translateY(5px) rotate(3deg); }
}

@keyframes mdg-pulse-soft {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.08); opacity: 0.9; }
}

@keyframes mdg-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

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

@keyframes mdg-paw-trail {
  0% { transform: translateX(-60px) rotate(-30deg); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(60px) rotate(30deg); opacity: 0; }
}

@keyframes mdg-bounce-in {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}

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

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

@keyframes mdg-draw-line {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}

@keyframes mdg-particle-drift {
  0% { transform: translateY(100vh) translateX(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-20vh) translateX(30px) rotate(360deg); opacity: 0; }
}

@keyframes mdg-hero-image-scale {
  0%, 100% { transform: scale(1.05); }
  50% { transform: scale(1); }
}

@keyframes mdg-counter-tick {
  0% { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes mdg-glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(122, 158, 126, 0.3); }
  50% { box-shadow: 0 0 40px rgba(122, 158, 126, 0.6); }
}

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

/* Floating Elements */

.mdg-floating-paw-shape {
  position: absolute;
  opacity: 0.06;
  pointer-events: none;
  font-size: 4rem;
  color: white;
  animation: mdg-float 6s ease-in-out infinite;
}

.mdg-floating-paw-shape:nth-child(2) { animation-delay: -2s; animation-duration: 7s; }
.mdg-floating-paw-shape:nth-child(3) { animation-delay: -4s; animation-duration: 5s; }
.mdg-floating-paw-shape:nth-child(4) { animation-delay: -1s; animation-duration: 8s; }

.mdg-floating-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  animation: mdg-pulse-soft 4s ease-in-out infinite;
  pointer-events: none;
}

/* Particle System */

.mdg-particles-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.mdg-particle {
  position: absolute;
  font-size: 1rem;
  animation: mdg-particle-drift linear infinite;
  opacity: 0;
}

.mdg-particle:nth-child(1)  { left: 5%;  animation-duration: 12s; animation-delay: 0s;    font-size: 0.8rem; }
.mdg-particle:nth-child(2)  { left: 15%; animation-duration: 9s;  animation-delay: -3s;   font-size: 1.2rem; }
.mdg-particle:nth-child(3)  { left: 25%; animation-duration: 14s; animation-delay: -6s;   font-size: 0.7rem; }
.mdg-particle:nth-child(4)  { left: 35%; animation-duration: 10s; animation-delay: -2s;   font-size: 1rem; }
.mdg-particle:nth-child(5)  { left: 45%; animation-duration: 13s; animation-delay: -5s;   font-size: 0.9rem; }
.mdg-particle:nth-child(6)  { left: 55%; animation-duration: 8s;  animation-delay: -1s;   font-size: 1.1rem; }
.mdg-particle:nth-child(7)  { left: 65%; animation-duration: 11s; animation-delay: -4s;   font-size: 0.75rem; }
.mdg-particle:nth-child(8)  { left: 75%; animation-duration: 15s; animation-delay: -7s;   font-size: 0.85rem; }
.mdg-particle:nth-child(9)  { left: 85%; animation-duration: 9s;  animation-delay: -2.5s; font-size: 1rem; }
.mdg-particle:nth-child(10) { left: 93%; animation-duration: 12s; animation-delay: -8s;   font-size: 0.9rem; }

/* Hero image animation */
.mdg-hero-bg-image { animation: mdg-hero-image-scale 20s ease-in-out infinite; }

/* Testimonials Slider */

.mdg-testimonial-slider-wrapper {
  overflow: hidden;
  position: relative;
}

.mdg-testimonial-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.mdg-testimonial-slide {
  min-width: 100%;
  padding: 0 1rem;
}

.mdg-slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.mdg-slider-btn {
  width: 44px;
  height: 44px;
  border: 2px solid var(--mdg-beige-dark);
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--mdg-transition);
  color: var(--mdg-text-mid);
  font-size: 1rem;
}

.mdg-slider-btn:hover {
  border-color: var(--mdg-sage);
  background: var(--mdg-sage);
  color: white;
}

.mdg-slider-dots {
  display: flex;
  gap: 0.5rem;
}

.mdg-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mdg-beige-dark);
  cursor: pointer;
  transition: all var(--mdg-transition);
}

.mdg-slider-dot.mdg-active {
  background: var(--mdg-sage);
  width: 24px;
  border-radius: 4px;
}

/* Scroll Triggered */

.mdg-stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

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

/* Loading states */
.mdg-skeleton {
  background: linear-gradient(90deg, var(--mdg-beige) 25%, var(--mdg-beige-dark) 50%, var(--mdg-beige) 75%);
  background-size: 200% auto;
  animation: mdg-shimmer 1.5s linear infinite;
  border-radius: var(--mdg-radius-sm);
}

/* Hero headline reveal */
.mdg-hero-title .mdg-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  animation: mdg-fadeSlideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.mdg-hero-title .mdg-word:nth-child(1) { animation-delay: 0.2s; }
.mdg-hero-title .mdg-word:nth-child(2) { animation-delay: 0.35s; }
.mdg-hero-title .mdg-word:nth-child(3) { animation-delay: 0.5s; }
.mdg-hero-title .mdg-word:nth-child(4) { animation-delay: 0.65s; }
.mdg-hero-title .mdg-word:nth-child(5) { animation-delay: 0.8s; }

.mdg-hero-eyebrow { animation: mdg-fadeIn 0.6s ease 0.1s forwards; opacity: 0; }
.mdg-hero-subtitle { animation: mdg-fadeSlideUp 0.8s ease 0.9s forwards; opacity: 0; }
.mdg-hero-cta-group { animation: mdg-fadeSlideUp 0.8s ease 1.1s forwards; opacity: 0; }
.mdg-hero-stats { animation: mdg-fadeSlideUp 0.8s ease 1.3s forwards; opacity: 0; }
.mdg-hero-image-col { animation: mdg-slide-in-right 0.9s ease 0.4s forwards; opacity: 0; }

/* Counter animation */
.mdg-counter-num {
  animation: mdg-fadeSlideUp 0.6s ease forwards;
  opacity: 0;
}

.mdg-counter-item.mdg-visible .mdg-counter-num { opacity: 1; }

/* Glow on hover for primary buttons */
.mdg-btn-primary:hover { animation: mdg-glow-pulse 1.5s ease infinite; }

/* Rotating decorative circle */
.mdg-deco-rotate {
  animation: mdg-rotate-bg 30s linear infinite;
  transform-origin: center;
}