/* Base */
.anim {
  animation-name: var(--a-name, a-fade);
  animation-duration: var(--a-dur, .4s);
  animation-timing-function: var(--a-ease, cubic-bezier(.25, .1, .25, 1));
  animation-fill-mode: var(--a-fill, both);
  animation-direction: var(--a-dir, normal);
}

/* effect */
.a-sharp     { --a-ease: cubic-bezier(.16, 1, .3, 1); }
.a-subtle { --a-ease: cubic-bezier(.22, 1, .36, 1); }
.a-gentle   { --a-ease: cubic-bezier(.25, .1, .25, 1); }
.a-dramatic     { --a-ease: cubic-bezier(.19, 1, .22, 1); }

/* durations */
.t-1  { --a-dur: .1s; }
.t-2  { --a-dur: .2s; }
.t-3  { --a-dur: .3s; }
.t-4  { --a-dur: .4s; }
.t-5  { --a-dur: .5s; }
.t-6  { --a-dur: .6s; }
.t-7  { --a-dur: .7s; }
.t-8  { --a-dur: .8s; }
.t-9  { --a-dur: .9s; }
.t-10 { --a-dur: 1s; }
.t-11 { --a-dur: 1.1s; }
.t-12 { --a-dur: 1.2s; }
.t-13 { --a-dur: 1.3s; }
.t-14 { --a-dur: 1.4s; }
.t-15 { --a-dur: 1.5s; }
.t-16 { --a-dur: 1.6s; }
.t-17 { --a-dur: 1.7s; }
.t-18 { --a-dur: 1.8s; }
.t-19 { --a-dur: 1.9s; }
.t-20 { --a-dur: 2s; }

/* names (map to keyframes below) */
.a-fade       { --a-name: a-fade; }
.a-down       { --a-name: a-down; }
.a-blur       { --a-name: a-blur; }
.a-scale      { --a-name: a-scale; }
.a-fade-out   { --a-name: a-fade-out; }
.a-down-out   { --a-name: a-down-out; }
.a-blur-out   { --a-name: a-blur-out; }
.a-scale-out  { --a-name: a-scale-out; }
.a-shake      { --a-name: a-shake; }
.a-growY      { --a-name: a-growY; }
.a-shrinkY      { --a-name: a-shrinkY; }

/* reverse */
.rev { --a-dir: reverse; }

/* animations */
@keyframes a-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes a-down {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes a-blur {
  from { opacity: 0; filter: blur(6px); }
  to   { opacity: 1; filter: blur(0); }
}

@keyframes a-scale {
  from { opacity: 0; transform: scale(.98); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes a-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes a-down-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(30px); } /* move down while fading out */
}
@keyframes a-blur-out {
  from { opacity: 1; filter: blur(0); }
  to   { opacity: 0; filter: blur(6px); }
}

@keyframes a-scale-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.05); }
}

@keyframes a-shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
  0% {
    transform: translateX(0);
  }
}

@keyframes a-growY {
  from  { height: 0px; }
  to    { height: fit-content; }
}

@keyframes a-shrinkY {
  from  { height: fit-content; }
  to    { height: 0px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .anim { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}