/* Estilos para animaciones cyberpunk */

/* Animación de pulso para elementos */
@keyframes pulse {
  0% {
    opacity: 0.7;
    box-shadow: 0 0 5px rgba(0, 162, 255, 0.3);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 15px rgba(0, 162, 255, 0.5), 0 0 30px rgba(0, 162, 255, 0.3);
  }
  100% {
    opacity: 0.7;
    box-shadow: 0 0 5px rgba(0, 162, 255, 0.3);
  }
}

/* Animación de brillo para títulos */
@keyframes glow {
  0% {
    text-shadow: 0 0 5px rgba(0, 162, 255, 0.5),
                 0 0 10px rgba(0, 162, 255, 0.3);
  }
  100% {
    text-shadow: 0 0 10px rgba(0, 162, 255, 0.7),
                 0 0 20px rgba(0, 162, 255, 0.5),
                 0 0 30px rgba(0, 162, 255, 0.3);
  }
}

/* Animación de desplazamiento de gradiente */
@keyframes gradient-shift {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

/* Animación de glitch para texto */
@keyframes glitch-1 {
  0% {
    clip-path: inset(20% 0 80% 0);
  }
  20% {
    clip-path: inset(60% 0 1% 0);
  }
  40% {
    clip-path: inset(25% 0 58% 0);
  }
  60% {
    clip-path: inset(54% 0 7% 0);
  }
  80% {
    clip-path: inset(63% 0 15% 0);
  }
  100% {
    clip-path: inset(10% 0 58% 0);
  }
}

@keyframes glitch-2 {
  0% {
    clip-path: inset(63% 0 1% 0);
  }
  20% {
    clip-path: inset(25% 0 58% 0);
  }
  40% {
    clip-path: inset(54% 0 7% 0);
  }
  60% {
    clip-path: inset(20% 0 80% 0);
  }
  80% {
    clip-path: inset(10% 0 58% 0);
  }
  100% {
    clip-path: inset(60% 0 1% 0);
  }
}

/* Animación de escaneo */
@keyframes scan {
  0% {
    top: 0%;
  }
  100% {
    top: 100%;
  }
}

/* Animación de líneas de holograma */
@keyframes hologram-lines {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

/* Animación de flotación para partículas */
@keyframes float {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) translateX(100px);
    opacity: 0;
  }
}

/* Animación de carga */
@keyframes loading {
  0% {
    left: -50%;
  }
  100% {
    left: 150%;
  }
}

/* Animación de pulso para circuitos */
@keyframes circuit-pulse {
  0% {
    opacity: 0.05;
    filter: hue-rotate(0deg);
  }
  50% {
    opacity: 0.15;
    filter: hue-rotate(30deg);
  }
  100% {
    opacity: 0.05;
    filter: hue-rotate(0deg);
  }
}

/* Animación de escaneo para cartas */
@keyframes card-scan {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

/* Animación de glitch para cartas */
@keyframes card-glitch {
  0% {
    transform: translateY(-10px) skewX(0deg);
  }
  20% {
    transform: translateY(-10px) skewX(1deg);
  }
  40% {
    transform: translateY(-10px) skewX(-1deg);
  }
  60% {
    transform: translateY(-10px) skewX(0.5deg);
  }
  80% {
    transform: translateY(-10px) skewX(-0.5deg);
  }
  100% {
    transform: translateY(-10px) skewX(0deg);
  }
}

/* Animación de carga para cartas */
@keyframes card-loading {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}

/* Animación de datos glitch */
@keyframes data-glitch-1 {
  0% {
    clip: rect(44px, 9999px, 56px, 0);
  }
  5% {
    clip: rect(11px, 9999px, 31px, 0);
  }
  10% {
    clip: rect(48px, 9999px, 81px, 0);
  }
  15% {
    clip: rect(9px, 9999px, 93px, 0);
  }
  20% {
    clip: rect(22px, 9999px, 54px, 0);
  }
  25% {
    clip: rect(31px, 9999px, 67px, 0);
  }
  30% {
    clip: rect(89px, 9999px, 98px, 0);
  }
  35% {
    clip: rect(19px, 9999px, 27px, 0);
  }
  40% {
    clip: rect(68px, 9999px, 84px, 0);
  }
  45% {
    clip: rect(37px, 9999px, 53px, 0);
  }
  50% {
    clip: rect(80px, 9999px, 91px, 0);
  }
  55% {
    clip: rect(63px, 9999px, 71px, 0);
  }
  60% {
    clip: rect(24px, 9999px, 35px, 0);
  }
  65% {
    clip: rect(56px, 9999px, 67px, 0);
  }
  70% {
    clip: rect(18px, 9999px, 29px, 0);
  }
  75% {
    clip: rect(42px, 9999px, 58px, 0);
  }
  80% {
    clip: rect(67px, 9999px, 89px, 0);
  }
  85% {
    clip: rect(74px, 9999px, 88px, 0);
  }
  90% {
    clip: rect(36px, 9999px, 52px, 0);
  }
  95% {
    clip: rect(5px, 9999px, 17px, 0);
  }
  100% {
    clip: rect(53px, 9999px, 71px, 0);
  }
}

@keyframes data-glitch-2 {
  0% {
    clip: rect(25px, 9999px, 40px, 0);
  }
  5% {
    clip: rect(54px, 9999px, 71px, 0);
  }
  10% {
    clip: rect(18px, 9999px, 29px, 0);
  }
  15% {
    clip: rect(94px, 9999px, 100px, 0);
  }
  20% {
    clip: rect(62px, 9999px, 78px, 0);
  }
  25% {
    clip: rect(23px, 9999px, 45px, 0);
  }
  30% {
    clip: rect(76px, 9999px, 87px, 0);
  }
  35% {
    clip: rect(31px, 9999px, 48px, 0);
  }
  40% {
    clip: rect(82px, 9999px, 97px, 0);
  }
  45% {
    clip: rect(27px, 9999px, 39px, 0);
  }
  50% {
    clip: rect(73px, 9999px, 86px, 0);
  }
  55% {
    clip: rect(57px, 9999px, 69px, 0);
  }
  60% {
    clip: rect(37px, 9999px, 56px, 0);
  }
  65% {
    clip: rect(71px, 9999px, 89px, 0);
  }
  70% {
    clip: rect(22px, 9999px, 31px, 0);
  }
  75% {
    clip: rect(46px, 9999px, 65px, 0);
  }
  80% {
    clip: rect(61px, 9999px, 77px, 0);
  }
  85% {
    clip: rect(80px, 9999px, 94px, 0);
  }
  90% {
    clip: rect(19px, 9999px, 33px, 0);
  }
  95% {
    clip: rect(13px, 9999px, 26px, 0);
  }
  100% {
    clip: rect(58px, 9999px, 75px, 0);
  }
}

/* Animación para el botón de scroll */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Animación de transición de página */
@keyframes page-transition-in {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes page-transition-out {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

/* Animación de parpadeo para elementos de interfaz */
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* Animación de rotación para elementos */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Animación de escritura para terminal */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Animación de cursor para terminal */
@keyframes cursor-blink {
  0%, 100% {
    border-right-color: transparent;
  }
  50% {
    border-right-color: var(--primary-color);
  }
}

/* Animación de ondas para efectos de energía */
@keyframes energy-wave {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* Animación de desplazamiento para fondos */
@keyframes background-scroll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 100%;
  }
}

/* Animación de destello para elementos importantes */
@keyframes flash {
  0%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.1;
  }
}

/* Animación de vibración para alertas */
@keyframes vibrate {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-2px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(2px);
  }
}

/* Animación de desvanecimiento para transiciones */
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Animación de expansión para elementos interactivos */
@keyframes expand {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Clases de animación aplicables */
.animated-pulse {
  animation: pulse 2s infinite;
}

.animated-glow {
  animation: glow 3s infinite alternate;
}

.animated-scan {
  position: relative;
  overflow: hidden;
}

.animated-scan::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, transparent, var(--primary-color), transparent);
  opacity: 0.5;
  animation: scan 3s linear infinite;
}

.animated-float {
  animation: float 15s infinite linear;
}

.animated-blink {
  animation: blink 1.5s infinite;
}

.animated-rotate {
  animation: rotate 10s linear infinite;
}

.animated-typing {
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid var(--primary-color);
  animation: 
    typing 3.5s steps(40, end),
    cursor-blink 0.75s step-end infinite;
}

.animated-vibrate {
  animation: vibrate 0.3s linear infinite;
}

.animated-fade-in {
  animation: fade-in 1s ease-out;
}

.animated-expand {
  animation: expand 2s ease infinite;
}

/* Animaciones específicas para elementos de interfaz */
.card-interface-element {
  animation: blink 3s infinite alternate;
}

.loading-bar::before {
  animation: loading 2s infinite linear;
}

.terminal-text {
  animation: typing 4s steps(50, end);
}

.hero-card:hover {
  animation: card-pulse 2s infinite;
}

.button:hover::before {
  animation: gradient-shift 1s ease;
}

.data-glitch::before {
  animation: data-glitch-1 3s infinite linear alternate-reverse;
}

.data-glitch::after {
  animation: data-glitch-2 2s infinite linear alternate-reverse;
}

.scroll-indicator {
  animation: bounce 2s infinite;
}

.circuit-header-bg {
  animation: circuit-pulse 15s infinite alternate;
}

.hologram-card::before {
  animation: hologram-lines 10s linear infinite;
}

/* Animaciones para impresión */
@media print {
  .animated-pulse,
  .animated-glow,
  .animated-scan,
  .animated-float,
  .animated-blink,
  .animated-rotate,
  .animated-typing,
  .animated-vibrate,
  .animated-fade-in,
  .animated-expand,
  .card-interface-element,
  .loading-bar::before,
  .terminal-text,
  .hero-card:hover,
  .button:hover::before,
  .data-glitch::before,
  .data-glitch::after,
  .scroll-indicator,
  .circuit-header-bg,
  .hologram-card::before {
    animation: none !important;
  }
}