/* =============================================
   DIGITAL ROOT TOOLS — GLITCH EFFECT
   Orange (#FF4400) + cyan channel split
   Fires briefly every few seconds — not constant
   Works on any element, no data-text needed
   ============================================= */

.glitch,
.glitch-2,
.glitch-3 {
  position: relative;
  display: inline-block;
}

/* Variant 1 — fires at ~5s mark in a 7s cycle */
.glitch {
  animation: glitch-anim 7s infinite;
}

/* Variant 2 — offset timing so it doesn't sync with variant 1 */
.glitch-2 {
  animation: glitch-anim 7s infinite;
  animation-delay: -2.5s;
}

/* Variant 3 — slightly different rhythm */
.glitch-3 {
  animation: glitch-anim-b 9s infinite;
  animation-delay: -4s;
}

@keyframes glitch-anim {
  0%, 70%, 100% {
    transform: none;
    filter: none;
    opacity: 1;
  }

  /* First hit */
  71% {
    transform: skewX(-6deg) translateX(-5px);
    filter: drop-shadow(6px 0 #FF4400) drop-shadow(-4px 0 rgba(0, 230, 255, 0.85));
    opacity: 0.92;
  }
  72% {
    transform: skewX(5deg) translateX(6px);
    filter: drop-shadow(-6px 0 #FF4400) drop-shadow(4px 0 rgba(0, 230, 255, 0.7));
    opacity: 1;
  }
  73% {
    transform: translateX(-3px);
    filter: drop-shadow(3px 0 rgba(0, 230, 255, 0.5));
    opacity: 0.96;
  }
  74% {
    transform: none;
    filter: none;
    opacity: 1;
  }

  /* Brief pause, then second hit */
  76% {
    transform: skewX(-3deg) translateX(-4px);
    filter: drop-shadow(4px 0 #FF4400);
    opacity: 0.9;
  }
  77% {
    transform: none;
    filter: none;
    opacity: 1;
  }
}

@keyframes glitch-anim-b {
  0%, 65%, 100% {
    transform: none;
    filter: none;
    opacity: 1;
  }

  66% {
    transform: skewX(7deg) translateX(5px);
    filter: drop-shadow(-7px 0 #FF4400) drop-shadow(5px 0 rgba(0, 230, 255, 0.9));
    opacity: 0.88;
  }
  67% {
    transform: skewX(-4deg) translateX(-6px);
    filter: drop-shadow(5px 0 rgba(0, 230, 255, 0.6));
    opacity: 1;
  }
  68% {
    transform: translateX(2px);
    filter: drop-shadow(-3px 0 #FF4400);
    opacity: 0.95;
  }
  69% {
    transform: none;
    filter: none;
    opacity: 1;
  }

  72% {
    transform: skewX(2deg) translateX(3px);
    filter: drop-shadow(-4px 0 rgba(0, 230, 255, 0.5));
  }
  73% {
    transform: none;
    filter: none;
  }
}