/* Keyframes */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

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

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

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

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
  from { transform: translateX(-280px); }
  to { transform: translateX(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

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

@keyframes progressGrow {
  from { width: 0; }
}

/* Animation Classes */
.anim-fade-in-up {
  animation: fadeInUp 0.5s ease forwards;
  opacity: 0;
}

.anim-fade-in-down {
  animation: fadeInDown 0.5s ease forwards;
  opacity: 0;
}

.anim-fade-in-left {
  animation: fadeInLeft 0.5s ease forwards;
  opacity: 0;
}

.anim-fade-in-right {
  animation: fadeInRight 0.5s ease forwards;
  opacity: 0;
}

.anim-fade-in {
  animation: fadeIn 0.5s ease forwards;
  opacity: 0;
}

.anim-scale-in {
  animation: scaleIn 0.5s ease forwards;
  opacity: 0;
}

.anim-bounce-in {
  animation: bounceIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0;
}

.anim-slide-in-left {
  animation: slideInLeft 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.anim-progress {
  animation: progressGrow 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Delays */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }
.delay-7 { animation-delay: 0.7s; }
.delay-8 { animation-delay: 0.8s; }
.delay-9 { animation-delay: 0.9s; }

/* Hover Effects */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.hover-scale {
  transition: transform 0.2s ease;
}
.hover-scale:hover {
  transform: scale(1.02);
}
.hover-scale:active {
  transform: scale(0.98);
}

.hover-shift-right {
  transition: transform 0.2s ease;
}
.hover-shift-right:hover {
  transform: translateX(4px);
}

.hover-btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hover-btn:hover {
  transform: scale(1.01);
  box-shadow: 0 8px 24px rgba(91, 154, 107, 0.35);
}
.hover-btn:active {
  transform: scale(0.98);
}

/* Decorative blobs */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  animation: fadeIn 1.2s ease forwards;
  opacity: 0;
}

.blob-sage {
  background-color: var(--sage-light);
  opacity: 0.4;
}

.blob-terracotta {
  background-color: var(--warm-terracotta);
  opacity: 0.2;
}

/* Pulse dot for live indicator */
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: pulse 1.5s infinite;
}