// ============================================================
// Glitch Effect - Chromatic aberration and distortion
// ============================================================

@layer components {
  // Glitch Heading - Text with animated chromatic aberration
  .cyber-heading {
    position: relative;
    display: inline-block;
    color: var(--cyber-cyan-500);
    text-shadow:
      0 0 10px var(--cyber-cyan-500),
      0 0 20px color-mix(in srgb, var(--cyber-cyan-500) 60%, transparent);

    &::before,
    &::after {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 80%;
      will-change: transform, clip-path;
    }

    &::before {
      z-index: -1;
      color: var(--cyber-magenta-500);
      animation: glitch-1 8s infinite linear alternate-reverse;
    }

    &::after {
      z-index: -1;
      color: var(--cyber-cyan-300);
      animation: glitch-2 6s infinite linear alternate;
    }
  }

  @keyframes glitch-1 {
    0%,
    100% {
      transform: translate(-2px, 0);
      clip-path: inset(0 0 95% 0);
    }

    10% {
      transform: translate(2px, 0);
      clip-path: inset(30% 0 40% 0);
    }

    20% {
      transform: translate(-1px, 0);
      clip-path: inset(70% 0 10% 0);
    }

    30% {
      transform: translate(1px, 0);
      clip-path: inset(10% 0 60% 0);
    }

    40% {
      transform: translate(-2px, 0);
      clip-path: inset(80% 0 5% 0);
    }

    50% {
      transform: translate(2px, 0);
      clip-path: inset(20% 0 55% 0);
    }

    60% {
      transform: translate(-1px, 0);
      clip-path: inset(50% 0 30% 0);
    }

    70% {
      transform: translate(1px, 0);
      clip-path: inset(5% 0 85% 0);
    }

    80% {
      transform: translate(-2px, 0);
      clip-path: inset(45% 0 35% 0);
    }

    90% {
      transform: translate(2px, 0);
      clip-path: inset(85% 0 5% 0);
    }
  }

  @keyframes glitch-2 {
    0%,
    100% {
      transform: translate(2px, 0);
      clip-path: inset(95% 0 0 0);
    }

    10% {
      transform: translate(-2px, 0);
      clip-path: inset(40% 0 30% 0);
    }

    20% {
      transform: translate(1px, 0);
      clip-path: inset(10% 0 70% 0);
    }

    30% {
      transform: translate(-1px, 0);
      clip-path: inset(60% 0 10% 0);
    }

    40% {
      transform: translate(2px, 0);
      clip-path: inset(5% 0 80% 0);
    }

    50% {
      transform: translate(-2px, 0);
      clip-path: inset(55% 0 20% 0);
    }

    60% {
      transform: translate(1px, 0);
      clip-path: inset(30% 0 50% 0);
    }

    70% {
      transform: translate(-1px, 0);
      clip-path: inset(85% 0 5% 0);
    }

    80% {
      transform: translate(2px, 0);
      clip-path: inset(35% 0 45% 0);
    }

    90% {
      transform: translate(-2px, 0);
      clip-path: inset(5% 0 85% 0);
    }
  }

  // Respect reduced motion preference for cyber-heading
  @media (prefers-reduced-motion: reduce) {
    .cyber-heading {
      &::before,
      &::after {
        opacity: 0%;
        transform: none;
        animation: none;
        clip-path: none;
      }
    }
  }

  .cyber-glitch {
    --glitch-color-1: var(--cyber-cyan-500, #00f0ff);
    --glitch-color-2: var(--cyber-magenta-500, #ff2a6d);
    --glitch-offset: 2px;
    --glitch-duration: 3s;

    position: relative;

    // Chromatic aberration layers
    &::before,
    &::after {
      content: attr(data-text);
      position: absolute;
      overflow: hidden;
      color: inherit;
      background: inherit;
      pointer-events: none;
      inset: 0;
      will-change: transform, clip-path;
    }

    // Cyan channel offset
    &::before {
      color: var(--glitch-color-1);
      animation: cyber-glitch-1 var(--glitch-duration) infinite linear alternate-reverse;
      clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
      mix-blend-mode: screen;
    }

    // Magenta channel offset
    &::after {
      color: var(--glitch-color-2);
      animation: cyber-glitch-2 var(--glitch-duration) infinite linear alternate-reverse;
      clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
      mix-blend-mode: screen;
    }

    // Intense glitch variant
    &--intense {
      --glitch-offset: 4px;
      --glitch-duration: 1.5s;

      &::before {
        animation: cyber-glitch-intense-1 var(--glitch-duration) infinite;
      }

      &::after {
        animation: cyber-glitch-intense-2 var(--glitch-duration) infinite;
      }
    }

    // Hover-only glitch
    &--hover {
      &::before,
      &::after {
        opacity: 0%;
        animation: none;
      }

      &:hover::before,
      &:hover::after {
        opacity: 100%;
      }

      &:hover::before {
        animation: cyber-glitch-1 0.3s infinite linear alternate-reverse;
      }

      &:hover::after {
        animation: cyber-glitch-2 0.3s infinite linear alternate-reverse;
      }
    }

    // Subtle glitch for continuous use
    &--subtle {
      --glitch-offset: 1px;

      &::before,
      &::after {
        opacity: 70%;
      }
    }
  }

  // Standard glitch animations
  @keyframes cyber-glitch-1 {
    0%,
    100% {
      transform: translate(0);
      clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    }

    20% {
      transform: translate(calc(var(--glitch-offset) * -1), 0);
      clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%);
    }

    40% {
      transform: translate(var(--glitch-offset), 0);
      clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
    }

    60% {
      transform: translate(calc(var(--glitch-offset) * -0.5), 0);
      clip-path: polygon(0 35%, 100% 35%, 100% 50%, 0 50%);
    }

    80% {
      transform: translate(var(--glitch-offset), 0);
      clip-path: polygon(0 0, 100% 0, 100% 10%, 0 10%);
    }
  }

  @keyframes cyber-glitch-2 {
    0%,
    100% {
      transform: translate(0);
      clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    }

    20% {
      transform: translate(var(--glitch-offset), 0);
      clip-path: polygon(0 70%, 100% 70%, 100% 85%, 0 85%);
    }

    40% {
      transform: translate(calc(var(--glitch-offset) * -1), 0);
      clip-path: polygon(0 80%, 100% 80%, 100% 95%, 0 95%);
    }

    60% {
      transform: translate(calc(var(--glitch-offset) * 0.5), 0);
      clip-path: polygon(0 60%, 100% 60%, 100% 75%, 0 75%);
    }

    80% {
      transform: translate(calc(var(--glitch-offset) * -1), 0);
      clip-path: polygon(0 90%, 100% 90%, 100% 100%, 0 100%);
    }
  }

  // Intense glitch with more aggressive distortion
  @keyframes cyber-glitch-intense-1 {
    0% {
      transform: translate(0);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    5% {
      transform: translate(var(--glitch-offset), calc(var(--glitch-offset) * -1));
      clip-path: polygon(0 5%, 100% 5%, 100% 10%, 0 10%);
    }

    10% {
      transform: translate(calc(var(--glitch-offset) * -2), 0);
      clip-path: polygon(0 20%, 100% 20%, 100% 25%, 0 25%);
    }

    15% {
      transform: translate(0);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    50% {
      transform: translate(calc(var(--glitch-offset) * -1), var(--glitch-offset));
      clip-path: polygon(0 40%, 100% 40%, 100% 50%, 0 50%);
    }

    55% {
      transform: translate(var(--glitch-offset), 0);
      clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);
    }

    60%,
    100% {
      transform: translate(0);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
  }

  @keyframes cyber-glitch-intense-2 {
    0% {
      transform: translate(0);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    7% {
      transform: translate(calc(var(--glitch-offset) * -1), var(--glitch-offset));
      clip-path: polygon(0 75%, 100% 75%, 100% 80%, 0 80%);
    }

    12% {
      transform: translate(var(--glitch-offset), 0);
      clip-path: polygon(0 85%, 100% 85%, 100% 95%, 0 95%);
    }

    17% {
      transform: translate(0);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    45% {
      transform: translate(var(--glitch-offset), calc(var(--glitch-offset) * -1));
      clip-path: polygon(0 30%, 100% 30%, 100% 35%, 0 35%);
    }

    52% {
      transform: translate(calc(var(--glitch-offset) * -2), 0);
      clip-path: polygon(0 15%, 100% 15%, 100% 25%, 0 25%);
    }

    58%,
    100% {
      transform: translate(0);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
  }

  // Respect reduced motion preference
  @media (prefers-reduced-motion: reduce) {
    .cyber-glitch {
      &::before,
      &::after {
        opacity: 0%;
        transform: none;
        animation: none;
        clip-path: none;
      }
    }
  }
}