/* ============================================
 * Magic Darkroom · Shared Animations
 * Keyframes used across multiple components.
 * ============================================ */

/* ---- Modal / overlay ---- */
@keyframes md-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes md-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes md-zoom-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes md-zoom-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.92); }
}

/* ---- Typewriter caret blink ---- */
@keyframes md-caret {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ---- Button loading stripes ---- */
@keyframes md-btn-stripes {
  0%   { background-position: 0 0; }
  100% { background-position: -28.28px 0; }
}

/* ---- Clock colon blink ---- */
@keyframes md-blink-colon {
  50% { opacity: 0; }
}

/* ---- Darkroom red pulse ---- */
@keyframes md-dark-pulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.12); }
}

/* ---- Toast slide ---- */
@keyframes md-toast-in {
  from { opacity: 0; transform: translateY(-16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes md-toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-12px) scale(0.96); }
}

/* ---- Spinner ---- */
@keyframes md-spin {
  to { transform: rotate(360deg); }
}

/* ---- Emoji pop (used by mascot cloud) ---- */
@keyframes md-emoji-pop {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(10deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}