/* Animations */
@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);
    }
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes shake {
    0%, 100% {
      transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
      transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
      transform: translateX(5px);
    }
  }
  
  @keyframes slideInFromTop {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes slideInFromBottom {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes slideInFromLeft {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes slideInFromRight {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  /* Apply animations to elements */
  .fade-in {
    animation: fadeIn 0.5s ease forwards;
  }
  
  .fade-out {
    animation: fadeOut 0.5s ease forwards;
  }
  
  .pulse {
    animation: pulse 1.5s ease infinite;
  }
  
  .shake {
    animation: shake 0.5s ease;
  }
  
  .slide-in-top {
    animation: slideInFromTop 0.5s ease forwards;
  }
  
  .slide-in-bottom {
    animation: slideInFromBottom 0.5s ease forwards;
  }
  
  .slide-in-left {
    animation: slideInFromLeft 0.5s ease forwards;
  }
  
  .slide-in-right {
    animation: slideInFromRight 0.5s ease forwards;
  }
  
  /* Apply staggered animations to grid items */
  .platforms-grid .platform-card {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
  }
  
  .platforms-grid .platform-card:nth-child(1) { animation-delay: 0.1s; }
  .platforms-grid .platform-card:nth-child(2) { animation-delay: 0.15s; }
  .platforms-grid .platform-card:nth-child(3) { animation-delay: 0.2s; }
  .platforms-grid .platform-card:nth-child(4) { animation-delay: 0.25s; }
  .platforms-grid .platform-card:nth-child(5) { animation-delay: 0.3s; }
  .platforms-grid .platform-card:nth-child(6) { animation-delay: 0.35s; }
  .platforms-grid .platform-card:nth-child(7) { animation-delay: 0.4s; }
  .platforms-grid .platform-card:nth-child(8) { animation-delay: 0.45s; }
  .platforms-grid .platform-card:nth-child(9) { animation-delay: 0.5s; }
  .platforms-grid .platform-card:nth-child(10) { animation-delay: 0.55s; }
  
  /* Button animations */
  .btn-primary:hover {
    animation: pulse 1.5s ease infinite;
  }
  
  .btn-success:hover {
    animation: pulse 1.5s ease infinite;
  }
  
  /* Input animation */
  #url-input:focus {
    animation: fadeIn 0.3s ease;
  }
  
  /* Status container animations */
  .status-container.show {
    animation: slideInFromTop 0.5s ease forwards;
  }
  
  /* Loading animation */
  .loading-overlay.show .loader {
    animation: fadeIn 0.5s ease;
  }
  
  /* Logo animation on page load */
  .logo-container {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards 0.2s;
  }
  
  .subtitle {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards 0.4s;
  }
  
  /* Download section animation */
  .download-section {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards 0.6s;
  }
  
  /* Platforms section animation */
  .platforms-section {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards 0.8s;
  }
  
  /* Footer animation */
  .footer {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards 1s;
  }