/**
 * PURIVOM — ANIMATION FOUNDATION
 * Architecture for future motion. Utility classes are defined now so
 * later phases can opt elements in via a data attribute + IntersectionObserver
 * (see assets/js/animations.js). No large-scale motion is wired up yet.
 *
 * Every rule here respects prefers-reduced-motion, either via the token-level
 * duration override in tokens.css or explicit checks below.
 */

/* ---------------------------------------------------------------------
   REVEAL-ON-SCROLL (opt-in via [data-pv-animate])
   Elements start hidden/offset, then a "is-visible" class (added by JS
   once intersecting) triggers the transition to their resting state.
   --------------------------------------------------------------------- */

[data-pv-animate] {
  transition-duration: var(--pv-duration-reveal);
  transition-timing-function: var(--pv-ease-standard);
}

[data-pv-animate="fade"] {
  opacity: 0;
  transition-property: opacity;
}

[data-pv-animate="fade"].is-visible {
  opacity: 1;
}

[data-pv-animate="slide-up"] {
  opacity: 0;
  transform: translateY(24px);
  transition-property: opacity, transform;
}

[data-pv-animate="slide-up"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-pv-animate="slide-left"] {
  opacity: 0;
  transform: translateX(24px);
  transition-property: opacity, transform;
}

[data-pv-animate="slide-left"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

[data-pv-animate="scale"] {
  opacity: 0;
  transform: scale(0.96);
  transition-property: opacity, transform;
}

[data-pv-animate="scale"].is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children via inline --pv-delay custom property set by JS/PHP */
[data-pv-animate] {
  transition-delay: var(--pv-delay, 0ms);
}

/* ---------------------------------------------------------------------
   HOVER MICRO-INTERACTIONS
   --------------------------------------------------------------------- */

.pv-hover-lift {
  transition: transform var(--pv-duration-base) var(--pv-ease-standard);
}

.pv-hover-lift:hover {
  transform: translateY(-4px);
}

/* ---------------------------------------------------------------------
   REDUCED MOTION — disable reveal transforms entirely, content just shows
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  [data-pv-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .pv-hover-lift:hover {
    transform: none;
  }
}