// ============================================================
// Datastream Effect - Animated vertical data flow
// ============================================================

@layer components {
  .cyber-datastream {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      z-index: 1;
      border-radius: inherit;
      background: linear-gradient(
        180deg,
        transparent 0%,
        color-mix(in srgb, var(--cyber-cyan-500) 30%, transparent) 50%,
        transparent 100%
      );
      background-size: 100% 200%;
      animation: datastream 3s linear infinite;
      pointer-events: none;
      inset: 0;
    }
  }

  @keyframes datastream {
    0% {
      background-position: 0% 0%;
    }

    100% {
      background-position: 0% 200%;
    }
  }

  // Respect reduced motion preference
  @media (prefers-reduced-motion: reduce) {
    .cyber-datastream::before {
      animation: none;
    }
  }
}