/* ============================================================
   UTILITIES - Animation states + helper classes

   Animation workflow:
   1. animate.js adds .animate--hidden to every [data-animate] el
   2. IntersectionObserver adds .animate--visible when in view
   3. CSS transitions below handle the visual effect

   To switch to GSAP:
   - Remove the transitions here
   - Replace classList.add('animate--visible') in animate.js
     with gsap.to(el, { opacity: 1, y: 0, ... })
   - data-animate-delay values are already parsed in animate.js
   ============================================================ */

/* Scroll-reveal states — default: fade up */
.animate--hidden {
  opacity: 0;
  transform: translateY(20px);
  /* No transition here — browsers use the AFTER-change style to decide
     whether to animate. Transition lives on .animate--visible so it is
     present when the class is added and the animation fires. */
}

.animate--visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity   var(--duration-slower) var(--ease-out),
    transform var(--duration-slower) var(--ease-out);
}

/* Left-slide variant — applied via data-animate-from="left" */
[data-animate-from="left"].animate--hidden {
  transform: translateX(-36px);
}

[data-animate-from="left"].animate--visible {
  transform: translateX(0);
}

/* Respect the OS reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .animate--hidden {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ============================================================
   Accessibility helpers
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   Quick layout helpers (use sparingly)
   ============================================================ */

.text-center   { text-align: center; }
.text-muted    { color: var(--color-text-muted); }

.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; justify-content: center; }