Animated Countdown Timer

.countdown-container {
  background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
  padding: 40px 20px;
  border-radius: 20px;
  max-width: 700px;
  margin: 0 auto;
}

.countdown-demo {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 30px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.countdown-header {
  text-align: center;
  margin-bottom: 30px;
}

.countdown-header h2 {
  margin: 0;
  color: white;
  font-size: 2rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.countdown-timer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 25px;
}

.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown-value {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  font-size: 2rem;
  font-weight: 700;
  color: white;
  margin-bottom: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.countdown-value.pulse {
  animation: pulse 0.5s ease;
}

.countdown-label {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.countdown-separator {
  font-size: 2rem;
  color: white;
  font-weight: 300;
}

.countdown-message {
  text-align: center;
  color: white;
  font-size: 1.2rem;
  font-weight: 500;
  min-height: 30px;
}

/* Animations */
@keyframes pulse {
  0% {
    transform: scale(1);
    background: rgba(255, 255, 255, 0.2);
  }
  50% {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.4);
  }
  100% {
    transform: scale(1);
    background: rgba(255, 255, 255, 0.2);
  }
}

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

.countdown-item {
  animation: fadeIn 0.6s ease-out;
}

.countdown-item:nth-child(1) { animation-delay: 0.1s; }
.countdown-item:nth-child(3) { animation-delay: 0.2s; }
.countdown-item:nth-child(5) { animation-delay: 0.3s; }
.countdown-item:nth-child(7) { animation-delay: 0.4s; }

/* Responsive */
@media (max-width: 768px) {
  .countdown-container {
    padding: 30px 15px;
  }
  
  .countdown-demo {
    padding: 20px;
  }
  
  .countdown-header h2 {
    font-size: 1.7rem;
  }
  
  .countdown-value {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
  
  .countdown-separator {
    font-size: 1.5rem;
  }
  
  .countdown-timer {
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .countdown-value {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
  
  .countdown-separator {
    font-size: 1.2rem;
  }
  
  .countdown-label {
    font-size: 0.7rem;
  }
}

document.addEventListener('DOMContentLoaded', function() {
  // Get DOM elements
  const daysElement = document.getElementById('days');
  const hoursElement = document.getElementById('hours');
  const minutesElement = document.getElementById('minutes');
  const secondsElement = document.getElementById('seconds');
  const messageElement = document.getElementById('countdownMessage');
  
  // Set countdown target date (7 days from now)
  const targetDate = new Date();
  targetDate.setDate(targetDate.getDate() + 7);
  
  // Update countdown function
  function updateCountdown() {
    const now = new Date();
    const difference = targetDate - now;
    
    // If countdown is finished
    if (difference <= 0) {
      messageElement.textContent = "Offer has ended!";
      clearInterval(countdownInterval);
      return;
    }
    
    // Calculate time units
    const days = Math.floor(difference / (1000 * 60 * 60 * 24));
    const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((difference % (1000 * 60)) / 1000);
    
    // Update DOM elements with animation
    updateElement(daysElement, days);
    updateElement(hoursElement, hours);
    updateElement(minutesElement, minutes);
    updateElement(secondsElement, seconds);
    
    // Update message
    const totalHours = Math.floor(difference / (1000 * 60 * 60));
    if (totalHours < 24) {
      messageElement.textContent = "Hurry! Less than 24 hours left!";
    } else {
      messageElement.textContent = `Only ${days} days left for this special offer!`;
    }
  }
  
  // Update element with animation
  function updateElement(element, value) {
    const formattedValue = value.toString().padStart(2, '0');
    if (element.textContent !== formattedValue) {
      element.classList.add('pulse');
      setTimeout(() => {
        element.textContent = formattedValue;
        element.classList.remove('pulse');
      }, 250);
    }
  }
  
  // Initial update
  updateCountdown();
  
  // Update countdown every second
  const countdownInterval = setInterval(updateCountdown, 1000);
});