/**
 * Payment Section Animations for Crypto Ninja Trades
 * Enhanced 2025 visual effects for the payment process
 */

/* Copy Toast Notification */
#copy-toast {
    position: fixed;
    top: 24px;
    right: 24px;
    background: #375F7C;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    transform: translateY(-20px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    font-weight: 500;
    font-size: 14px;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
}

#copy-toast.translate-y-0 {
    transform: translateY(0);
    opacity: 1;
}

/* Floating animation for payment icons */
@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(5deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Glow shadows for the payment cards */
.shadow-glow-sm {
  box-shadow: 0 0 15px rgba(55, 95, 124, 0.2);
}

.shadow-glow {
  box-shadow: 0 0 25px rgba(55, 95, 124, 0.4);
}

.shadow-glow-lg {
  box-shadow: 0 0 35px rgba(55, 95, 124, 0.6);
}

/* Payment step hover effects */
.group\/step:hover .shadow-glow-sm {
  box-shadow: 0 0 20px rgba(55, 95, 124, 0.5);
}

/* Copy button animation */
.copy-button {
  position: relative;
  overflow: hidden;
}

.copy-button::after {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: rotate(45deg);
  transition: all 0.5s;
}

.copy-button:active::after {
  top: 0;
  left: 0;
  transition: 0s;
}

/* Success animation for copy */
@keyframes copySuccess {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.copy-success {
  animation: copySuccess 0.5s ease;
}

/* Payment section background animations */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Gradient backgrounds */
.bg-gradient-radial {
  background: radial-gradient(circle, var(--tw-gradient-from) 0%, var(--tw-gradient-to) 70%);
}

/* Advanced animation mode enhancements */
body.animations-advanced .payment-card {
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

body.animations-advanced .payment-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2), 0 0 20px rgba(55, 95, 124, 0.3);
}

/* Payment success feedback */
.payment-success-indicator {
  position: relative;
  overflow: hidden;
}

.payment-success-indicator::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(55, 95, 124, 0.2), transparent);
  animation: successSweep 2s infinite;
}

@keyframes successSweep {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Responsive design tweaks */
@media (max-width: 768px) {
  .animate-float {
    animation: float 5s ease-in-out infinite;
    animation-duration: 4s;
  }
}