/* ============================================================
   about-animations.css — Keyframes and animation utilities
   Tech Cartographer About Page
   ============================================================ */

/* ── Name Glitch Effect ───────────────────────────────────── */
@keyframes glitch-clip-1 {
  0%   { clip-path: inset(40% 0 61% 0); transform: translate(-3px, 0); }
  10%  { clip-path: inset(92% 0 1% 0);  transform: translate(3px, 0); }
  20%  { clip-path: inset(43% 0 1% 0);  transform: translate(0, 0); }
  30%  { clip-path: inset(25% 0 58% 0); transform: translate(3px, 0); }
  40%  { clip-path: inset(54% 0 7% 0);  transform: translate(-3px, 0); }
  50%  { clip-path: inset(58% 0 43% 0); transform: translate(0, 0); }
  60%  { clip-path: inset(12% 0 82% 0); transform: translate(-3px, 0); }
  70%  { clip-path: inset(70% 0 12% 0); transform: translate(3px, 0); }
  80%  { clip-path: inset(30% 0 50% 0); transform: translate(0, 0); }
  90%  { clip-path: inset(65% 0 25% 0); transform: translate(3px, 0); }
  100% { clip-path: inset(40% 0 61% 0); transform: translate(-3px, 0); }
}

@keyframes glitch-clip-2 {
  0%   { clip-path: inset(24% 0 29% 0); transform: translate(3px, 0); }
  10%  { clip-path: inset(54% 0 7% 0);  transform: translate(-3px, 0); }
  20%  { clip-path: inset(73% 0 6% 0);  transform: translate(0, 0); }
  30%  { clip-path: inset(8% 0 91% 0);  transform: translate(-3px, 0); }
  40%  { clip-path: inset(38% 0 54% 0); transform: translate(3px, 0); }
  50%  { clip-path: inset(82% 0 3% 0);  transform: translate(0, 0); }
  60%  { clip-path: inset(19% 0 77% 0); transform: translate(3px, 0); }
  70%  { clip-path: inset(45% 0 39% 0); transform: translate(-3px, 0); }
  80%  { clip-path: inset(62% 0 32% 0); transform: translate(0, 0); }
  90%  { clip-path: inset(15% 0 68% 0); transform: translate(-3px, 0); }
  100% { clip-path: inset(24% 0 29% 0); transform: translate(3px, 0); }
}

/* ── Glow Pulse ───────────────────────────────────────────── */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 6px var(--color-glow-cyan), 0 0 12px var(--color-glow-cyan);
  }
  50% {
    box-shadow: 0 0 16px var(--color-glow-cyan-md), 0 0 32px var(--color-glow-cyan-md), 0 0 48px var(--color-glow-cyan);
  }
}

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

/* ── Timeline Draw ────────────────────────────────────────── */
@keyframes draw-timeline-line {
  from { height: 0; }
  to   { height: 100%; }
}

/* ── Timeline Node Pulse ──────────────────────────────────── */
@keyframes node-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 hsla(200, 80%, 60%, 0.6),
                0 0 8px var(--color-glow-cyan);
  }
  50% {
    box-shadow: 0 0 0 8px hsla(200, 80%, 60%, 0),
                0 0 20px var(--color-glow-cyan-md);
  }
}

/* ── Card Entrance ────────────────────────────────────────── */
@keyframes card-enter {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

/* ── Progress Bar Fill ────────────────────────────────────── */
@keyframes progress-fill {
  from { width: 0%; }
  to   { width: var(--progress-target); }
}

/* ── Hero Name Reveal ─────────────────────────────────────── */
@keyframes hero-name-reveal {
  from {
    opacity: 0;
    transform: translateY(20px);
    letter-spacing: 0.15em;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: -0.01em;
  }
}

/* ── Section Title Underline ──────────────────────────────── */
@keyframes expandLine {
  from { width: 0; }
  to   { width: 100%; }
}

/* ── View Transitions ─────────────────────────────────────── */
@keyframes viewEnter {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Utility Classes ──────────────────────────────────────── */
.animate-fade-in-up  { animation: fade-in-up 0.6s ease forwards; }
.animate-glow-pulse  { animation: glow-pulse 2.5s ease-in-out infinite; }

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }