/* ============================================================
   ANIMACIONES CSS — itWorks
   ============================================================ */

/* ─── GLITCH ─── */
@keyframes glitch-1 {
  0%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0); }
  20%  { clip-path: inset(10% 0 60% 0); transform: translate(-4px, 2px); }
  40%  { clip-path: inset(40% 0 30% 0); transform: translate(4px, -2px); }
  60%  { clip-path: inset(60% 0 10% 0); transform: translate(-2px, 1px); }
  80%  { clip-path: inset(80% 0 0% 0);  transform: translate(2px, -1px); }
}

@keyframes glitch-2 {
  0%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0); }
  20%  { clip-path: inset(20% 0 50% 0); transform: translate(4px, -2px); }
  40%  { clip-path: inset(50% 0 20% 0); transform: translate(-4px, 2px); }
  60%  { clip-path: inset(70% 0 5% 0);  transform: translate(2px, -1px); }
  80%  { clip-path: inset(5% 0 80% 0);  transform: translate(-2px, 1px); }
}

/* ─── FLOAT ─── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-20px) rotate(3deg); }
}

/* ─── GLOW PULSE ─── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 240, 0.3); }
  50%       { box-shadow: 0 0 40px rgba(0, 212, 240, 0.6), 0 0 80px rgba(0, 212, 240, 0.2); }
}

@keyframes glowPulseAccent {
  0%, 100% { box-shadow: 0 0 20px rgba(224, 64, 251, 0.3); }
  50%       { box-shadow: 0 0 40px rgba(224, 64, 251, 0.6), 0 0 80px rgba(224, 64, 251, 0.2); }
}

/* ─── SCAN LINE ─── */
@keyframes scanLine {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* ─── ORBIT ─── */
@keyframes orbitCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes orbitCCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ─── HEX HEXÁGONO CENTRAL ─── */
@keyframes hexPulse {
  0%, 100% {
    box-shadow: 0 0 30px rgba(0, 212, 240, 0.5), inset 0 0 30px rgba(0, 212, 240, 0.1);
  }
  50% {
    box-shadow: 0 0 60px rgba(0, 212, 240, 0.8), inset 0 0 60px rgba(0, 212, 240, 0.2);
  }
}

/* ─── DATA FLOW (líneas descendentes) ─── */
@keyframes dataFlow {
  0%   { transform: translateY(-100%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* ─── TYPING CURSOR ─── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ─── GRADIENT SHIFT ─── */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ─── BORDER ANIMATE ─── */
@keyframes borderRotate {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ─── ORB MOVEMENT ─── */
@keyframes orbMove1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(30px, -20px) scale(1.05); }
  66%  { transform: translate(-20px, 15px) scale(0.97); }
}

@keyframes orbMove2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-25px, 20px) scale(1.03); }
  66%  { transform: translate(15px, -25px) scale(0.98); }
}

/* ─── PROGRESS BAR ─── */
@keyframes progressFill {
  from { width: 0%; }
  to   { width: var(--progress-target, 100%); }
}

/* ─── FADE IN ─── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── SLIDE RIGHT ─── */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}