/* ============================================
   NEURABRIDGE.AI — Animations
   ============================================ */

/* ── Fade-in on scroll ───────────────────── */

[data-fade] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

[data-fade].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Staggered children ──────────────────── */

[data-fade-children] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

[data-fade-children].is-visible > *:nth-child(1) { transition-delay: 0ms;   opacity: 1; transform: none; }
[data-fade-children].is-visible > *:nth-child(2) { transition-delay: 80ms;  opacity: 1; transform: none; }
[data-fade-children].is-visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: none; }
[data-fade-children].is-visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: none; }
[data-fade-children].is-visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: none; }
[data-fade-children].is-visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: none; }

/* ── Nav active link ─────────────────────── */

.nav__links a.is-active {
  color: var(--color-text-primary);
  font-weight: 500;
}

/* ── Button hover arrow nudge ────────────── */

.btn--primary:hover,
.btn--ghost:hover {
  letter-spacing: 0.01em;
}

/* ── Service card hover line ─────────────── */

.service-card {
  position: relative;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.service-card:hover::before {
  transform: scaleX(1);
}

/* ── Phil card hover ─────────────────────── */

.phil-card {
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.phil-card:hover {
  transform: translateY(-2px);
}

/* ── Respect reduced motion ──────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-fade],
  [data-fade-children] > *,
  .phil-card,
  .service-card::before,
  .btn {
    transition: none !important;
    animation: none !important;
  }

  [data-fade] { opacity: 1; transform: none; }
  [data-fade-children] > * { opacity: 1; transform: none; }
}