/* ── KEYFRAMES ────────────────────────────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

@keyframes gear-cw {
  to { transform: rotate(360deg); }
}

@keyframes gear-ccw {
  to { transform: rotate(-360deg); }
}

@keyframes scrollLine {
  0%, 100% {
    transform: scaleY(1);
    opacity: 0.5;
  }
  50% {
    transform: scaleY(0.4);
    opacity: 1;
  }
}

/* ── HERO ANIMATIONS ──────────────────────────────────────── */
.hero-eyebrow {
  opacity: 0;
  animation: fadeUp 0.6s ease 0.1s forwards;
}

h1.hero-name {
  opacity: 0;
  animation: fadeUp 0.6s ease 0.2s forwards;
}


.hero-currently-building {
  opacity: 0;
  animation: fadeUp 0.6s ease 0.35s forwards;
}

.hero-desc {
  opacity: 0;
  animation: fadeUp 0.6s ease 0.4s forwards;
}

.hero-ctas {
  opacity: 0;
  animation: fadeUp 0.6s ease 0.5s forwards;
}

.scroll-cue {
  opacity: 0;
  animation: fadeUp 0.6s ease 1s forwards;
}

.scroll-cue-line {
  animation: scrollLine 1.8s ease-in-out infinite;
}

/* ── GEAR ANIMATIONS ──────────────────────────────────────── */
.nav-logo:hover .logo-gear:first-child {
  animation: gear-cw 1.2s linear infinite;
}

.nav-logo:hover .logo-gear-2 {
  animation: gear-ccw 0.9s linear infinite;
}

/* ── BLINK ANIMATIONS ─────────────────────────────────────── */
.exp-dot-current {
  animation: blink 2.5s ease-in-out infinite;
}

.avail-dot,
.currently-building .pulse,
.hcb-pulse {
  animation: blink 2.5s ease-in-out infinite;
}

/* ── SCROLL FADE-UP ───────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── PROJECT CARD SLIDE-IN ────────────────────────────────── */
.project-card {
  opacity: 0;
  transform: translateX(18px);
  transition: opacity 0.5s ease, transform 0.5s ease, border-color var(--transition-base);
}

.project-card.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── PREFERS-REDUCED-MOTION ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── TYPEWRITER CURSOR ────────────────────────────────────── */
.typewriter-cursor::after {
  content: '|';
  color: var(--accent);
  animation: blink 1s step-end infinite;
  margin-left: 2px;
  font-weight: 300;
}