/* ============================================================
   Animations — entry choreography, transitions
   Uses only transform + opacity (no layout properties)
   ============================================================ */

/* ── Page load entry animation ───────────────────────────── */
@keyframes entry-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Header animation ─────────────────────────────────────── */
.site-header {
  animation: fade-in 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.filter-bar {
  animation: fade-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

.project-count {
  animation: fade-in 300ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
}

/* ── Filter tab indicator ────────────────────────────────── */
.filter-tab::after {
  /* Defined in style.css; animation handled via transform:scaleX */
}

/* ── Reduced-motion fallback ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .project-entry {
    animation: fade-in 200ms ease both !important;
    animation-delay: 0ms !important;
  }
  .site-header,
  .filter-bar,
  .project-count {
    animation: none;
    opacity: 1;
  }
  .entry-image {
    filter: saturate(1) brightness(1) !important;
    transform: none !important;
  }
  .entry-details {
    /* Keep expansion functional but instant */
    transition: none;
  }
}