/* MTB Frame — entrance animations.
 * Pre-state hides/transforms the block; .is-in (added by frame-anim.js
 * when the IntersectionObserver fires) animates to the resting state.
 * Per-instance transition-duration / -delay / -timing-function are
 * written inline by the runtime from data-frame-anim-{dur,delay,ease}.
 */

[data-frame-anim]{
  transition:
    opacity   700ms cubic-bezier(.2,.7,.2,1),
    transform 700ms cubic-bezier(.2,.7,.2,1),
    filter    700ms cubic-bezier(.2,.7,.2,1),
    clip-path 700ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform, filter, clip-path;
}

/* ── Fades ─ */
[data-frame-anim="fade"]            { opacity: 0; }
[data-frame-anim="fade-in"]         { 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); }

/* ── Slides — bigger distance than fades */
[data-frame-anim="slide-up"]        { opacity: 0; transform: translateY(60px); }
[data-frame-anim="slide-down"]      { opacity: 0; transform: translateY(-60px); }
[data-frame-anim="slide-left"]      { opacity: 0; transform: translateX(60px); }
[data-frame-anim="slide-right"]     { opacity: 0; transform: translateX(-60px); }

/* ── Scale / zoom ─ */
[data-frame-anim="zoom-in"]         { opacity: 0; transform: scale(0.94); }
[data-frame-anim="zoom-out"]        { opacity: 0; transform: scale(1.10); }
[data-frame-anim="scale-in"]        { opacity: 0; transform: scale(0.86); }
[data-frame-anim="pop"]             { opacity: 0; transform: scale(0.7); }
[data-frame-anim="pop"].is-in       { transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ── Blur up — filter-based ─ */
[data-frame-anim="blur-up"]         { opacity: 0; filter: blur(14px); transform: translateY(12px); }

/* ── Mask reveal — clip-path based, no opacity dip */
[data-frame-anim="mask-up"]         { clip-path: inset(100% 0 0 0); }
[data-frame-anim="mask-down"]       { clip-path: inset(0 0 100% 0); }
[data-frame-anim="mask-left"]       { clip-path: inset(0 100% 0 0); }
[data-frame-anim="mask-right"]      { clip-path: inset(0 0 0 100%); }
[data-frame-anim^="mask-"].is-in    { clip-path: inset(0 0 0 0); }

/* ── Rotate / flip ─ */
[data-frame-anim="rotate-in"]       { opacity: 0; transform: rotate(-4deg) translateY(20px); transform-origin: center; }
[data-frame-anim="flip-x"]          { opacity: 0; transform: perspective(800px) rotateX(20deg); transform-origin: center top; }
[data-frame-anim="flip-y"]          { opacity: 0; transform: perspective(800px) rotateY(20deg); transform-origin: left center; }

/* ── Composed — lift + settle ─ */
[data-frame-anim="lift"]            { opacity: 0; transform: translateY(16px); }
[data-frame-anim="lift"].is-in      { transform: translateY(0); box-shadow: 0 12px 28px -12px rgba(0,0,0,0.35); }
[data-frame-anim="settle"]          { opacity: 0; transform: translateY(-30px) scale(0.96); }
[data-frame-anim="settle"].is-in    { transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Universal resting state — opacity full, transforms cleared. */
[data-frame-anim].is-in{
  opacity: 1;
  transform: none;
  filter: none;
}

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