/* ==========================================================
   SERBEST DALIŞ PORTALI - ANİMASYONLAR
   ========================================================== */

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

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.3), inset 0 0 15px rgba(0, 229, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 35px rgba(0, 229, 255, 0.6), inset 0 0 25px rgba(0, 229, 255, 0.4);
  }
}

@keyframes dangerPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(244, 63, 94, 0.3);
    border-color: rgba(244, 63, 94, 0.4);
  }
  50% {
    box-shadow: 0 0 35px rgba(244, 63, 94, 0.7);
    border-color: rgba(244, 63, 94, 0.8);
  }
}

@keyframes waveFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}

@keyframes bubbleFloat {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-20vh) scale(1.2);
    opacity: 0;
  }
}

.animate-pulse-glow {
  animation: pulseGlow 3s infinite ease-in-out;
}

.animate-float {
  animation: waveFloat 6s infinite ease-in-out;
}

@keyframes breathPulseHold {
  0%, 100% {
    transform: scale(1.65);
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.6);
  }
  50% {
    transform: scale(1.68);
    box-shadow: 0 0 55px rgba(245, 158, 11, 0.85);
  }
}

/* Nefes Alma ve Verme Efekt Sınıfları */
.breath-inhale {
  transform: scale(1.65) !important;
  transition: transform ease-in-out !important;
  background: linear-gradient(135deg, #00e5ff, #38bdf8) !important;
  box-shadow: 0 0 45px rgba(0, 229, 255, 0.8) !important;
}

.breath-hold {
  transform: scale(1.65) !important;
  background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
  box-shadow: 0 0 40px rgba(245, 158, 11, 0.6) !important;
  animation: breathPulseHold 2.5s infinite ease-in-out !important;
}

.breath-exhale {
  transform: scale(1) !important;
  transition: transform ease-in-out !important;
  background: linear-gradient(135deg, #10b981, #059669) !important;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.5) !important;
}

.breath-rest {
  transform: scale(0.9) !important;
  transition: transform ease-in-out !important;
  background: linear-gradient(135deg, #64748b, #475569) !important;
  box-shadow: 0 0 20px rgba(100, 116, 139, 0.4) !important;
}