/* Enhanced Button Effects CSS */

/* Ripple effect for all buttons */
.btn-download::before,
.btn-details::before,
.comic-btn::before,
.btn-view-all::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
  pointer-events: none;
  z-index: 1;
}

.btn-download:active::before,
.btn-details:active::before,
.comic-btn:active::before,
.btn-view-all:active::before {
  width: 300px;
  height: 300px;
}

/* Enhanced hover effects for btn-download and btn-details */
.btn-download:hover,
.btn-details:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.8);
  text-decoration: none;
  color: white;
}

.btn-download:hover i,
.btn-details:hover i {
  transform: scale(1.1) rotate(5deg);
}

/* Enhanced hover effects for comic-btn */
.comic-btn:hover,
.nav-link:hover {
  transform: translateY(-2px) rotate(-1deg);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.8);
  text-decoration: none;
  color: white;
}

/* Enhanced hover effects for btn-view-all */
.btn-view-all:hover {
  transform: translateY(-2px) rotate(3deg);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.8);
  text-decoration: none;
  color: white;
}

.btn-view-all:hover i {
  transform: scale(1.2) rotate(10deg);
}

/* Pulse animation for important buttons */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 59, 48, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
  }
}

.btn-download.pulse {
  animation: pulse 2s infinite;
}

/* Bounce animation for interactive buttons */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.btn-details.bounce {
  animation: bounce 1s;
}

/* Shake animation for error states */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

.btn-download.shake {
  animation: shake 0.5s;
}

/* Glow effect for special buttons */
.btn-details.glow {
  box-shadow: 0 0 20px rgba(0, 122, 255, 0.5);
}

.btn-download.glow {
  box-shadow: 0 0 20px rgba(255, 59, 48, 0.5);
}

/* Loading state for buttons */
.btn-loading {
  position: relative;
  color: transparent !important;
}

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid transparent;
  border-top: 2px solid #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Success state animation */
@keyframes success {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.btn-success-animation {
  animation: success 0.6s ease-in-out;
  background: linear-gradient(135deg, #34c759, #30d158) !important;
}

/* Focus states for accessibility */
.btn-download:focus,
.btn-details:focus,
.comic-btn:focus,
.btn-view-all:focus {
  outline: 3px solid rgba(0, 122, 255, 0.5);
  outline-offset: 2px;
}

/* Disabled state */
.btn-download:disabled,
.btn-details:disabled,
.comic-btn:disabled,
.btn-view-all:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: var(--comic-shadow) !important;
}

.btn-download:disabled:hover,
.btn-details:disabled:hover,
.comic-btn:disabled:hover,
.btn-view-all:disabled:hover {
  transform: none !important;
  box-shadow: var(--comic-shadow) !important;
}

/* Mobile touch effects */
@media (max-width: 768px) {
  .btn-download:active,
  .btn-details:active,
  .comic-btn:active,
  .btn-view-all:active {
    transform: scale(0.95);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn-download,
  .btn-details,
  .comic-btn,
  .btn-view-all {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .btn-download,
  .btn-details,
  .comic-btn,
  .btn-view-all {
    transition: none;
  }
  
  .btn-download::before,
  .btn-details::before,
  .comic-btn::before,
  .btn-view-all::before {
    display: none;
  }
  
  .pulse,
  .bounce,
  .shake {
    animation: none;
  }
}