/* KEYFRAMES (hors layer) */
@keyframes fade { from {opacity:0} to {opacity:1} }

@keyframes fade-up { from {opacity:0;transform:translateY(18px)} to {opacity:1;transform:translateY(0)} }
@keyframes fade-down { from {opacity:0;transform:translateY(-18px)} to {opacity:1;transform:translateY(0)} }
@keyframes fade-left { from {opacity:0;transform:translateX(18px)} to {opacity:1;transform:translateX(0)} }
@keyframes fade-right { from {opacity:0;transform:translateX(-18px)} to {opacity:1;transform:translateX(0)} }

@keyframes zoom-in { from {opacity:0;transform:scale(.92)} to {opacity:1;transform:scale(1)} }

@keyframes wiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(2deg)} 50%{transform:rotate(-2deg)} 75%{transform:rotate(1deg)} }
@keyframes wiggle-more { 0%,100%{transform:rotate(0)} 20%{transform:rotate(5deg)} 40%{transform:rotate(-5deg)} 60%{transform:rotate(3deg)} 80%{transform:rotate(-3deg)} }

@keyframes shake { 0%,100%{transform:translateX(0)} 10%{transform:translateX(-6px)} 20%{transform:translateX(6px)} 30%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 50%{transform:translateX(-4px)} 60%{transform:translateX(4px)} 70%{transform:translateX(-3px)} 80%{transform:translateX(3px)} 90%{transform:translateX(-2px)} }

@keyframes jump { 0%,100%{transform:translateY(0)} 30%{transform:translateY(-14px)} 60%{transform:translateY(0)} 80%{transform:translateY(-6px)} }
@keyframes jump-in { from{opacity:0;transform:translateY(22px) scale(.98)} 60%{opacity:1;transform:translateY(-6px) scale(1)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes jump-out { from{opacity:1;transform:translateY(0) scale(1)} 40%{opacity:1;transform:translateY(-6px) scale(1)} to{opacity:0;transform:translateY(22px) scale(.98)} }

@keyframes rotate-x { from{opacity:0;transform:rotateX(-70deg)} to{opacity:1;transform:rotateX(0)} }
@keyframes rotate-y { from{opacity:0;transform:rotateY(-70deg)} to{opacity:1;transform:rotateY(0)} }

@keyframes flip-up { from{opacity:0;transform:rotateX(85deg) translateY(6px);transform-origin:bottom} to{opacity:1;transform:rotateX(0) translateY(0);transform-origin:bottom} }
@keyframes flip-down { from{opacity:0;transform:rotateX(-85deg) translateY(-6px);transform-origin:top} to{opacity:1;transform:rotateX(0) translateY(0);transform-origin:top} }


@layer utilities {
  .anim {
    animation-name: var(--a-name);
    animation-duration: var(--a-dur, 800ms);
    animation-timing-function: var(--a-ease, ease-out);
    animation-delay: var(--a-delay, 0ms);
    animation-iteration-count: var(--a-iter, 1);
    animation-fill-mode: var(--a-fill, both);
    transform-origin: var(--a-origin, center);
    will-change: transform, opacity;
    backface-visibility: hidden;
  }

  .anim-3d {
    perspective: var(--a-persp, 800px);
    transform-style: preserve-3d;
  }

  .anim-fade       { --a-name: fade; }
  .anim-fade-down  { --a-name: fade-down; }
  .anim-fade-up    { --a-name: fade-up; }
  .anim-fade-left  { --a-name: fade-left; }
  .anim-fade-right { --a-name: fade-right; }

  .anim-zoom-in    { --a-name: zoom-in; }

  .anim-wiggle      { --a-name: wiggle; }
  .anim-wiggle-more { --a-name: wiggle-more; }
  .anim-shake       { --a-name: shake; }

  .anim-jump     { --a-name: jump; }
  .anim-jump-in  { --a-name: jump-in; }
  .anim-jump-out { --a-name: jump-out; }

  .anim-rotate-x { --a-name: rotate-x; }
  .anim-rotate-y { --a-name: rotate-y; }

  .anim-flip-up   { --a-name: flip-up; }
  .anim-flip-down { --a-name: flip-down; }
}