/* app/styles/mcp-animations.css */
@keyframes flowLine {
  0% {
    transform: translate(-100%);
    -webkit-transform: translateX(-100%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  to {
    transform: translate(100%);
    -webkit-transform: translateX(100%);
    opacity: 0;
  }
}
@keyframes pulse {
  0%, to {
    opacity: 1;
  }
  50% {
    opacity: .6;
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
}
@keyframes glowPulse {
  0%, to {
    filter: drop-shadow(0 0 5px rgba(59, 130, 246, .5));
    -webkit-filter: drop-shadow(0 0 5px rgba(59, 130, 246, .5));
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(59, 130, 246, .8));
    -webkit-filter: drop-shadow(0 0 15px rgba(59, 130, 246, .8));
  }
}
@keyframes rotateGlow {
  0% {
    transform: rotate(0);
    -webkit-transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}
.circuit-bg {
  background-image: radial-gradient(circle at 25% 25%, rgba(59, 130, 246, .1) 1px, transparent 1px), radial-gradient(circle at 75% 75%, rgba(139, 92, 246, .1) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: 0 0;
  animation: circuitMove 60s linear infinite;
  -webkit-animation: circuitMove 60s linear infinite;
}
@keyframes circuitMove {
  0% {
    background-position: 0 0;
  }
  to {
    background-position: 1000px 1000px;
  }
}
.flow-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, #3b82f6, transparent);
  animation: flowLine 3s linear infinite;
  -webkit-animation: flowLine 3s linear infinite;
}
.flow-line-1 {
  top: 20%;
  left: 0;
  width: 100%;
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
.flow-line-2 {
  top: 40%;
  left: 0;
  width: 100%;
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
}
.flow-line-3 {
  top: 60%;
  left: 0;
  width: 100%;
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
}
.flow-line-4 {
  top: 80%;
  left: 0;
  width: 100%;
  animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
}
.mcp-terminal-line {
  animation: fadeInUp .5s ease-out forwards;
  -webkit-animation: fadeInUp .5s ease-out forwards;
  opacity: 0;
}
.mcp-line-1 {
  animation-delay: .2s;
  -webkit-animation-delay: .2s;
}
.mcp-line-2 {
  animation-delay: .7s;
  -webkit-animation-delay: .7s;
}
.mcp-line-3 {
  animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
}
.mcp-line-4 {
  animation-delay: 1.7s;
  -webkit-animation-delay: 1.7s;
}
.mcp-line-5 {
  animation-delay: 2.2s;
  -webkit-animation-delay: 2.2s;
}
.mcp-line-6 {
  animation-delay: 2.7s;
  -webkit-animation-delay: 2.7s;
}
.mcp-line-7 {
  animation-delay: 3.2s;
  -webkit-animation-delay: 3.2s;
}
.glow-effect {
  animation: glowPulse 2s ease-in-out infinite;
  -webkit-animation: glowPulse 2s ease-in-out infinite;
}
.rotating-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: conic-gradient(from 0deg, rgba(59, 130, 246, 0), rgba(59, 130, 246, .1), rgba(139, 92, 246, .2), rgba(59, 130, 246, .1), rgba(59, 130, 246, 0));
  animation: rotateGlow 10s linear infinite;
  -webkit-animation: rotateGlow 10s linear infinite;
  border-radius: inherit;
}
.data-node {
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: #3b82f6;
  border-radius: 50%;
  opacity: 0;
  animation: pulse 2s infinite;
  -webkit-animation: pulse 2s infinite;
}
.data-node:nth-child(1) {
  top: 10%;
  left: 20%;
  animation-delay: .2s;
  -webkit-animation-delay: .2s;
}
.data-node:nth-child(2) {
  top: 30%;
  left: 70%;
  animation-delay: .5s;
  -webkit-animation-delay: .5s;
}
.data-node:nth-child(3) {
  top: 50%;
  left: 30%;
  animation-delay: .8s;
  -webkit-animation-delay: .8s;
}
.data-node:nth-child(4) {
  top: 70%;
  left: 80%;
  animation-delay: 1.1s;
  -webkit-animation-delay: 1.1s;
}
.data-node:nth-child(5) {
  top: 90%;
  left: 40%;
  animation-delay: 1.4s;
  -webkit-animation-delay: 1.4s;
}
.data-node:nth-child(6) {
  top: 20%;
  left: 90%;
  animation-delay: 1.7s;
  -webkit-animation-delay: 1.7s;
}
.data-node:nth-child(7) {
  top: 40%;
  left: 10%;
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
}
.data-node:nth-child(8) {
  top: 60%;
  left: 60%;
  animation-delay: 2.3s;
  -webkit-animation-delay: 2.3s;
}
.data-node:nth-child(9) {
  top: 80%;
  left: 20%;
  animation-delay: 2.6s;
  -webkit-animation-delay: 2.6s;
}
.data-node:nth-child(10) {
  top: 15%;
  left: 50%;
  animation-delay: 2.9s;
  -webkit-animation-delay: 2.9s;
}
.data-node:nth-child(11) {
  top: 35%;
  left: 40%;
  animation-delay: 3.2s;
  -webkit-animation-delay: 3.2s;
}
.data-node:nth-child(12) {
  top: 55%;
  left: 85%;
  animation-delay: 3.5s;
  -webkit-animation-delay: 3.5s;
}
.data-node:nth-child(13) {
  top: 75%;
  left: 15%;
  animation-delay: 3.8s;
  -webkit-animation-delay: 3.8s;
}
.data-node:nth-child(14) {
  top: 95%;
  left: 60%;
  animation-delay: 4.1s;
  -webkit-animation-delay: 4.1s;
}
.data-node:nth-child(15) {
  top: 25%;
  left: 75%;
  animation-delay: 4.4s;
  -webkit-animation-delay: 4.4s;
}
.mcp-badge {
  background: linear-gradient(90deg, #1e40af, #3b82f6, #1e40af);
  background-size: 200% 100%;
  animation: gradientMove 3s linear infinite;
  -webkit-animation: gradientMove 3s linear infinite;
}
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  to {
    background-position: 200% 50%;
  }
}
.mcp-version {
  position: relative;
  overflow: hidden;
}
.mcp-version:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
  animation: shimmer 2s infinite;
  -webkit-animation: shimmer 2s infinite;
}
@keyframes shimmer {
  to {
    left: 100%;
  }
}
.safari-fixes .circuit-bg {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000;
}
.safari-fixes .flow-line {
  transform: translateZ(0);
}
.safari-fixes .rotating-glow {
  transform: translateZ(0) rotate(0);
}
.safari-fixes .data-node {
  transform: translateZ(0);
}
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    .circuit-bg {
      animation-duration: 120s;
      -webkit-animation-duration: 120s;
    }
    .rotating-glow {
      animation-duration: 20s;
      -webkit-animation-duration: 20s;
    }
  }
}
.safari-fixes * {
  transform: translateZ(0);
}