/* MTB Frame — entrance animations.
 * Pre-state hides the block; .is-in is added when the observer fires.
 */
[data-frame-anim]{
  transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
[data-frame-anim="fade"]            { opacity: 0; }
[data-frame-anim="fade-up"]         { opacity: 0; transform: translateY(28px); }
[data-frame-anim="fade-down"]       { opacity: 0; transform: translateY(-28px); }
[data-frame-anim="fade-left"]       { opacity: 0; transform: translateX(28px); }
[data-frame-anim="fade-right"]      { opacity: 0; transform: translateX(-28px); }
[data-frame-anim="zoom-in"]         { opacity: 0; transform: scale(0.94); }
[data-frame-anim="zoom-out"]        { opacity: 0; transform: scale(1.06); }
[data-frame-anim="slide-up"]        { opacity: 0; transform: translateY(60px); }

[data-frame-anim].is-in{
  opacity: 1;
  transform: none;
}

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
  [data-frame-anim]{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}