/* ============================================
   Complex Animations - System Company Style
   ============================================ */

/* --- Glitch Text Effect --- */
.hero-line {
  position: relative;
}

.hero-line .char-wrap {
  position: relative;
  display: inline-block;
}

/* --- Data Stream Overlay --- */
.data-stream {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan);
  opacity: 0.04;
  white-space: nowrap;
  pointer-events: none;
  animation: dataScroll 20s linear infinite;
}

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

/* --- Circuit Board Pattern Animation --- */
.circuit-pattern {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.03;
  pointer-events: none;
}

.circuit-path {
  stroke: var(--cyan);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 200;
  animation: circuitFlow 8s linear infinite;
}

@keyframes circuitFlow {
  0% { stroke-dashoffset: 400; }
  100% { stroke-dashoffset: 0; }
}

/* --- Hex Grid Background --- */
.hex-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --- Typing cursor --- */
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--cyan);
  margin-left: 4px;
  animation: cursorBlink 1s step-end infinite;
  vertical-align: middle;
}

@keyframes cursorBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* --- Particle Glow --- */
.particle-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: particleFloat 6s ease-in-out infinite;
}

@keyframes particleFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.6;
  }
  25% {
    transform: translate(20px, -30px) scale(1.2);
    opacity: 0.3;
  }
  50% {
    transform: translate(-10px, -50px) scale(0.8);
    opacity: 0.8;
  }
  75% {
    transform: translate(30px, -20px) scale(1.1);
    opacity: 0.4;
  }
}

/* --- Matrix Rain Column Styles --- */
.matrix-col {
  position: absolute;
  top: -200px;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.2;
  color: var(--green);
  opacity: 0.08;
  writing-mode: vertical-rl;
  text-orientation: upright;
  animation: matrixDrop linear infinite;
}

@keyframes matrixDrop {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* --- Pulse Ring --- */
.pulse-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--cyan);
  animation: pulseExpand 3s ease-out infinite;
}

@keyframes pulseExpand {
  0% {
    transform: scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* --- Service Card Hover Glow --- */
.service-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 136, 204, 0.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: -1;
}

.service-card:hover::after {
  opacity: 1;
}

/* --- Floating Nodes --- */
.floating-node {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--cyan);
  border-radius: 50%;
  pointer-events: none;
  animation: nodeFloat 8s ease-in-out infinite;
}

@keyframes nodeFloat {
  0%, 100% {
    transform: translate(0, 0);
    opacity: 0.3;
  }
  33% {
    transform: translate(40px, -60px);
    opacity: 0.7;
  }
  66% {
    transform: translate(-30px, -30px);
    opacity: 0.2;
  }
}

/* --- Code Line Animation --- */
.code-line-anim {
  position: absolute;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  animation: codeLine 4s ease-in-out infinite;
}

@keyframes codeLine {
  0% { width: 0; left: 0; }
  50% { width: 200px; left: 0; }
  100% { width: 0; left: 200px; }
}

/* --- Morphing Shape --- */
.morph-shape {
  animation: morphing 8s ease-in-out infinite;
}

@keyframes morphing {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  25% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
  50% {
    border-radius: 50% 60% 30% 60% / 30% 40% 60% 70%;
  }
  75% {
    border-radius: 60% 30% 60% 40% / 70% 50% 40% 60%;
  }
}

/* --- Scan Line Sweep --- */
.scan-sweep {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0.15;
  animation: scanSweep 6s linear infinite;
  pointer-events: none;
}

@keyframes scanSweep {
  0% { top: -2px; }
  100% { top: 100%; }
}

/* --- HUD Corner Brackets --- */
.hud-bracket {
  position: absolute;
  width: 30px;
  height: 30px;
  pointer-events: none;
  opacity: 0.15;
}

.hud-bracket::before,
.hud-bracket::after {
  content: '';
  position: absolute;
  background: var(--cyan);
}

.hud-bracket--tl::before { top: 0; left: 0; width: 100%; height: 1px; }
.hud-bracket--tl::after { top: 0; left: 0; width: 1px; height: 100%; }

.hud-bracket--tr::before { top: 0; right: 0; width: 100%; height: 1px; }
.hud-bracket--tr::after { top: 0; right: 0; width: 1px; height: 100%; }

.hud-bracket--bl::before { bottom: 0; left: 0; width: 100%; height: 1px; }
.hud-bracket--bl::after { bottom: 0; left: 0; width: 1px; height: 100%; }

.hud-bracket--br::before { bottom: 0; right: 0; width: 100%; height: 1px; }
.hud-bracket--br::after { bottom: 0; right: 0; width: 1px; height: 100%; }

/* --- Gradient Orb --- */
.gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  animation: orbFloat 10s ease-in-out infinite;
}

.gradient-orb--1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 136, 204, 0.15), transparent);
  top: 10%;
  right: -10%;
}

.gradient-orb--2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 200, 150, 0.1), transparent);
  bottom: 10%;
  left: -5%;
  animation-delay: -5s;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(30px, -40px); }
  50% { transform: translate(-20px, 20px); }
  75% { transform: translate(10px, -10px); }
}

/* --- Noise texture overlay --- */
.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
}