/* ============================================================
   animations.css — Keyframes & Transitions
   All animation definitions in one place.
   ============================================================ */

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(57, 255, 131, 0.4);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 0 4px rgba(57, 255, 131, 0);
  }
}

@keyframes terminal-boot {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes glow-pulse-green {
  0%, 100% {
    text-shadow: 0 0 4px rgba(57, 255, 131, 0.3);
    color: var(--color-green);
  }
  50% {
    text-shadow: 0 0 14px rgba(57, 255, 131, 0.7), 0 0 28px rgba(57, 255, 131, 0.25);
    color: #7fffb2;
  }
}

@keyframes pipeline-flow {
  0%, 100% { opacity: 0.35; color: var(--color-green-dim); }
  50%       { opacity: 1;    color: var(--color-green); }
}

@keyframes timeline-dot-glow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(57, 255, 131, 0.4);
  }
  50% {
    box-shadow: 0 0 18px rgba(57, 255, 131, 0.8), 0 0 30px rgba(57, 255, 131, 0.2);
  }
}

/* ── Cursor blink ── */
.terminal__cursor {
  animation: blink 1s step-end infinite;
}

/* ── Terminal boot ── */
.terminal {
  animation: terminal-boot 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ── Terminal lines (JS-driven via .is-visible) ── */
.terminal__line.is-visible,
.terminal__output.is-visible {
  animation: fadeIn 0.15s ease forwards;
}

/* ── Section reveal on scroll — more dramatic ── */
.section {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
}

.section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Skill cards stagger ── */
.skill-card {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    background var(--transition-normal),
    box-shadow var(--transition-normal);
}

.skill-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.skill-card:nth-child(1) { transition-delay: 0ms; }
.skill-card:nth-child(2) { transition-delay: 60ms; }
.skill-card:nth-child(3) { transition-delay: 120ms; }
.skill-card:nth-child(4) { transition-delay: 180ms; }
.skill-card:nth-child(5) { transition-delay: 240ms; }
.skill-card:nth-child(6) { transition-delay: 300ms; }

/* ── Cloud cards stagger ── */
.cloud-card {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    background var(--transition-normal);
}

.cloud-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cloud-card:nth-child(1) { transition-delay: 0ms; }
.cloud-card:nth-child(2) { transition-delay: 80ms; }
.cloud-card:nth-child(3) { transition-delay: 160ms; }

/* ── Timeline items stagger ── */
.timeline__item {
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.timeline__item.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.timeline__item:nth-child(1) { transition-delay: 0ms; }
.timeline__item:nth-child(2) { transition-delay: 100ms; }
.timeline__item:nth-child(3) { transition-delay: 200ms; }

/* ── Timeline active dot ── */
.timeline__item--active::before {
  animation: timeline-dot-glow 2.5s ease-in-out infinite;
}

/* ── Section header ## prefix glow ── */
.section__header::before {
  animation: glow-pulse-green 4s ease-in-out infinite;
}

/* ── Pipeline arrows flow ── */
.pipeline__arrow {
  animation: pipeline-flow 2s ease-in-out infinite;
}

.pipeline__step:nth-child(1) .pipeline__arrow { animation-delay: 0ms; }
.pipeline__step:nth-child(2) .pipeline__arrow { animation-delay: 250ms; }
.pipeline__step:nth-child(3) .pipeline__arrow { animation-delay: 500ms; }
.pipeline__step:nth-child(4) .pipeline__arrow { animation-delay: 750ms; }
.pipeline__step:nth-child(5) .pipeline__arrow { animation-delay: 1000ms; }
.pipeline__step:nth-child(6) .pipeline__arrow { animation-delay: 1250ms; }

/* ── Topbar ── */
.topbar {
  animation: fadeIn 0.6s ease forwards;
}