/* ===== NEON BORDER SYSTEM FOR FEED COMPONENTS ===== */

/* CSS Custom Properties for neon effects */
:root {
  /* Neon color - pink-white mixture */
  --neon-color: #FFB6FF;
  --neon-color-rgb: 255, 182, 255;
  
  /* Animation timing - slower for visibility */
  --neon-travel-speed: 6s;
  
  /* Border properties */
  --neon-border-width: 2px;
  --neon-glow-size: 12px;
}

/* ===== MASTER NSFW TOGGLE NEON BORDER ===== */

/* Main neon border utility class for master-nsfw-toggle */
.master-nsfw-toggle.neon-border {
  position: relative;
}

.master-nsfw-toggle.neon-border::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  z-index: 0;
  
  /* Match the toggle border radius */
  border-radius: 26px;
  border: var(--neon-border-width) solid var(--neon-color);
  
  /* Enhanced neon glow effect */
  box-shadow: 
    0 0 var(--neon-glow-size) rgba(var(--neon-color-rgb), 0.8),
    0 0 calc(var(--neon-glow-size) * 2) rgba(var(--neon-color-rgb), 0.5),
    0 0 calc(var(--neon-glow-size) * 3) rgba(var(--neon-color-rgb), 0.2),
    inset 0 0 calc(var(--neon-glow-size) / 2) rgba(var(--neon-color-rgb), 0.3);
  
  /* Breathing animation with flicker */
  animation: neonBreathing var(--neon-travel-speed) ease-in-out infinite, 
             neonFlicker 1.2s linear infinite;
  
  pointer-events: none;
  background: transparent;
}

/* Ensure the slider content is above the neon border */
.master-nsfw-toggle.neon-border .master-nsfw-slider {
  position: relative;
  z-index: 1;
  /* Remove the existing border since we're replacing it with neon */
  border: none;
}

/* ===== KEYFRAME ANIMATIONS ===== */

/* Breathing animation - subtle fade in/out */
@keyframes neonBreathing {
  0%, 100% { 
    opacity: 0.6;
    box-shadow: 
      0 0 var(--neon-glow-size) rgba(var(--neon-color-rgb), 0.5),
      0 0 calc(var(--neon-glow-size) * 2) rgba(var(--neon-color-rgb), 0.3),
      0 0 calc(var(--neon-glow-size) * 3) rgba(var(--neon-color-rgb), 0.1),
      inset 0 0 calc(var(--neon-glow-size) / 2) rgba(var(--neon-color-rgb), 0.2);
  }
  50% { 
    opacity: 1;
    box-shadow: 
      0 0 var(--neon-glow-size) rgba(var(--neon-color-rgb), 0.9),
      0 0 calc(var(--neon-glow-size) * 2) rgba(var(--neon-color-rgb), 0.6),
      0 0 calc(var(--neon-glow-size) * 3) rgba(var(--neon-color-rgb), 0.25),
      inset 0 0 calc(var(--neon-glow-size) / 2) rgba(var(--neon-color-rgb), 0.4);
  }
}

/* Fast frequent flicker effect - always stays on, just dims briefly */
@keyframes neonFlicker {
  0%, 2%, 4%, 6%, 8%, 10%, 12%, 14%, 16%, 18%, 20%, 22%, 24%, 26%, 28%, 30%, 
  32%, 34%, 36%, 38%, 40%, 42%, 44%, 46%, 48%, 50%, 52%, 54%, 56%, 58%, 60%, 
  62%, 64%, 66%, 68%, 70%, 72%, 74%, 76%, 78%, 80%, 82%, 84%, 86%, 88%, 90%, 
  92%, 94%, 96%, 98%, 100% { 
    opacity: 1; 
  }
  1%, 3%, 5%, 7%, 9%, 11%, 13%, 15%, 17%, 19%, 21%, 23%, 25%, 27%, 29%, 31%, 
  33%, 35%, 37%, 39%, 41%, 43%, 45%, 47%, 49%, 51%, 53%, 55%, 57%, 59%, 61%, 
  63%, 65%, 67%, 69%, 71%, 73%, 75%, 77%, 79%, 81%, 83%, 85%, 87%, 89%, 91%, 
  93%, 95%, 97%, 99% { 
    opacity: 0.85; 
  }
}

/* ===== ENHANCED NEON EFFECTS FOR INTERACTION STATES ===== */

/* Hover effect - intensify the glow */
.master-nsfw-toggle.neon-border:hover::before {
  box-shadow: 
    0 0 calc(var(--neon-glow-size) * 1.5) rgba(var(--neon-color-rgb), 0.9),
    0 0 calc(var(--neon-glow-size) * 3) rgba(var(--neon-color-rgb), 0.7),
    0 0 calc(var(--neon-glow-size) * 4) rgba(var(--neon-color-rgb), 0.3),
    inset 0 0 calc(var(--neon-glow-size) / 2) rgba(var(--neon-color-rgb), 0.5);
  animation-duration: calc(var(--neon-travel-speed) * 0.7);
}

/* Active/Focus effect - even more intense */
.master-nsfw-toggle.neon-border:active::before,
.master-nsfw-toggle.neon-border:focus-within::before {
  box-shadow: 
    0 0 calc(var(--neon-glow-size) * 2) rgba(var(--neon-color-rgb), 1),
    0 0 calc(var(--neon-glow-size) * 4) rgba(var(--neon-color-rgb), 0.8),
    0 0 calc(var(--neon-glow-size) * 5) rgba(var(--neon-color-rgb), 0.4),
    inset 0 0 calc(var(--neon-glow-size) / 2) rgba(var(--neon-color-rgb), 0.6);
  animation-duration: calc(var(--neon-travel-speed) * 0.5);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  :root {
    --neon-glow-size: 10px;
    --neon-travel-speed: 4s;
  }
}

@media (max-width: 480px) {
  :root {
    --neon-glow-size: 8px;
    --neon-travel-speed: 5s;
  }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  .master-nsfw-toggle.neon-border::before {
    animation: none;
    opacity: 0.8;
  }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.master-nsfw-toggle.neon-border::before {
  will-change: filter, opacity, box-shadow;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.master-nsfw-toggle.neon-border {
  will-change: transform;
  transform: translateZ(0);
}

/* ===== FALLBACK FOR OLDER BROWSERS ===== */
@supports not (box-shadow: 0 0 10px rgba(255, 182, 255, 0.8)) {
  .master-nsfw-toggle.neon-border::before {
    border: var(--neon-border-width) solid var(--neon-color);
    animation: none;
    opacity: 0.7;
  }
}