/* Ultra-Advanced Selection - Cross Browser & Responsive */
/* Base selection styling with enhanced gradient animation */
::selection {
  background: linear-gradient(120deg, 
    #ff6ec4 0%, 
    #ff8fd8 25%, 
    #7873f5 50%, 
    #42e695 75%, 
    #2afadf 100%);
  color: #fff;
  text-shadow: 
    0 0 8px rgba(255, 255, 255, 0.9),
    0 0 12px rgba(255, 110, 196, 0.7),
    0 0 18px rgba(120, 115, 245, 0.5);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: selectionGradient 4s ease infinite alternate;
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  cursor: pointer;
}

/* Firefox support */
::-moz-selection {
  background: linear-gradient(120deg, 
    #ff6ec4 0%, 
    #ff8fd8 25%, 
    #7873f5 50%, 
    #42e695 75%, 
    #2afadf 100%);
  color: #fff;
  text-shadow: 
    0 0 8px rgba(255, 255, 255, 0.9),
    0 0 12px rgba(255, 110, 196, 0.7),
    0 0 18px rgba(120, 115, 245, 0.5);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: selectionGradient 4s ease infinite alternate;
  background-size: 300% 300%;
}

/* Safari and older WebKit support */
::-webkit-selection {
  background: linear-gradient(120deg, 
    #ff6ec4 0%, 
    #ff8fd8 25%, 
    #7873f5 50%, 
    #42e695 75%, 
    #2afadf 100%);
  color: #fff;
  text-shadow: 
    0 0 8px rgba(255, 255, 255, 0.9),
    0 0 12px rgba(255, 110, 196, 0.7),
    0 0 18px rgba(120, 115, 245, 0.5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300% 300%;
}

/* Opera support */
::-o-selection {
  background: linear-gradient(120deg, 
    #ff6ec4 0%, 
    #ff8fd8 25%, 
    #7873f5 50%, 
    #42e695 75%, 
    #2afadf 100%);
  color: #fff;
  text-shadow: 
    0 0 8px rgba(255, 255, 255, 0.9),
    0 0 12px rgba(255, 110, 196, 0.7),
    0 0 18px rgba(120, 115, 245, 0.5);
  background-size: 300% 300%;
}

/* Microsoft Edge support */
::-ms-selection {
  background: linear-gradient(120deg, 
    #ff6ec4 0%, 
    #ff8fd8 25%, 
    #7873f5 50%, 
    #42e695 75%, 
    #2afadf 100%);
  color: #fff;
  text-shadow: 
    0 0 8px rgba(255, 255, 255, 0.9),
    0 0 12px rgba(255, 110, 196, 0.7),
    0 0 18px rgba(120, 115, 245, 0.5);
  background-size: 300% 300%;
}

/* Animated gradient for selection */
@keyframes selectionGradient {
  0% { 
    background-position: 0% 50%; 
    text-shadow: 
      0 0 8px rgba(255, 255, 255, 0.9),
      0 0 12px rgba(255, 110, 196, 0.7),
      0 0 18px rgba(120, 115, 245, 0.5);
  }
  25% { 
    background-position: 50% 25%; 
    text-shadow: 
      0 0 10px rgba(255, 255, 255, 1),
      0 0 15px rgba(255, 110, 196, 0.8),
      0 0 22px rgba(120, 115, 245, 0.6),
      0 0 30px rgba(66, 230, 149, 0.4);
  }
  50% { 
    background-position: 100% 50%; 
    text-shadow: 
      0 0 12px rgba(255, 255, 255, 1),
      0 0 18px rgba(120, 115, 245, 0.9),
      0 0 25px rgba(66, 230, 149, 0.7),
      0 0 35px rgba(42, 250, 223, 0.5);
  }
  75% { 
    background-position: 50% 75%; 
    text-shadow: 
      0 0 10px rgba(255, 255, 255, 1),
      0 0 15px rgba(66, 230, 149, 0.8),
      0 0 22px rgba(42, 250, 223, 0.6),
      0 0 30px rgba(255, 110, 196, 0.4);
  }
  100% { 
    background-position: 0% 50%; 
    text-shadow: 
      0 0 8px rgba(255, 255, 255, 0.9),
      0 0 12px rgba(255, 110, 196, 0.7),
      0 0 18px rgba(120, 115, 245, 0.5);
  }
}

/* Enhanced mobile and touch device experience */
@media (hover: hover) and (pointer: fine) {
  /* Smooth hover effects for desktop */
  ::selection:hover, ::-moz-selection:hover {
    filter: brightness(1.2);
    transform: scale(1.01);
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  ::selection, ::-moz-selection, ::-webkit-selection, ::-o-selection, ::-ms-selection {
    animation: none;
    transition: none;
    background: linear-gradient(120deg, #ff6ec4, #7873f5, #42e695);
    background-size: 100% 100%;
  }
}

/* Dark mode optimization */
@media (prefers-color-scheme: dark) {
  ::selection, ::-moz-selection, ::-webkit-selection, ::-o-selection, ::-ms-selection {
    color: #000;
    text-shadow: 
      0 0 10px rgba(255, 255, 255, 1),
      0 0 15px rgba(255, 110, 196, 0.9),
      0 0 20px rgba(120, 115, 245, 0.7);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  ::selection, ::-moz-selection, ::-webkit-selection, ::-o-selection, ::-ms-selection {
    background: linear-gradient(120deg, #ff0066, #6600ff, #00cc66);
    text-shadow: 0 0 3px #000;
  }
}

/* Performance optimization for mobile */
@media (max-width: 768px) {
  ::selection, ::-moz-selection, ::-webkit-selection, ::-o-selection, ::-ms-selection {
    animation-duration: 3s;
    background-size: 200% 200%;
    text-shadow: 
      0 0 6px rgba(255, 255, 255, 0.9),
      0 0 10px rgba(255, 110, 196, 0.7);
  }
  
  @keyframes selectionGradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }
}

/* Print styling - remove animations for print */
@media print {
  ::selection, ::-moz-selection, ::-webkit-selection, ::-o-selection, ::-ms-selection {
    background: #42e695 !important;
    color: #000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
}

/* Selection on specific elements for enhanced experience */
h1::selection, h2::selection, h3::selection,
h1::-moz-selection, h2::-moz-selection, h3::-moz-selection {
  background: linear-gradient(120deg, #ff0066, #9900ff, #00ff99);
  text-shadow: 
    0 0 12px rgba(255, 255, 255, 1),
    0 0 20px rgba(255, 0, 102, 0.8),
    0 0 30px rgba(153, 0, 255, 0.6);
}

code::selection, pre::selection,
code::-moz-selection, pre::-moz-selection {
  background: linear-gradient(120deg, #ff9900, #ff3399, #33ccff);
  font-weight: bold;
}

/* Interactive feedback */
::selection:active, ::-moz-selection:active {
  background-size: 400% 400%;
  transition-duration: 0.1s;
}

/* Ensure smooth, responsive gradient */
::selection, ::-moz-selection, ::-webkit-selection, ::-o-selection, ::-ms-selection {
  background-attachment: fixed;
  background-repeat: no-repeat;
}


