/* Glitch + cyberpunk grid effects */
@keyframes glitch {
  0%,100% { transform: translate(0,0); text-shadow: 2px 0 #ff00c8, -2px 0 #00e1ff; }
  20% { transform: translate(-2px,1px); text-shadow: -2px 0 #ff00c8, 2px 0 #00e1ff; }
  40% { transform: translate(2px,-1px); text-shadow: 2px 0 #00e1ff, -2px 0 #ff00c8; }
  60% { transform: translate(-1px,-1px); text-shadow: -2px 0 #ff00c8, 2px 0 #00e1ff; }
  80% { transform: translate(1px,2px); text-shadow: 2px 0 #ff00c8, -2px 0 #00e1ff; }
}
.glitch { animation: glitch 2.6s infinite steps(1,end); }

@keyframes scan {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
}
.scanlines::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 4px);
  animation: scan 8s linear infinite;
}

.cyber-grid {
  background-image:
    linear-gradient(rgba(168,85,247,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251,146,60,0.18) 1px, transparent 1px);
  background-size: 48px 48px;
}
.cyber-grid-sm { background-image:
    linear-gradient(rgba(236,72,153,0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.15) 1px, transparent 1px);
  background-size: 24px 24px;
}

.diagonal-cut { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
.diagonal-cut-r { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 88%); }
.hex-clip { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }

@keyframes pulseGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(168,85,247,0.6), 0 0 40px rgba(251,146,60,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(168,85,247,0), 0 0 80px rgba(251,146,60,0.7); }
}
.pulse-glow { animation: pulseGlow 2.5s ease-in-out infinite; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 30s linear infinite; }