/**
 * Animations and Transitions
 * New Year's Countdown Wish Board
 */

/* ================================
   Pulse Animation for Countdown
   ================================ */

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

.pulse {
  animation: pulse var(--transition-fast) ease-out;
}

/* ================================
   Fade In Animation
   ================================ */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn var(--transition-slow) ease-out;
}

/* ================================
   Slide In from Bottom
   ================================ */

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

.slide-in-bottom {
  animation: slideInFromBottom var(--transition-slow) ease-out;
}

/* ================================
   Glow Effect
   ================================ */

@keyframes glow {
  0%, 100% {
    text-shadow: 0 0 10px var(--color-accent-primary),
                 0 0 20px var(--color-accent-primary);
  }
  50% {
    text-shadow: 0 0 20px var(--color-accent-primary),
                 0 0 30px var(--color-highlight),
                 0 0 40px var(--color-highlight);
  }
}

.glow {
  animation: glow 2s ease-in-out infinite;
}

/* ================================
   Sparkle Effect
   ================================ */

@keyframes sparkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

.sparkle {
  animation: sparkle 1.5s ease-in-out infinite;
}

/* ================================
   Celebration Animation Styles
   ================================ */

/* Celebration Overlay */
.celebration-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg,
    var(--color-bg-dark) 0%,
    #1565C0 50%,
    var(--color-bg-dark) 100%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.6s ease-out;
  overflow: hidden;
}

.celebration-overlay--visible {
  opacity: 1;
}

.celebration-overlay--dismissing {
  opacity: 0;
}

/* Fireworks Container */
.celebration__fireworks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Individual Firework */
.firework {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Firework Particle Animation */
@keyframes fireworkParticle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--end-x), var(--end-y)) scale(0);
  }
}

.firework-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  animation: fireworkParticle 1.5s ease-out forwards;
  box-shadow: 0 0 4px currentColor, 0 0 8px currentColor;
}

/* Sparkles Background */
.celebration__sparkles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sparkle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--color-text-light);
  border-radius: 50%;
  animation: sparkleFloat 3s ease-in-out infinite;
  opacity: 0;
  box-shadow: 0 0 2px var(--color-accent-primary);
}

@keyframes sparkleFloat {
  0%, 100% {
    opacity: 0;
    transform: translateY(0) scale(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-20px) scale(1);
  }
}

/* Celebration Content */
.celebration__content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: var(--spacing-2xl);
  max-width: 800px;
  animation: celebrationContentEntrance 1s ease-out;
}

@keyframes celebrationContentEntrance {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(50px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.celebration__title {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 800;
  color: var(--color-accent-primary);
  margin: 0;
  animation: glow 2s ease-in-out infinite, celebrationBounce 1.5s ease-out;
  line-height: 1.2;
}

@keyframes celebrationBounce {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-10px);
  }
}

.celebration__emoji {
  display: inline-block;
  animation: spin 2s ease-in-out infinite;
  margin: 0 var(--spacing-md);
}

@keyframes spin {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-15deg);
  }
  75% {
    transform: rotate(15deg);
  }
}

.celebration__subtitle {
  font-size: clamp(1.25rem, 3vw, 2rem);
  color: var(--color-highlight);
  margin-top: var(--spacing-xl);
  animation: fadeIn 2s ease-out 0.5s backwards;
}

.celebration__hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  opacity: 0.8;
  margin-top: var(--spacing-2xl);
  animation: fadeIn 2s ease-out 1s backwards, pulse 2s ease-in-out infinite 3s;
}

/* Celebration Mode Styles (Post-Animation) */
.celebration-mode .message-card {
  border-color: var(--color-accent-primary);
}

.message-card--celebration {
  animation: cardCelebrationPop 0.6s ease-out backwards;
  box-shadow: 0 0 20px rgba(251, 192, 45, 0.3),
              var(--shadow-lg);
}

@keyframes cardCelebrationPop {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(30px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* New Year Message Styling */
.new-year-message {
  text-align: center;
  padding: var(--spacing-2xl);
  animation: fadeIn 1s ease-out;
}

.new-year-message__title {
  font-size: clamp(2rem, 6vw, 3.5rem);
  margin: 0;
  line-height: 1.3;
}

.new-year-message__subtitle {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: var(--spacing-lg);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .celebration-overlay,
  .celebration__content,
  .celebration__title,
  .celebration__emoji,
  .firework-particle,
  .sparkle,
  .message-card--celebration {
    animation: none !important;
    transition: opacity 0.3s ease-out;
  }

  .celebration__title {
    text-shadow: 0 0 10px var(--color-accent-primary);
  }
}