/* Scroll reveal animation. Graceful: .anim-hidden only applied when JS
   marks the body anim-ready, so content is visible without JS. */
/* IMPORTANT: the global reduced-motion rule in style.css sets
   transition:none!important on * — that would freeze reveals at opacity 0.
   This demo always animates; re-enable transitions explicitly. */
@media (prefers-reduced-motion: reduce){
  body.anim-ready [data-anim],body.anim-ready .anim-el{transition:opacity .6s ease,transform .6s cubic-bezier(.16,.84,.28,1)!important;scroll-behavior:auto!important}
}
body.anim-ready [data-anim].anim-hidden{opacity:0;transform:translateY(46px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,.84,.28,1)}
body.anim-ready [data-anim].anim-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.16,.84,.28,1)}
body.anim-ready [data-anim="side"].anim-hidden{transform:translateX(-42px)}
body.anim-ready [data-anim="side"].anim-in{transform:none}
/* Inner elements (cards, columns) with stagger */
body.anim-ready .anim-el{transition:opacity .55s ease,transform .55s cubic-bezier(.16,.84,.28,1)}
body.anim-ready .anim-el.anim-hidden{opacity:0;transform:translateY(34px)}
body.anim-ready .anim-el.anim-in{opacity:1;transform:none}
body.anim-ready .memory-card.anim-el{will-change:transform}