/* ============================================================
   ZORO TECH DESIGN — Keyframe Animations
   ============================================================ */

/* ── Glitch layers ── */
@keyframes glitch-1 {
  0%   { clip-path: inset(0 0 92% 0); transform: translate(-3px, 0); }
  10%  { clip-path: inset(40% 0 48% 0); transform: translate(3px, 0); }
  20%  { clip-path: inset(18% 0 72% 0); transform: translate(-2px, 0); }
  30%  { clip-path: inset(68% 0 12% 0); transform: translate(2px, 0); }
  40%  { clip-path: inset(5%  0 88% 0); transform: translate(-3px, 0); }
  50%  { clip-path: inset(55% 0 28% 0); transform: translate(1px, 0); }
  60%  { clip-path: inset(28% 0 58% 0); transform: translate(-2px, 0); }
  70%  { clip-path: inset(82% 0  3% 0); transform: translate(3px, 0); }
  80%  { clip-path: inset(10% 0 82% 0); transform: translate(-1px, 0); }
  90%  { clip-path: inset(62% 0 22% 0); transform: translate(2px, 0); }
  100% { clip-path: inset(0 0 0 0); transform: translate(0); }
}

@keyframes glitch-2 {
  0%   { clip-path: inset(78% 0  8% 0); transform: translate(2px, 0); }
  15%  { clip-path: inset(18% 0 68% 0); transform: translate(-3px, 0); }
  30%  { clip-path: inset(48% 0 42% 0); transform: translate(1px, 0); }
  45%  { clip-path: inset( 8% 0 88% 0); transform: translate(-2px, 0); }
  60%  { clip-path: inset(72% 0  8% 0); transform: translate(3px, 0); }
  75%  { clip-path: inset(32% 0 58% 0); transform: translate(-1px, 0); }
  90%  { clip-path: inset( 5% 0 92% 0); transform: translate(2px, 0); }
  100% { clip-path: inset(0 0 0 0); transform: translate(0); }
}

/* ── Scan line ── */
@keyframes scan-down {
  0%   { top: 0%;   opacity: 1; }
  80%  { opacity: 0.6; }
  100% { top: 100%; opacity: 0; }
}

/* ── Fade in up ── */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Fade in ── */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Bounce Y (scroll arrow) ── */
@keyframes bounce-y {
  0%, 100% { transform: translateY(0) scaleX(0.3); }
  50%       { transform: translateY(8px) scaleX(0.3); }
}

/* ── Infinite marquee ── */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

/* ── Pulse glow ── */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.15; }
  50%       { opacity: 0.35; }
}

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

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

/* ── Progress bar grow ── */
@keyframes progress-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Hero slide crossfade ── */
@keyframes hero-crossfade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

/* ── Tech line grow ── */
@keyframes line-grow {
  from { width: 0; }
  to   { width: 100%; }
}