/* ============================================================
   INDIVIDUATION — motion
   AOS-compatible scroll reveal, driven by components/MotionProvider.tsx.
   Write markup exactly as you would with AOS:
     data-aos="fade-up" data-aos-delay="120" data-aos-duration="700"

   Every hiding rule is gated behind html[data-js], which an inline script in
   the document head sets. No JS (disabled, failed, or still loading) means
   nothing is ever hidden — content cannot be lost.

   Not supported on purpose: data-aos-once="false" (re-animating on scroll-back
   is what makes AOS sites feel cheap — reveals here are always one-shot).
   ============================================================ */

html[data-js] [data-aos] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 700ms;
  transition-timing-function: var(--ease-out);
}

/* Must out-rank the html[data-js] hiding rule above (0,3,1 vs 0,2,1) —
   without the html[data-js] prefix here the hidden state wins and revealed
   content stays invisible. */
html[data-js] [data-aos].aos-animate,
[data-aos].aos-animate {
  opacity: 1;
  transform: none;
}

/* ---- animations ---- */
html[data-js] [data-aos="fade"]        { transform: none; }
html[data-js] [data-aos="fade-up"]     { transform: translateY(28px); }
html[data-js] [data-aos="fade-down"]   { transform: translateY(-28px); }
html[data-js] [data-aos="fade-left"]   { transform: translateX(36px); }   /* enters from the right */
html[data-js] [data-aos="fade-right"]  { transform: translateX(-36px); }  /* enters from the left  */
html[data-js] [data-aos="slide-up"]    { transform: translateY(64px); }
html[data-js] [data-aos="slide-down"]  { transform: translateY(-64px); }
html[data-js] [data-aos="zoom-in"]     { transform: scale(0.94); }
html[data-js] [data-aos="zoom-in-up"]  { transform: translateY(28px) scale(0.94); }
html[data-js] [data-aos="zoom-out"]    { transform: scale(1.06); }
html[data-js] [data-aos="flip-up"]     { transform: perspective(1000px) rotateX(-12deg); transform-origin: bottom; }
html[data-js] [data-aos="flip-left"]   { transform: perspective(1000px) rotateY(12deg); }

/* ---- safety: never leave content invisible ---- */
@media (prefers-reduced-motion: reduce) {
  html[data-js] [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}