/* =============================================================================
 * loom hair space — animations.css
 * Reveal states for IntersectionObserver. Quiet, no big swings.
 * ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 1.05s var(--ease-out),
    transform 1.05s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slightly faster, larger move for cards inside a grid */
.values__card[data-reveal] {
  transition-duration: 0.85s;
}

/* Hero is visible immediately; don't let the reveal hide it */
.hero[data-reveal] {
  opacity: 1;
  transform: none;
}

/* Gold rule draw-in on enter */
.rule {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.9s var(--ease-out) 0.15s;
}
[data-reveal].is-visible .rule,
.hero .rule {
  transform: scaleX(1);
}