/* Scanline overlay */
.scanlines::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.1) 0px,
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 9999;
  opacity: 0.08;
}

/* CRT glow effect */
.crt-glow {
  box-shadow:
    0 0 10px rgba(0, 245, 212, 0.3),
    0 0 20px rgba(0, 245, 212, 0.2),
    0 0 30px rgba(0, 245, 212, 0.1);
  transition: box-shadow var(--transition-normal);
}

.crt-glow:hover {
  box-shadow:
    0 0 15px rgba(255, 0, 110, 0.4),
    0 0 30px rgba(255, 0, 110, 0.3),
    0 0 45px rgba(255, 0, 110, 0.2);
}

/* Iridescent border gradient */
.iridescent-border {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--radius-md);
}

.iridescent-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-md) + 2px);
  background: linear-gradient(
    135deg,
    var(--iridescent-purple),
    var(--iridescent-teal),
    var(--iridescent-bronze),
    var(--iridescent-blue)
  );
  z-index: -1;
  opacity: 0.6;
  transition: opacity var(--transition-normal);
}

.iridescent-border:hover::before {
  opacity: 1;
}

/* Pixel font for headings */
.pixel-text {
  font-family: 'Press Start 2P', cursive;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Glitch text effect on hover */
.banner-text {
  position: relative;
}

.hero-banner:hover .banner-text::before,
.hero-banner:hover .banner-text::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
}

.hero-banner:hover .banner-text::before {
  animation: glitch-1 0.3s infinite;
  color: var(--accent-cyan);
  opacity: 0.7;
  clip-path: inset(0 0 50% 0);
}

.hero-banner:hover .banner-text::after {
  animation: glitch-2 0.3s infinite;
  color: var(--accent-pink);
  opacity: 0.7;
  clip-path: inset(50% 0 0 0);
}

@keyframes glitch-1 {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(2px, -2px); }
  60% { transform: translate(-1px, 1px); }
  80% { transform: translate(1px, -1px); }
}

@keyframes glitch-2 {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(2px, -2px); }
  40% { transform: translate(-2px, 2px); }
  60% { transform: translate(1px, -1px); }
  80% { transform: translate(-1px, 1px); }
}