/**
 * Timer Animations
 * 타이머 전용 애니메이션 정의
 */

@layer timer.animations {
  /* Modal animations */
  @keyframes fadeInEnhanced {
    from { 
      opacity: 0;
      backdrop-filter: blur(0px);
    }
    to { 
      opacity: 1;
      backdrop-filter: blur(10px);
    }
  }
  
  @keyframes slideUpEnhanced {
    from {
      transform: translateY(30px) scale(0.95);
      opacity: 0;
    }
    to {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }
  
  @keyframes slideInRight {
    from {
      transform: translateX(100px);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  /* Timer progress animations */
  @keyframes progressGlow {
    from { 
      filter: drop-shadow(0 0 8px var(--timer-glow));
    }
    to { 
      filter: drop-shadow(0 0 16px var(--timer-glow));
    }
  }
  
  @keyframes pulseEffect {
    0%, 100% { 
      transform: scale(0.95); 
      opacity: 0.1; 
    }
    50% { 
      transform: scale(1.05); 
      opacity: 0.3; 
    }
  }
  
  /* Icon animations */
  @keyframes iconPulse {
    0%, 100% { 
      transform: scale(1); 
      opacity: 0.9;
    }
    50% { 
      transform: scale(1.1); 
      opacity: 1;
    }
  }
  
  @keyframes iconFloat {
    0%, 100% { 
      transform: translateY(0) rotate(0deg); 
    }
    50% { 
      transform: translateY(-5px) rotate(5deg); 
    }
  }
  
  /* Particle animations */
  @keyframes floatParticles {
    0%, 100% { 
      transform: translateY(0) rotate(0deg) scale(1); 
      opacity: 0.1;
    }
    33% { 
      transform: translateY(-20px) rotate(120deg) scale(1.2); 
      opacity: 0.3;
    }
    66% { 
      transform: translateY(-10px) rotate(240deg) scale(0.8); 
      opacity: 0.2;
    }
  }
  
  /* Pulse animation for indicators */
  @keyframes pulse {
    0%, 100% {
      opacity: 0.3;
      transform: scale(1);
    }
    50% {
      opacity: 0.6;
      transform: scale(1.2);
    }
  }
  
  /* Button hover animations */
  .dm-timer .timer-btn {
    transition: all var(--timer-anim-duration) var(--timer-anim-timing);
  }
  
  .dm-timer .timer-btn:hover {
    animation: buttonHover 0.15s ease-out;
  }
  
  @keyframes buttonHover {
    0% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
    100% { transform: translateY(-2px); }
  }
  
  /* Focus animations */
  .dm-timer .timer-btn:focus-visible,
  .dm-timer input:focus,
  .dm-timer textarea:focus {
    animation: focusRing 0.2s ease-out;
  }
  
  @keyframes focusRing {
    0% { 
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
    }
    100% { 
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
  }
  
  /* Loading spinner for async operations */
  .dm-timer .timer-loading {
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  /* Success/completion animation */
  .dm-timer .timer-success {
    animation: successPulse 0.6s ease-out;
  }
  
  @keyframes successPulse {
    0% { 
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    50% { 
      transform: scale(1.05);
      box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
    100% { 
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
  }
}