/* ===== ANIMATIONS ===== */

/* Fade In */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@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 fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Pulse */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes pulseScale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Breathing Exercise */
@keyframes breatheIn {
  from { transform: scale(0.3); opacity: 0.3; }
  to { transform: scale(1); opacity: 0.8; }
}

@keyframes breatheOut {
  from { transform: scale(1); opacity: 0.8; }
  to { transform: scale(0.3); opacity: 0.3; }
}

@keyframes breatheHold {
  from { transform: scale(1); opacity: 0.8; }
  to { transform: scale(1); opacity: 0.8; }
}

.breathing-inner.inhale {
  animation: breatheIn 4s ease-in-out forwards;
}

.breathing-inner.hold {
  animation: breatheHold 7s ease-in-out forwards;
}

.breathing-inner.exhale {
  animation: breatheOut 8s ease-in-out forwards;
}

/* Slide In */
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* Progress Ring */
@keyframes progressSpin {
  from { transform: rotate(-90deg); }
  to { transform: rotate(270deg); }
}

/* Entry Animations for Widgets */
.animate-in {
  animation: fadeInUp 0.6s ease forwards;
}

.animate-in-delay-1 {
  opacity: 0;
  animation: fadeInUp 0.6s ease 0.1s forwards;
}

.animate-in-delay-2 {
  opacity: 0;
  animation: fadeInUp 0.6s ease 0.2s forwards;
}

.animate-in-delay-3 {
  opacity: 0;
  animation: fadeInUp 0.6s ease 0.3s forwards;
}

.animate-in-delay-4 {
  opacity: 0;
  animation: fadeInUp 0.6s ease 0.4s forwards;
}

/* Shake (for errors) */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.shake {
  animation: shake 0.3s ease;
}

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

/* Background Transition */
.bg-transition {
  transition: opacity 1.5s ease;
}

/* 3D Ken Burns - slow cinematic zoom from center with drift */
@keyframes kenBurnsZoom {
  0% {
    transform: scale(1.02) translate3d(
      var(--parallax-x, 0px),
      var(--parallax-y, 0px),
      0
    );
  }
  20% {
    transform: scale(1.07) translate3d(
      calc(-10px + var(--parallax-x, 0px)),
      calc(-5px + var(--parallax-y, 0px)),
      0
    );
  }
  40% {
    transform: scale(1.12) translate3d(
      calc(5px + var(--parallax-x, 0px)),
      calc(8px + var(--parallax-y, 0px)),
      0
    );
  }
  60% {
    transform: scale(1.09) translate3d(
      calc(8px + var(--parallax-x, 0px)),
      calc(-4px + var(--parallax-y, 0px)),
      0
    );
  }
  80% {
    transform: scale(1.14) translate3d(
      calc(-6px + var(--parallax-x, 0px)),
      calc(3px + var(--parallax-y, 0px)),
      0
    );
  }
  100% {
    transform: scale(1.18) translate3d(
      calc(-3px + var(--parallax-x, 0px)),
      calc(5px + var(--parallax-y, 0px)),
      0
    );
  }
}

/* Background effect modes */
.effect-kenburns {
  animation: kenburns 30s ease-in-out infinite alternate;
}

.effect-parallax {
  transition: transform 0.3s ease-out;
}

.effect-static {
  animation: none !important;
  transform: none !important;
}

/* Pomodoro ring animation */
@keyframes ringPulse {
  0%, 100% { filter: drop-shadow(0 0 4px var(--accent)); }
  50% { filter: drop-shadow(0 0 12px var(--accent)); }
}

.pomodoro-progress-bar.active {
  animation: ringPulse 2s ease infinite;
}