/* static/css/circuit.css */

/* Circuit & Light Pulse Animations for GCTC Hero & Sub-Hero */

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.98);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.03);
  }
}

@keyframes beamTravel1 {
  0% {
    stroke-dashoffset: 800;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes beamTravel2 {
  0% {
    stroke-dashoffset: 1000;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -500;
    opacity: 0;
  }
}

@keyframes beamTravelReverse {
  0% {
    stroke-dashoffset: -600;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 600;
    opacity: 0;
  }
}

@keyframes twinkleSparkle {
  0%, 100% {
    opacity: 0.15;
    transform: scale(0.6) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.35) rotate(90deg);
    filter: drop-shadow(0 0 10px #00f2fe) drop-shadow(0 0 16px #38bdf8);
  }
}

@keyframes radarRipple {
  0% {
    r: 2;
    opacity: 0.9;
    stroke-width: 2;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    r: 28;
    opacity: 0;
    stroke-width: 0.5;
  }
}

@keyframes floatParticle {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  30% {
    opacity: 0.85;
  }
  70% {
    opacity: 0.85;
  }
  100% {
    transform: translateY(-90px) translateX(30px);
    opacity: 0;
  }
}

@keyframes neonRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes morphCardEnter {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.94) rotateX(-8deg);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
    filter: blur(0px);
  }
}

@keyframes morphCardExit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(-16px) scale(0.94) rotateX(8deg);
    filter: blur(4px);
  }
}

/* Circuit SVG Beams */
.circuit-beam-1 {
  stroke-dasharray: 100 500;
  animation: beamTravel1 5.5s linear infinite;
}

.circuit-beam-2 {
  stroke-dasharray: 140 600;
  animation: beamTravel2 7.5s linear infinite 1.2s;
}

.circuit-beam-3 {
  stroke-dasharray: 80 400;
  animation: beamTravel1 6.2s linear infinite 2.8s;
}

.circuit-beam-4 {
  stroke-dasharray: 120 550;
  animation: beamTravelReverse 8s linear infinite 0.5s;
}

.circuit-beam-5 {
  stroke-dasharray: 90 450;
  animation: beamTravel2 6.8s linear infinite 3.5s;
}

/* Sparkles & Ripples */
.sparkle-node-1 {
  animation: twinkleSparkle 3s ease-in-out infinite;
  transform-origin: center;
}

.sparkle-node-2 {
  animation: twinkleSparkle 4.2s ease-in-out infinite 1.5s;
  transform-origin: center;
}

.sparkle-node-3 {
  animation: twinkleSparkle 3.6s ease-in-out infinite 0.8s;
  transform-origin: center;
}

.sparkle-node-4 {
  animation: twinkleSparkle 4.8s ease-in-out infinite 2.2s;
  transform-origin: center;
}

.radar-ring-1 {
  animation: radarRipple 3.5s ease-out infinite;
  transform-origin: center;
}

.radar-ring-2 {
  animation: radarRipple 4.5s ease-out infinite 1.8s;
  transform-origin: center;
}

/* Floating Elements */
.floating-orb-1 {
  animation: floatParticle 8s ease-in-out infinite;
}

.floating-orb-2 {
  animation: floatParticle 11s ease-in-out infinite 3s;
}

.floating-orb-3 {
  animation: floatParticle 9s ease-in-out infinite 5s;
}

.hero-glow-core {
  animation: pulseGlow 6s ease-in-out infinite;
}

/* Holographic Morphing Card */
.holo-card-active {
  animation: morphCardEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.holo-card-exit {
  animation: morphCardExit 0.5s cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

.hologram-border {
  position: relative;
  background: linear-gradient(135deg, rgba(6, 30, 60, 0.6), rgba(10, 20, 40, 0.75));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 242, 254, 0.3);
  box-shadow: 0 0 30px -5px rgba(0, 242, 254, 0.2), inset 0 0 20px 0 rgba(0, 242, 254, 0.08);
}

.hologram-border:hover {
  border-color: rgba(0, 242, 254, 0.6);
  box-shadow: 0 0 40px -5px rgba(0, 242, 254, 0.35), inset 0 0 25px 0 rgba(0, 242, 254, 0.15);
}