/* =========================================================================
   AI OPERATORS — SIGNATURE MOTION GRAMMAR v1.0
   Two motions, used everywhere. Recognition through repetition.
   - .aio-reveal      — single element entering viewport
   - .aio-assemble    — parent that staggers .aio-reveal children by 80ms
   Honors prefers-reduced-motion: all motion suppressed, content shown.
   ========================================================================= */

/* JS will toggle [data-active="true"] when the element enters the viewport
   via IntersectionObserver. The CSS handles the rest.
*/

.aio-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   var(--dur-slow, 320ms) var(--ease-precision, cubic-bezier(0.2, 0.8, 0.2, 1)),
    transform var(--dur-slow, 320ms) var(--ease-precision, cubic-bezier(0.2, 0.8, 0.2, 1));
  will-change: opacity, transform;
}
.aio-reveal[data-active="true"] {
  opacity: 1;
  transform: none;
}

/* Children of .aio-assemble inherit .aio-reveal behavior with staggered delays.
   Stagger is 80ms per child. Cap at child 12 to avoid runaway delays on long lists.
*/
.aio-assemble > .aio-reveal {
  transition-delay: 0ms;
}
.aio-assemble > .aio-reveal:nth-child(1)  { transition-delay:   0ms; }
.aio-assemble > .aio-reveal:nth-child(2)  { transition-delay:  80ms; }
.aio-assemble > .aio-reveal:nth-child(3)  { transition-delay: 160ms; }
.aio-assemble > .aio-reveal:nth-child(4)  { transition-delay: 240ms; }
.aio-assemble > .aio-reveal:nth-child(5)  { transition-delay: 320ms; }
.aio-assemble > .aio-reveal:nth-child(6)  { transition-delay: 400ms; }
.aio-assemble > .aio-reveal:nth-child(7)  { transition-delay: 480ms; }
.aio-assemble > .aio-reveal:nth-child(8)  { transition-delay: 560ms; }
.aio-assemble > .aio-reveal:nth-child(9)  { transition-delay: 640ms; }
.aio-assemble > .aio-reveal:nth-child(10) { transition-delay: 720ms; }
.aio-assemble > .aio-reveal:nth-child(11) { transition-delay: 800ms; }
.aio-assemble > .aio-reveal:nth-child(12) { transition-delay: 880ms; }

/* Reduced-motion: render everything in final state, no transitions. */
@media (prefers-reduced-motion: reduce) {
  .aio-reveal,
  .aio-assemble > .aio-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0ms !important;
  }
}
