/* Responsive enhancements for buttons on large screens */

/* Base enhancements for large screens */
@media (min-width: 1400px) {
  /* Improved hover effects */
  .btn, 
  .btn-primary, 
  .btn--primary, 
  .btn-secondary {
    transition: transform 0.4s var(--ease), 
                box-shadow 0.4s var(--ease), 
                background-color 0.4s var(--ease),
                color 0.4s var(--ease);
    position: relative;
    overflow: hidden;
  }
  
  .btn-primary:hover, 
  .btn--primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px -5px rgba(212, 175, 55, 0.35);
  }
  
  .btn-secondary:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px -5px rgba(255, 255, 255, 0.15);
  }
  
  /* Click effect */
  .btn-primary:active, 
  .btn--primary:active,
  .btn-secondary:active {
    transform: translateY(-2px);
    transition-duration: 0.1s;
  }
  
  /* Add subtle pulsing effect to primary CTA */
  @keyframes subtle-pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.3);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(212, 175, 55, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
    }
  }
  
  .hero__actions .btn-primary {
    animation: subtle-pulse 3s infinite;
  }
}

/* Enhanced effects for larger screens */
@media (min-width: 1800px) {
  .btn-primary:hover, 
  .btn--primary:hover {
    transform: translateY(-7px) scale(1.03);
    box-shadow: 
      0 15px 25px -7px rgba(212, 175, 55, 0.4),
      0 0 15px rgba(212, 175, 55, 0.2);
  }
  
  .btn-secondary:hover {
    transform: translateY(-7px) scale(1.03);
    box-shadow: 
      0 15px 25px -7px rgba(255, 255, 255, 0.2),
      0 0 15px rgba(255, 255, 255, 0.1);
  }
  
  /* Special glow effect */
  .btn-primary::before,
  .btn--primary::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    padding: 3px;
    background: conic-gradient(from 0deg, 
                rgba(212, 175, 55, 0), 
                rgba(212, 175, 55, 0.4), 
                rgba(241, 214, 123, 0.3), 
                rgba(212, 175, 55, 0.4), 
                rgba(212, 175, 55, 0));
    -webkit-mask: linear-gradient(#000 0 0) content-box, 
                  linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, 
          linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    z-index: -1;
  }
  
  .btn-primary:hover::before,
  .btn--primary:hover::before {
    opacity: 1;
  }
}

/* Ultra fancy effects for extra large screens */
@media (min-width: 2200px) {
  /* 3D transform effects */
  .btn-primary:hover, 
  .btn--primary:hover {
    transform: translateY(-8px) scale(1.05) rotateX(5deg);
  }
  
  .btn-secondary:hover {
    transform: translateY(-8px) scale(1.05) rotateX(5deg);
  }
  
  /* Ripple effect on click */
  .btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%, -50%);
    transform-origin: 50% 50%;
  }
  
  .btn:active::after {
    animation: ripple 0.6s ease-out;
  }
  
  @keyframes ripple {
    0% {
      transform: scale(0, 0) translate(-50%, -50%);
      opacity: 0.5;
    }
    100% {
      transform: scale(20, 20) translate(-50%, -50%);
      opacity: 0;
    }
  }
  
  /* Enhanced pulse effect */
  @keyframes enhanced-pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
    }
    70% {
      box-shadow: 0 0 0 15px rgba(212, 175, 55, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
    }
  }
  
  .hero__actions .btn-primary {
    animation: enhanced-pulse 4s infinite;
  }
}

/* Ultra-wide screen improvements */
@media (min-width: 2400px) {
  /* Liquid light effect */
  .btn-primary::after,
  .btn--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      115deg, 
      transparent 10%, 
      rgba(255, 255, 255, 0.2) 20%, 
      rgba(255, 255, 255, 0.3) 30%, 
      transparent 40%
    );
    z-index: -1;
    transform: translateX(-100%) skewX(-15deg);
    transition: transform 0.8s var(--ease);
  }
  
  .btn-primary:hover::after,
  .btn--primary:hover::after {
    transform: translateX(100%) skewX(-15deg);
  }
  
  /* Secondary button effect */
  .btn-secondary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      115deg, 
      transparent 10%, 
      rgba(255, 255, 255, 0.1) 20%, 
      rgba(255, 255, 255, 0.15) 30%, 
      transparent 40%
    );
    z-index: -1;
    transform: translateX(-100%) skewX(-15deg);
    transition: transform 0.8s var(--ease);
  }
  
  .btn-secondary:hover::after {
    transform: translateX(100%) skewX(-15deg);
  }
}