.neon-text {
  color: var(--vermillion);
  text-shadow: 0 0 10px var(--vermillion), 0 0 20px var(--vermillion-glow);
  animation: neonFlicker 3s ease-in-out infinite;
}

@keyframes neonFlicker {
  0%, 18%, 22%, 25%, 54%, 56%, 100% {
    text-shadow: 0 0 10px var(--vermillion), 0 0 20px var(--vermillion-glow);
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}


.card-futuristic {
  position: relative;
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.card-futuristic::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(230, 57, 70, 0.1), transparent);
  animation: shimmer 3s infinite;
  pointer-events: none;
}


.float-animation {
  animation: floatAnimation 4s ease-in-out infinite;
}

@keyframes floatAnimation {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}


.pulse {
  animation: pulseAnimation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulseAnimation {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}


.gradient-shift {
  background: linear-gradient(-45deg, var(--vermillion), var(--cyan), var(--sakura), var(--vermillion));
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


.cursor-blink {
  animation: blink 1.2s steps(2, start) infinite;
}

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}


@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blinker {
  50% { border-right-color: transparent; }
}

.typewriter {
  overflow: hidden;
  border-right: 3px solid var(--vermillion);
  white-space: nowrap;
  animation: typewriter 4s steps(40, end), blinker 0.75s step-end infinite;
}


.scanlines {
  position: relative;
  overflow: hidden;
}

.scanlines::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.03) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  animation: scanlineMove 8s linear infinite;
}

@keyframes scanlineMove {
  0% { transform: translateY(0); }
  100% { transform: translateY(10px); }
}


.particle-burst {
  position: relative;
  overflow: visible;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--vermillion);
  border-radius: 50%;
  animation: burstOut 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes burstOut {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), var(--ty));
    opacity: 0;
  }
}


.hologram {
  position: relative;
  color: var(--cyan);
  text-shadow:
    0 0 10px var(--cyan),
    0 0 20px var(--cyan-glow),
    2px 2px 0 var(--vermillion),
    -2px -2px 0 var(--magenta);
  animation: hologramFlicker 0.3s infinite;
}

@keyframes hologramFlicker {
  0%, 100% { text-shadow:
    0 0 10px var(--cyan),
    0 0 20px var(--cyan-glow),
    2px 2px 0 var(--vermillion),
    -2px -2px 0 var(--magenta);
  }
  50% { text-shadow:
    0 0 5px var(--cyan),
    0 0 10px var(--cyan-glow),
    1px 1px 0 var(--vermillion),
    -1px -1px 0 var(--magenta);
  }
}


.crt-effect {
  position: relative;
}

.crt-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
  pointer-events: none;
}

.crt-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  animation: crtFlicker 0.15s infinite;
}

@keyframes crtFlicker {
  0% { opacity: 0.97; }
  50% { opacity: 1; }
  100% { opacity: 0.98; }
}


.data-flow {
  position: relative;
  overflow: hidden;
}

.data-flow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(230, 57, 70, 0.3), transparent);
  animation: dataFlow 2s infinite;
  pointer-events: none;
}

@keyframes dataFlow {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}


@keyframes glitch {
  0% { text-shadow: -2px 0 var(--cyan), 2px 0 var(--magenta); }
  50% { text-shadow: 2px 0 var(--cyan), -2px 0 var(--magenta); }
  100% { text-shadow: -2px 0 var(--magenta), 2px 0 var(--cyan); }
}

.glitch {
  position: relative;
  animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


.stagger-in {
  opacity: 0;
  animation: fadeInScale 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}


@media (max-width: 768px) {
  .neon-text {
    font-size: 1rem;
    text-shadow: 0 0 8px var(--vermillion), 0 0 16px var(--vermillion-glow);
  }

  .hologram {
    text-shadow:
      0 0 8px var(--cyan),
      0 0 16px var(--cyan-glow),
      1px 1px 0 var(--vermillion),
      -1px -1px 0 var(--magenta);
  }
}