/* css/transitions.css - Animations and Design Spells */

/* Base View Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.view-transition-enter {
  animation: fadeIn var(--transition-normal) forwards;
}

.view-transition-leave {
  animation: fadeOut var(--transition-fast) forwards;
}

/* Breathing Glow (for Timers) */
@keyframes breathingGlow {
  0% { box-shadow: 0 0 10px var(--accent-glow); }
  50% { box-shadow: 0 0 25px var(--accent-glow); }
  100% { box-shadow: 0 0 10px var(--accent-glow); }
}

.timer-circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 4px solid var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 300;
  margin: var(--space-xl) auto;
  animation: breathingGlow 4s infinite ease-in-out;
  color: var(--accent-primary);
}

/* Drop of Grace Animation (for Calendar completion) */
@keyframes dropOfGrace {
  0% { transform: scale(0.5); opacity: 0; background-color: var(--inactive-color); }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; background-color: var(--success-color); }
}

.calendar-day.animate-complete {
  animation: dropOfGrace 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Success Sparkle for Session End */
@keyframes sparkleWave {
  0% { transform: scale(0.9); opacity: 0; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.success-container {
  animation: sparkleWave 0.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

/* Loading Shimmer */
@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--bg-surface) 25%, var(--border-subtle) 50%, var(--bg-surface) 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
  border-radius: var(--radius-sm);
}