/* ============================================================
   NEXXUS — animations.css
   All keyframe animations for the marketing site
   ============================================================ */

/* Glow pulse: text-shadow oscillation dim → bright cyan */
@keyframes glow-pulse {
  0%, 100% {
    text-shadow:
      0 0 10px rgba(0, 245, 255, 0.4),
      0 0 20px rgba(0, 245, 255, 0.2),
      0 0 40px rgba(0, 245, 255, 0.1);
  }
  50% {
    text-shadow:
      0 0 20px rgba(0, 245, 255, 0.9),
      0 0 40px rgba(0, 245, 255, 0.6),
      0 0 80px rgba(0, 245, 255, 0.4),
      0 0 120px rgba(0, 245, 255, 0.2);
  }
}

/* Scan line: horizontal white line sweeping top → bottom (GPU-optimized) */
@keyframes scan-line {
  0%   { transform: translateY(-2px); opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* Float: gentle y-axis float +/- 12px for cards */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

/* Neuron pulse: scale 1→1.6 and opacity 1→0 for brain node halos */
@keyframes neuron-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Rotate slow: 360deg rotation over 20s */
@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Fade in up: opacity 0→1 + translateY 30→0 */
@keyframes fade-in-up {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Counter up: for animated number counters (used via JS) */
@keyframes counter-up {
  0%   { opacity: 0; transform: translateY(10px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Particle drift: subtle x/y drift for background particles */
@keyframes particle-drift {
  0%   { transform: translate(0px, 0px); }
  25%  { transform: translate(6px, -8px); }
  50%  { transform: translate(-4px, -14px); }
  75%  { transform: translate(-8px, -6px); }
  100% { transform: translate(0px, 0px); }
}

/* Blink cursor: blinking text cursor */
@keyframes blink-cursor {
  0%, 100% { border-right-color: rgba(0, 245, 255, 1); }
  50%       { border-right-color: transparent; }
}

/* Radar sweep: rotating gradient for radar effect */
@keyframes radar-sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Active pulse: scale 1→1.4, opacity 1→0 for green "Active" status dots */
@keyframes active-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Shimmer: translateX for glass shimmer effects (GPU-optimized)
   Element is 60% wide, must travel from off-screen left to off-screen right
   = from translateX(0) at left:-100% equivalent → past 100% right ≈ 333% of own width */
@keyframes shimmer {
  0%   { transform: translateX(0); }
  100% { transform: translateX(333%); }
}

/* Border glow: border-color cycling cyan → purple → blue */
@keyframes border-glow {
  0%   { border-color: rgba(0, 245, 255, 0.4);  box-shadow: 0 0 16px rgba(0, 245, 255, 0.25); }
  33%  { border-color: rgba(128, 0, 255, 0.4);  box-shadow: 0 0 16px rgba(128, 0, 255, 0.25); }
  66%  { border-color: rgba(0, 128, 255, 0.4);  box-shadow: 0 0 16px rgba(0, 128, 255, 0.25); }
  100% { border-color: rgba(0, 245, 255, 0.4);  box-shadow: 0 0 16px rgba(0, 245, 255, 0.25); }
}

/* Typing: width 0→100% for typewriter text */
@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}

/* Matrix rain: translateY for matrix text columns */
@keyframes matrix-rain {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* Utility animation: data-stream line */
@keyframes data-stream {
  0%   { stroke-dashoffset: 400; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Node fire: synapse activation flash */
@keyframes node-fire {
  0%, 100% { filter: brightness(1);  box-shadow: 0 0 6px rgba(0, 245, 255, 0.4); }
  50%       { filter: brightness(2.5); box-shadow: 0 0 20px rgba(0, 245, 255, 1); }
}

/* Slide in right */
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Slide in left */
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Scale in */
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* Modal appear */
@keyframes modal-appear {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* Float bounce: gentle bounce for scroll indicator */
@keyframes floatBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ============================================================
   3D / 4D ADVANCED ANIMATIONS
   Perspective transforms, multi-axis rotations, depth effects
   ============================================================ */

/* 3D card entrance: emerge from depth with rotation */
@keyframes emerge-3d {
  0%   { opacity: 0; transform: perspective(800px) rotateX(15deg) rotateY(-8deg) translateZ(-80px) translateY(40px); }
  60%  { opacity: 1; transform: perspective(800px) rotateX(-2deg) rotateY(1deg) translateZ(10px) translateY(-5px); }
  100% { opacity: 1; transform: perspective(800px) rotateX(0) rotateY(0) translateZ(0) translateY(0); }
}

/* 4D warp: multi-axis rotation with scale oscillation */
@keyframes warp-4d {
  0%   { transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); }
  25%  { transform: perspective(600px) rotateX(3deg) rotateY(-5deg) rotateZ(0.5deg) scale(1.01); }
  50%  { transform: perspective(600px) rotateX(-2deg) rotateY(3deg) rotateZ(-0.5deg) scale(0.99); }
  75%  { transform: perspective(600px) rotateX(1deg) rotateY(-2deg) rotateZ(0.3deg) scale(1.005); }
  100% { transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); }
}

/* Dimensional rift: element appears through a "portal" */
@keyframes dimensional-rift {
  0%   { opacity: 0; transform: perspective(1000px) rotateY(90deg) scale(0.3); filter: blur(8px); }
  40%  { opacity: 0.6; transform: perspective(1000px) rotateY(-15deg) scale(1.05); filter: blur(2px); }
  70%  { opacity: 1; transform: perspective(1000px) rotateY(5deg) scale(0.98); filter: blur(0); }
  100% { opacity: 1; transform: perspective(1000px) rotateY(0deg) scale(1); filter: blur(0); }
}

/* Parallax depth float: 3D floating with z-axis movement */
@keyframes depth-float {
  0%, 100% { transform: perspective(800px) translateZ(0px) translateY(0px) rotateX(0deg); }
  25%      { transform: perspective(800px) translateZ(15px) translateY(-6px) rotateX(1deg); }
  50%      { transform: perspective(800px) translateZ(25px) translateY(-12px) rotateX(2deg); }
  75%      { transform: perspective(800px) translateZ(10px) translateY(-4px) rotateX(0.5deg); }
}

/* Holographic flicker: rapid subtle glitch for cybersecurity feel */
@keyframes holo-flicker {
  0%, 100% { opacity: 1; transform: translate(0, 0); }
  7%       { opacity: 0.85; transform: translate(-1px, 0); }
  10%      { opacity: 1; transform: translate(1px, 0); }
  27%      { opacity: 0.9; transform: translate(0, -1px); }
  30%      { opacity: 1; transform: translate(0, 0); }
  57%      { opacity: 0.88; transform: translate(1px, 1px); }
  60%      { opacity: 1; transform: translate(0, 0); }
}

/* Quantum tunnel: element phases through dimensions */
@keyframes quantum-tunnel {
  0%   { opacity: 0; transform: perspective(500px) translateZ(-200px) rotateX(30deg); filter: brightness(3) blur(4px); }
  30%  { opacity: 0.5; transform: perspective(500px) translateZ(-50px) rotateX(10deg); filter: brightness(1.5) blur(1px); }
  60%  { opacity: 0.9; transform: perspective(500px) translateZ(20px) rotateX(-3deg); filter: brightness(1.1) blur(0); }
  80%  { opacity: 1; transform: perspective(500px) translateZ(-5px) rotateX(1deg); filter: brightness(1); }
  100% { opacity: 1; transform: perspective(500px) translateZ(0) rotateX(0); filter: brightness(1); }
}

/* Orbital ring: element traces an elliptical orbit */
@keyframes orbital {
  0%   { transform: perspective(400px) rotateX(60deg) rotateZ(0deg); }
  100% { transform: perspective(400px) rotateX(60deg) rotateZ(360deg); }
}

/* Energy pulse: expanding ring of energy */
@keyframes energy-pulse {
  0%   { transform: scale(0.8); opacity: 1; box-shadow: 0 0 0 0 rgba(0, 245, 255, 0.6); }
  50%  { transform: scale(1); box-shadow: 0 0 20px 10px rgba(0, 245, 255, 0.15); }
  100% { transform: scale(1.2); opacity: 0; box-shadow: 0 0 40px 20px rgba(0, 245, 255, 0); }
}

/* Chromatic aberration: RGB split glitch */
@keyframes chromatic-glitch {
  0%, 100% { text-shadow: 0 0 0 transparent; filter: none; }
  10%      { text-shadow: -2px 0 rgba(255, 0, 80, 0.5), 2px 0 rgba(0, 255, 224, 0.5); }
  20%      { text-shadow: 0 0 0 transparent; filter: none; }
  45%      { text-shadow: 1px 0 rgba(255, 0, 204, 0.4), -1px 0 rgba(0, 245, 255, 0.4); }
  50%      { text-shadow: 0 0 0 transparent; }
  80%      { text-shadow: -1px 0 rgba(255, 204, 0, 0.3), 1px 0 rgba(0, 128, 255, 0.3); }
  85%      { text-shadow: 0 0 0 transparent; filter: none; }
}

/* Depth cascade: staggered elements enter from depth */
@keyframes depth-cascade {
  0%   { opacity: 0; transform: perspective(600px) translateZ(-120px) translateY(30px); }
  100% { opacity: 1; transform: perspective(600px) translateZ(0) translateY(0); }
}

/* Plasma wave: flowing organic background distortion */
@keyframes plasma-wave {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 3D spin reveal: element spins in from behind */
@keyframes spin-reveal-3d {
  0%   { opacity: 0; transform: perspective(800px) rotateY(-180deg) scale(0.6); }
  60%  { opacity: 1; transform: perspective(800px) rotateY(20deg) scale(1.05); }
  80%  { transform: perspective(800px) rotateY(-5deg) scale(0.98); }
  100% { opacity: 1; transform: perspective(800px) rotateY(0deg) scale(1); }
}

/* Tesseract fold: 4D hypercube-inspired folding animation */
@keyframes tesseract-fold {
  0%   { transform: perspective(800px) rotateX(0deg) rotateY(0deg); clip-path: polygon(10% 0%, 90% 0%, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%, 0% 10%); }
  25%  { transform: perspective(800px) rotateX(5deg) rotateY(10deg); clip-path: polygon(5% 5%, 95% 0%, 100% 5%, 95% 95%, 100% 100%, 5% 95%, 0% 100%, 0% 5%); }
  50%  { transform: perspective(800px) rotateX(-3deg) rotateY(-5deg); clip-path: polygon(8% 2%, 92% 3%, 98% 8%, 97% 92%, 92% 98%, 8% 97%, 2% 92%, 3% 8%); }
  75%  { transform: perspective(800px) rotateX(2deg) rotateY(3deg); clip-path: polygon(6% 1%, 94% 1%, 99% 6%, 99% 94%, 94% 99%, 6% 99%, 1% 94%, 1% 6%); }
  100% { transform: perspective(800px) rotateX(0deg) rotateY(0deg); clip-path: polygon(10% 0%, 90% 0%, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%, 0% 10%); }
}

/* Aurora borealis: shifting gradient overlay */
@keyframes aurora {
  0%   { background-position: 0% 50%;   filter: hue-rotate(0deg); }
  33%  { background-position: 50% 100%; filter: hue-rotate(20deg); }
  66%  { background-position: 100% 50%; filter: hue-rotate(-15deg); }
  100% { background-position: 0% 50%;   filter: hue-rotate(0deg); }
}

/* Wormhole: spiraling depth pull */
@keyframes wormhole {
  0%   { transform: perspective(500px) translateZ(0) rotate(0deg) scale(1); opacity: 1; }
  50%  { transform: perspective(500px) translateZ(-150px) rotate(180deg) scale(0.5); opacity: 0.4; }
  100% { transform: perspective(500px) translateZ(0) rotate(360deg) scale(1); opacity: 1; }
}

/* Glitch scan: horizontal distortion bars */
@keyframes glitch-scan {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
  5%       { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 0); }
  10%      { clip-path: inset(0 0 0 0); transform: translate(0); }
  35%      { clip-path: inset(50% 0 30% 0); transform: translate(2px, 0); }
  40%      { clip-path: inset(0 0 0 0); transform: translate(0); }
  70%      { clip-path: inset(10% 0 70% 0); transform: translate(-1px, 0); }
  75%      { clip-path: inset(0 0 0 0); transform: translate(0); }
}