/**
 * @file glitch.css
 * Efecto de firma interactiva "Bad Signal" y Micro-UI
 * SDD: docs/06-interactions.md, docs/04-design-system.md
 */

/* =========================================
   BAD SIGNAL CONTAINER & LAYERS
   ========================================= */
.bad-signal {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Capas CSS antiguas reemplazadas por el motor WebGL nativo de DigitalNoiseCanvas */
.bad-signal__scanlines,
.bad-signal__overlay,
.bad-signal__blocks {
  display: none !important;
}

/* =========================================
   MICRO-UI SIGNAL BADGE
   Variantes: SIGNAL BAD, SIGNAL // 03%, SIGNAL LOST
   ========================================= */
.bad-signal__badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.3rem 0.75rem;
  background: rgba(10, 15, 44, 0.85);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-cyan);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 5;
  backdrop-filter: blur(8px);
  opacity: 0.85;
  transition: opacity var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.bad-signal__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-cyan);
  box-shadow: 0 0 6px var(--color-cyan);
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* =========================================
   ACTIVE GLITCH STATES (120–250ms burst)
   ========================================= */


.bad-signal--glitching .bad-signal__badge {
  border-color: #FF0055;
  color: #FF0055;
  background: rgba(40, 10, 20, 0.9);
  box-shadow: 0 0 15px rgba(255, 0, 85, 0.4);
  animation: badge-flicker 220ms steps(2) infinite;
}

.bad-signal--glitching .bad-signal__badge-dot {
  background-color: #FF0055;
  box-shadow: 0 0 8px #FF0055;
}

/* =========================================
   KEYFRAME ANIMATIONS
   ========================================= */
@keyframes glitch-anim {
  0% {
    transform: translate(0, 0) scale(1);
    filter: none;
  }
  20% {
    transform: translate(-3px, 2px) scale(1.02);
    filter: drop-shadow(2px 0 0 #00E5FF) drop-shadow(-2px 0 0 #FF0055);
    clip-path: inset(10% 0 35% 0);
  }
  40% {
    transform: translate(4px, -1px) scale(1.01);
    filter: drop-shadow(-3px 0 0 #7B2FF7) drop-shadow(3px 0 0 #00E5FF);
    clip-path: inset(45% 0 15% 0);
  }
  60% {
    transform: translate(-2px, 3px) scale(1.03);
    filter: drop-shadow(3px 0 0 #0066FF) drop-shadow(-3px 0 0 #FF0055);
    clip-path: inset(25% 0 55% 0);
  }
  80% {
    transform: translate(2px, -2px) scale(1.01);
    filter: drop-shadow(1px 0 0 #00E5FF) drop-shadow(-1px 0 0 #7B2FF7);
    clip-path: inset(5% 0 75% 0);
  }
  100% {
    transform: translate(0, 0) scale(1);
    filter: none;
    clip-path: none;
  }
}

@keyframes scanlines-roll {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
}

@keyframes glitch-blocks {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-10px, 5px); }
  66% { transform: translate(10px, -8px); }
  100% { transform: translate(0, 0); }
}

@keyframes badge-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* =========================================
   ACCESSIBLE REDUCED MOTION
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  .bad-signal--glitching .services__img {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }

  .bad-signal--glitching .bad-signal__scanlines,
  .bad-signal--glitching .bad-signal__blocks {
    display: none !important;
  }

  .bad-signal--glitching .bad-signal__overlay {
    opacity: 0.2;
    transition: opacity 200ms ease;
  }
}