@animxyz/core/dist/animxyz.css

AnimXYZ is a composable animation library that makes your site shine

@-webkit-keyframes xyz-in-keyframes {
  from {
    opacity: var(--xyz-in-opacity, var(--xyz-opacity, 1));
    transform: var(--xyz-in-transform, var(--xyz-transform, perspective(var(--xyz-in-perspective, var(--xyz-perspective, var(--xyz-perspective-none)))) translate3d(var(--xyz-in-translate-x, var(--xyz-translate-x, 0)), var(--xyz-in-translate-y, var(--xyz-translate-y, 0)), var(--xyz-in-translate-z, var(--xyz-translate-z, 0))) rotateX(var(--xyz-in-rotate-x, var(--xyz-rotate-x, 0))) rotateY(var(--xyz-in-rotate-y, var(--xyz-rotate-y, 0))) rotateZ(var(--xyz-in-rotate-z, var(--xyz-rotate-z, 0))) scale3d(var(--xyz-in-scale-x, var(--xyz-scale-x, 1)), var(--xyz-in-scale-y, var(--xyz-scale-y, 1)), var(--xyz-in-scale-z, var(--xyz-scale-z, 1))) skew(var(--xyz-in-skew-x, var(--xyz-skew-x, 0)), var(--xyz-in-skew-y, var(--xyz-skew-y, 0)))));
  }
}
@keyframes xyz-in-keyframes {
  from {
    opacity: var(--xyz-in-opacity, var(--xyz-opacity, 1));
    transform: var(--xyz-in-transform, var(--xyz-transform, perspective(var(--xyz-in-perspective, var(--xyz-perspective, var(--xyz-perspective-none)))) translate3d(var(--xyz-in-translate-x, var(--xyz-translate-x, 0)), var(--xyz-in-translate-y, var(--xyz-translate-y, 0)), var(--xyz-in-translate-z, var(--xyz-translate-z, 0))) rotateX(var(--xyz-in-rotate-x, var(--xyz-rotate-x, 0))) rotateY(var(--xyz-in-rotate-y, var(--xyz-rotate-y, 0))) rotateZ(var(--xyz-in-rotate-z, var(--xyz-rotate-z, 0))) scale3d(var(--xyz-in-scale-x, var(--xyz-scale-x, 1)), var(--xyz-in-scale-y, var(--xyz-scale-y, 1)), var(--xyz-in-scale-z, var(--xyz-scale-z, 1))) skew(var(--xyz-in-skew-x, var(--xyz-skew-x, 0)), var(--xyz-in-skew-y, var(--xyz-skew-y, 0)))));
  }
}
@-webkit-keyframes xyz-out-keyframes {
  from {
    opacity: var(--xyz-out-opacity, var(--xyz-opacity, 1));
    transform: var(--xyz-out-transform, var(--xyz-transform, perspective(var(--xyz-out-perspective, var(--xyz-perspective, var(--xyz-perspective-none)))) translate3d(var(--xyz-out-translate-x, var(--xyz-translate-x, 0)), var(--xyz-out-translate-y, var(--xyz-translate-y, 0)), var(--xyz-out-translate-z, var(--xyz-translate-z, 0))) rotateX(var(--xyz-out-rotate-x, var(--xyz-rotate-x, 0))) rotateY(var(--xyz-out-rotate-y, var(--xyz-rotate-y, 0))) rotateZ(var(--xyz-out-rotate-z, var(--xyz-rotate-z, 0))) scale3d(var(--xyz-out-scale-x, var(--xyz-scale-x, 1)), var(--xyz-out-scale-y, var(--xyz-scale-y, 1)), var(--xyz-out-scale-z, var(--xyz-scale-z, 1))) skew(var(--xyz-out-skew-x, var(--xyz-skew-x, 0)), var(--xyz-out-skew-y, var(--xyz-skew-y, 0)))));
  }
}
@keyframes xyz-out-keyframes {
  from {
    opacity: var(--xyz-out-opacity, var(--xyz-opacity, 1));
    transform: var(--xyz-out-transform, var(--xyz-transform, perspective(var(--xyz-out-perspective, var(--xyz-perspective, var(--xyz-perspective-none)))) translate3d(var(--xyz-out-translate-x, var(--xyz-translate-x, 0)), var(--xyz-out-translate-y, var(--xyz-translate-y, 0)), var(--xyz-out-translate-z, var(--xyz-translate-z, 0))) rotateX(var(--xyz-out-rotate-x, var(--xyz-rotate-x, 0))) rotateY(var(--xyz-out-rotate-y, var(--xyz-rotate-y, 0))) rotateZ(var(--xyz-out-rotate-z, var(--xyz-rotate-z, 0))) scale3d(var(--xyz-out-scale-x, var(--xyz-scale-x, 1)), var(--xyz-out-scale-y, var(--xyz-scale-y, 1)), var(--xyz-out-scale-z, var(--xyz-scale-z, 1))) skew(var(--xyz-out-skew-x, var(--xyz-skew-x, 0)), var(--xyz-out-skew-y, var(--xyz-skew-y, 0)))));
  }
}
@-webkit-keyframes xyz-appear-keyframes {
  from {
    opacity: var(--xyz-appear-opacity, var(--xyz-opacity, 1));
    transform: var(--xyz-appear-transform, var(--xyz-transform, perspective(var(--xyz-appear-perspective, var(--xyz-perspective, var(--xyz-perspective-none)))) translate3d(var(--xyz-appear-translate-x, var(--xyz-translate-x, 0)), var(--xyz-appear-translate-y, var(--xyz-translate-y, 0)), var(--xyz-appear-translate-z, var(--xyz-translate-z, 0))) rotateX(var(--xyz-appear-rotate-x, var(--xyz-rotate-x, 0))) rotateY(var(--xyz-appear-rotate-y, var(--xyz-rotate-y, 0))) rotateZ(var(--xyz-appear-rotate-z, var(--xyz-rotate-z, 0))) scale3d(var(--xyz-appear-scale-x, var(--xyz-scale-x, 1)), var(--xyz-appear-scale-y, var(--xyz-scale-y, 1)), var(--xyz-appear-scale-z, var(--xyz-scale-z, 1))) skew(var(--xyz-appear-skew-x, var(--xyz-skew-x, 0)), var(--xyz-appear-skew-y, var(--xyz-skew-y, 0)))));
  }
}
@keyframes xyz-appear-keyframes {
  from {
    opacity: var(--xyz-appear-opacity, var(--xyz-opacity, 1));
    transform: var(--xyz-appear-transform, var(--xyz-transform, perspective(var(--xyz-appear-perspective, var(--xyz-perspective, var(--xyz-perspective-none)))) translate3d(var(--xyz-appear-translate-x, var(--xyz-translate-x, 0)), var(--xyz-appear-translate-y, var(--xyz-translate-y, 0)), var(--xyz-appear-translate-z, var(--xyz-translate-z, 0))) rotateX(var(--xyz-appear-rotate-x, var(--xyz-rotate-x, 0))) rotateY(var(--xyz-appear-rotate-y, var(--xyz-rotate-y, 0))) rotateZ(var(--xyz-appear-rotate-z, var(--xyz-rotate-z, 0))) scale3d(var(--xyz-appear-scale-x, var(--xyz-scale-x, 1)), var(--xyz-appear-scale-y, var(--xyz-scale-y, 1)), var(--xyz-appear-scale-z, var(--xyz-scale-z, 1))) skew(var(--xyz-appear-skew-x, var(--xyz-skew-x, 0)), var(--xyz-appear-skew-y, var(--xyz-skew-y, 0)))));
  }
}
:root {
  --xyz-perspective-none: 0;
  --xyz-keyframes-default: none;
  --xyz-ease-default: ease;
  --xyz-duration-default: 0.5s;
  --xyz-delay-default: 0s;
  --xyz-stagger-default: 0.25s;
  --xyz-iterate-default: 1;
  --xyz-direction-default: normal;
  --xyz-out-direction-default: reverse;
  --xyz-origin-default: center;
  --xyz-opacity-default: 1;
  --xyz-perspective-default: var(--xyz-perspective-none);
  --xyz-translate-default: 25%;
  --xyz-translate-z-default: 300px;
  --xyz-rotate-default: 0.25turn;
  --xyz-scale-default: 0.5;
  --xyz-skew-default: 30deg;
}
@supports (transform: perspective(none)) {
  :root {
    --xyz-perspective-none: none;
  }
}

.xyz-nested:nth-child(1), .xyz-appear-nested:nth-child(1), .xyz-out-nested:nth-child(1), .xyz-in-nested:nth-child(1), .xyz-appear:nth-child(1), .xyz-out:nth-child(1), .xyz-in:nth-child(1) {
  --xyz-index: 0;
}
.xyz-nested:nth-last-child(1), .xyz-appear-nested:nth-last-child(1), .xyz-out-nested:nth-last-child(1), .xyz-in-nested:nth-last-child(1), .xyz-appear:nth-last-child(1), .xyz-out:nth-last-child(1), .xyz-in:nth-last-child(1) {
  --xyz-index-rev: 0;
}
.xyz-nested:nth-child(2), .xyz-appear-nested:nth-child(2), .xyz-out-nested:nth-child(2), .xyz-in-nested:nth-child(2), .xyz-appear:nth-child(2), .xyz-out:nth-child(2), .xyz-in:nth-child(2) {
  --xyz-index: 1;
}
.xyz-nested:nth-last-child(2), .xyz-appear-nested:nth-last-child(2), .xyz-out-nested:nth-last-child(2), .xyz-in-nested:nth-last-child(2), .xyz-appear:nth-last-child(2), .xyz-out:nth-last-child(2), .xyz-in:nth-last-child(2) {
  --xyz-index-rev: 1;
}
.xyz-nested:nth-child(3), .xyz-appear-nested:nth-child(3), .xyz-out-nested:nth-child(3), .xyz-in-nested:nth-child(3), .xyz-appear:nth-child(3), .xyz-out:nth-child(3), .xyz-in:nth-child(3) {
  --xyz-index: 2;
}
.xyz-nested:nth-last-child(3), .xyz-appear-nested:nth-last-child(3), .xyz-out-nested:nth-last-child(3), .xyz-in-nested:nth-last-child(3), .xyz-appear:nth-last-child(3), .xyz-out:nth-last-child(3), .xyz-in:nth-last-child(3) {
  --xyz-index-rev: 2;
}
.xyz-nested:nth-child(4), .xyz-appear-nested:nth-child(4), .xyz-out-nested:nth-child(4), .xyz-in-nested:nth-child(4), .xyz-appear:nth-child(4), .xyz-out:nth-child(4), .xyz-in:nth-child(4) {
  --xyz-index: 3;
}
.xyz-nested:nth-last-child(4), .xyz-appear-nested:nth-last-child(4), .xyz-out-nested:nth-last-child(4), .xyz-in-nested:nth-last-child(4), .xyz-appear:nth-last-child(4), .xyz-out:nth-last-child(4), .xyz-in:nth-last-child(4) {
  --xyz-index-rev: 3;
}
.xyz-nested:nth-child(5), .xyz-appear-nested:nth-child(5), .xyz-out-nested:nth-child(5), .xyz-in-nested:nth-child(5), .xyz-appear:nth-child(5), .xyz-out:nth-child(5), .xyz-in:nth-child(5) {
  --xyz-index: 4;
}
.xyz-nested:nth-last-child(5), .xyz-appear-nested:nth-last-child(5), .xyz-out-nested:nth-last-child(5), .xyz-in-nested:nth-last-child(5), .xyz-appear:nth-last-child(5), .xyz-out:nth-last-child(5), .xyz-in:nth-last-child(5) {
  --xyz-index-rev: 4;
}
.xyz-nested:nth-child(6), .xyz-appear-nested:nth-child(6), .xyz-out-nested:nth-child(6), .xyz-in-nested:nth-child(6), .xyz-appear:nth-child(6), .xyz-out:nth-child(6), .xyz-in:nth-child(6) {
  --xyz-index: 5;
}
.xyz-nested:nth-last-child(6), .xyz-appear-nested:nth-last-child(6), .xyz-out-nested:nth-last-child(6), .xyz-in-nested:nth-last-child(6), .xyz-appear:nth-last-child(6), .xyz-out:nth-last-child(6), .xyz-in:nth-last-child(6) {
  --xyz-index-rev: 5;
}
.xyz-nested:nth-child(7), .xyz-appear-nested:nth-child(7), .xyz-out-nested:nth-child(7), .xyz-in-nested:nth-child(7), .xyz-appear:nth-child(7), .xyz-out:nth-child(7), .xyz-in:nth-child(7) {
  --xyz-index: 6;
}
.xyz-nested:nth-last-child(7), .xyz-appear-nested:nth-last-child(7), .xyz-out-nested:nth-last-child(7), .xyz-in-nested:nth-last-child(7), .xyz-appear:nth-last-child(7), .xyz-out:nth-last-child(7), .xyz-in:nth-last-child(7) {
  --xyz-index-rev: 6;
}
.xyz-nested:nth-child(8), .xyz-appear-nested:nth-child(8), .xyz-out-nested:nth-child(8), .xyz-in-nested:nth-child(8), .xyz-appear:nth-child(8), .xyz-out:nth-child(8), .xyz-in:nth-child(8) {
  --xyz-index: 7;
}
.xyz-nested:nth-last-child(8), .xyz-appear-nested:nth-last-child(8), .xyz-out-nested:nth-last-child(8), .xyz-in-nested:nth-last-child(8), .xyz-appear:nth-last-child(8), .xyz-out:nth-last-child(8), .xyz-in:nth-last-child(8) {
  --xyz-index-rev: 7;
}
.xyz-nested:nth-child(9), .xyz-appear-nested:nth-child(9), .xyz-out-nested:nth-child(9), .xyz-in-nested:nth-child(9), .xyz-appear:nth-child(9), .xyz-out:nth-child(9), .xyz-in:nth-child(9) {
  --xyz-index: 8;
}
.xyz-nested:nth-last-child(9), .xyz-appear-nested:nth-last-child(9), .xyz-out-nested:nth-last-child(9), .xyz-in-nested:nth-last-child(9), .xyz-appear:nth-last-child(9), .xyz-out:nth-last-child(9), .xyz-in:nth-last-child(9) {
  --xyz-index-rev: 8;
}
.xyz-nested:nth-child(10), .xyz-appear-nested:nth-child(10), .xyz-out-nested:nth-child(10), .xyz-in-nested:nth-child(10), .xyz-appear:nth-child(10), .xyz-out:nth-child(10), .xyz-in:nth-child(10) {
  --xyz-index: 9;
}
.xyz-nested:nth-last-child(10), .xyz-appear-nested:nth-last-child(10), .xyz-out-nested:nth-last-child(10), .xyz-in-nested:nth-last-child(10), .xyz-appear:nth-last-child(10), .xyz-out:nth-last-child(10), .xyz-in:nth-last-child(10) {
  --xyz-index-rev: 9;
}
.xyz-nested:nth-child(11), .xyz-appear-nested:nth-child(11), .xyz-out-nested:nth-child(11), .xyz-in-nested:nth-child(11), .xyz-appear:nth-child(11), .xyz-out:nth-child(11), .xyz-in:nth-child(11) {
  --xyz-index: 10;
}
.xyz-nested:nth-last-child(11), .xyz-appear-nested:nth-last-child(11), .xyz-out-nested:nth-last-child(11), .xyz-in-nested:nth-last-child(11), .xyz-appear:nth-last-child(11), .xyz-out:nth-last-child(11), .xyz-in:nth-last-child(11) {
  --xyz-index-rev: 10;
}
.xyz-nested:nth-child(12), .xyz-appear-nested:nth-child(12), .xyz-out-nested:nth-child(12), .xyz-in-nested:nth-child(12), .xyz-appear:nth-child(12), .xyz-out:nth-child(12), .xyz-in:nth-child(12) {
  --xyz-index: 11;
}
.xyz-nested:nth-last-child(12), .xyz-appear-nested:nth-last-child(12), .xyz-out-nested:nth-last-child(12), .xyz-in-nested:nth-last-child(12), .xyz-appear:nth-last-child(12), .xyz-out:nth-last-child(12), .xyz-in:nth-last-child(12) {
  --xyz-index-rev: 11;
}
.xyz-nested:nth-child(13), .xyz-appear-nested:nth-child(13), .xyz-out-nested:nth-child(13), .xyz-in-nested:nth-child(13), .xyz-appear:nth-child(13), .xyz-out:nth-child(13), .xyz-in:nth-child(13) {
  --xyz-index: 12;
}
.xyz-nested:nth-last-child(13), .xyz-appear-nested:nth-last-child(13), .xyz-out-nested:nth-last-child(13), .xyz-in-nested:nth-last-child(13), .xyz-appear:nth-last-child(13), .xyz-out:nth-last-child(13), .xyz-in:nth-last-child(13) {
  --xyz-index-rev: 12;
}
.xyz-nested:nth-child(14), .xyz-appear-nested:nth-child(14), .xyz-out-nested:nth-child(14), .xyz-in-nested:nth-child(14), .xyz-appear:nth-child(14), .xyz-out:nth-child(14), .xyz-in:nth-child(14) {
  --xyz-index: 13;
}
.xyz-nested:nth-last-child(14), .xyz-appear-nested:nth-last-child(14), .xyz-out-nested:nth-last-child(14), .xyz-in-nested:nth-last-child(14), .xyz-appear:nth-last-child(14), .xyz-out:nth-last-child(14), .xyz-in:nth-last-child(14) {
  --xyz-index-rev: 13;
}
.xyz-nested:nth-child(15), .xyz-appear-nested:nth-child(15), .xyz-out-nested:nth-child(15), .xyz-in-nested:nth-child(15), .xyz-appear:nth-child(15), .xyz-out:nth-child(15), .xyz-in:nth-child(15) {
  --xyz-index: 14;
}
.xyz-nested:nth-last-child(15), .xyz-appear-nested:nth-last-child(15), .xyz-out-nested:nth-last-child(15), .xyz-in-nested:nth-last-child(15), .xyz-appear:nth-last-child(15), .xyz-out:nth-last-child(15), .xyz-in:nth-last-child(15) {
  --xyz-index-rev: 14;
}
.xyz-nested:nth-child(16), .xyz-appear-nested:nth-child(16), .xyz-out-nested:nth-child(16), .xyz-in-nested:nth-child(16), .xyz-appear:nth-child(16), .xyz-out:nth-child(16), .xyz-in:nth-child(16) {
  --xyz-index: 15;
}
.xyz-nested:nth-last-child(16), .xyz-appear-nested:nth-last-child(16), .xyz-out-nested:nth-last-child(16), .xyz-in-nested:nth-last-child(16), .xyz-appear:nth-last-child(16), .xyz-out:nth-last-child(16), .xyz-in:nth-last-child(16) {
  --xyz-index-rev: 15;
}
.xyz-nested:nth-child(17), .xyz-appear-nested:nth-child(17), .xyz-out-nested:nth-child(17), .xyz-in-nested:nth-child(17), .xyz-appear:nth-child(17), .xyz-out:nth-child(17), .xyz-in:nth-child(17) {
  --xyz-index: 16;
}
.xyz-nested:nth-last-child(17), .xyz-appear-nested:nth-last-child(17), .xyz-out-nested:nth-last-child(17), .xyz-in-nested:nth-last-child(17), .xyz-appear:nth-last-child(17), .xyz-out:nth-last-child(17), .xyz-in:nth-last-child(17) {
  --xyz-index-rev: 16;
}
.xyz-nested:nth-child(18), .xyz-appear-nested:nth-child(18), .xyz-out-nested:nth-child(18), .xyz-in-nested:nth-child(18), .xyz-appear:nth-child(18), .xyz-out:nth-child(18), .xyz-in:nth-child(18) {
  --xyz-index: 17;
}
.xyz-nested:nth-last-child(18), .xyz-appear-nested:nth-last-child(18), .xyz-out-nested:nth-last-child(18), .xyz-in-nested:nth-last-child(18), .xyz-appear:nth-last-child(18), .xyz-out:nth-last-child(18), .xyz-in:nth-last-child(18) {
  --xyz-index-rev: 17;
}
.xyz-nested:nth-child(19), .xyz-appear-nested:nth-child(19), .xyz-out-nested:nth-child(19), .xyz-in-nested:nth-child(19), .xyz-appear:nth-child(19), .xyz-out:nth-child(19), .xyz-in:nth-child(19) {
  --xyz-index: 18;
}
.xyz-nested:nth-last-child(19), .xyz-appear-nested:nth-last-child(19), .xyz-out-nested:nth-last-child(19), .xyz-in-nested:nth-last-child(19), .xyz-appear:nth-last-child(19), .xyz-out:nth-last-child(19), .xyz-in:nth-last-child(19) {
  --xyz-index-rev: 18;
}
.xyz-nested:nth-child(20), .xyz-appear-nested:nth-child(20), .xyz-out-nested:nth-child(20), .xyz-in-nested:nth-child(20), .xyz-appear:nth-child(20), .xyz-out:nth-child(20), .xyz-in:nth-child(20) {
  --xyz-index: 19;
}
.xyz-nested:nth-last-child(20), .xyz-appear-nested:nth-last-child(20), .xyz-out-nested:nth-last-child(20), .xyz-in-nested:nth-last-child(20), .xyz-appear:nth-last-child(20), .xyz-out:nth-last-child(20), .xyz-in:nth-last-child(20) {
  --xyz-index-rev: 19;
}

.xyz-appear, .xyz-out, .xyz-in {
  --xyz-root-stagger-delay: var(--xyz-stagger-delay, 0s);
  --xyz-nested-stagger-delay: initial;
  --xyz-start-offset: initial;
}

.xyz-nested, .xyz-appear-nested, .xyz-out-nested, .xyz-in-nested {
  --xyz-nested-stagger-delay: var(--xyz-root-stagger-delay, 0s);
}

.xyz-in .xyz-nested, .xyz-in .xyz-in-nested, .xyz-in {
  --xyz-stagger-delay-calc: var(--xyz-nested-stagger-delay, 0s) + var(--xyz-in-stagger, var(--xyz-stagger, 0s)) * var(--xyz-index, 0) + var(--xyz-in-stagger-rev, var(--xyz-stagger-rev, 0s)) * var(--xyz-index-rev, 0);
  --xyz-total-delay-calc: var(--xyz-stagger-delay, 0s) + var(--xyz-in-delay, var(--xyz-delay, var(--xyz-in-delay-default, var(--xyz-delay-default))));
  --xyz-stagger-delay: calc(var(--xyz-stagger-delay-calc));
  --xyz-total-delay: calc(var(--xyz-total-delay-calc));
  transform-origin: var(--xyz-in-origin, var(--xyz-origin, var(--xyz-in-origin-default, var(--xyz-origin-default))));
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  --xyz-delay-calc: var(--xyz-total-delay, 0s) + var(--xyz-start-offset, 0) * (var(--xyz-total-delay, 0s) + var(--xyz-in-duration, var(--xyz-duration, var(--xyz-in-duration-default, var(--xyz-duration-default))))) * -1;
  -webkit-animation: var(--xyz-in-duration, var(--xyz-duration, var(--xyz-in-duration-default, var(--xyz-duration-default)))) var(--xyz-in-ease, var(--xyz-ease, var(--xyz-in-ease-default, var(--xyz-ease-default)))) calc(var(--xyz-delay-calc)) var(--xyz-in-iterate, var(--xyz-iterate, var(--xyz-in-iterate-default, var(--xyz-iterate-default)))) var(--xyz-in-direction, var(--xyz-direction, var(--xyz-in-direction-default, var(--xyz-direction-default)))) both;
          animation: var(--xyz-in-duration, var(--xyz-duration, var(--xyz-in-duration-default, var(--xyz-duration-default)))) var(--xyz-in-ease, var(--xyz-ease, var(--xyz-in-ease-default, var(--xyz-ease-default)))) calc(var(--xyz-delay-calc)) var(--xyz-in-iterate, var(--xyz-iterate, var(--xyz-in-iterate-default, var(--xyz-iterate-default)))) var(--xyz-in-direction, var(--xyz-direction, var(--xyz-in-direction-default, var(--xyz-direction-default)))) both;
  -webkit-animation-name: xyz-in-keyframes, var(--xyz-in-keyframes, var(--xyz-keyframes, var(--xyz-in-keyframes-default, var(--xyz-keyframes-default))));
          animation-name: xyz-in-keyframes, var(--xyz-in-keyframes, var(--xyz-keyframes, var(--xyz-in-keyframes-default, var(--xyz-keyframes-default))));
}
.xyz-out .xyz-nested, .xyz-out .xyz-out-nested, .xyz-out {
  --xyz-stagger-delay-calc: var(--xyz-nested-stagger-delay, 0s) + var(--xyz-out-stagger, var(--xyz-stagger, 0s)) * var(--xyz-index, 0) + var(--xyz-out-stagger-rev, var(--xyz-stagger-rev, 0s)) * var(--xyz-index-rev, 0);
  --xyz-total-delay-calc: var(--xyz-stagger-delay, 0s) + var(--xyz-out-delay, var(--xyz-delay, var(--xyz-out-delay-default, var(--xyz-delay-default))));
  --xyz-stagger-delay: calc(var(--xyz-stagger-delay-calc));
  --xyz-total-delay: calc(var(--xyz-total-delay-calc));
  transform-origin: var(--xyz-out-origin, var(--xyz-origin, var(--xyz-out-origin-default, var(--xyz-origin-default))));
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  --xyz-delay-calc: var(--xyz-total-delay, 0s) + var(--xyz-start-offset, 0) * (var(--xyz-total-delay, 0s) + var(--xyz-out-duration, var(--xyz-duration, var(--xyz-out-duration-default, var(--xyz-duration-default))))) * -1;
  -webkit-animation: var(--xyz-out-duration, var(--xyz-duration, var(--xyz-out-duration-default, var(--xyz-duration-default)))) var(--xyz-out-ease, var(--xyz-ease, var(--xyz-out-ease-default, var(--xyz-ease-default)))) calc(var(--xyz-delay-calc)) var(--xyz-out-iterate, var(--xyz-iterate, var(--xyz-out-iterate-default, var(--xyz-iterate-default)))) var(--xyz-out-direction, var(--xyz-direction, var(--xyz-out-direction-default, var(--xyz-direction-default)))) both;
          animation: var(--xyz-out-duration, var(--xyz-duration, var(--xyz-out-duration-default, var(--xyz-duration-default)))) var(--xyz-out-ease, var(--xyz-ease, var(--xyz-out-ease-default, var(--xyz-ease-default)))) calc(var(--xyz-delay-calc)) var(--xyz-out-iterate, var(--xyz-iterate, var(--xyz-out-iterate-default, var(--xyz-iterate-default)))) var(--xyz-out-direction, var(--xyz-direction, var(--xyz-out-direction-default, var(--xyz-direction-default)))) both;
  -webkit-animation-name: xyz-out-keyframes, var(--xyz-out-keyframes, var(--xyz-keyframes, var(--xyz-out-keyframes-default, var(--xyz-keyframes-default))));
          animation-name: xyz-out-keyframes, var(--xyz-out-keyframes, var(--xyz-keyframes, var(--xyz-out-keyframes-default, var(--xyz-keyframes-default))));
}
.xyz-appear .xyz-nested, .xyz-appear .xyz-appear-nested, .xyz-appear {
  --xyz-stagger-delay-calc: var(--xyz-nested-stagger-delay, 0s) + var(--xyz-appear-stagger, var(--xyz-stagger, 0s)) * var(--xyz-index, 0) + var(--xyz-appear-stagger-rev, var(--xyz-stagger-rev, 0s)) * var(--xyz-index-rev, 0);
  --xyz-total-delay-calc: var(--xyz-stagger-delay, 0s) + var(--xyz-appear-delay, var(--xyz-delay, var(--xyz-appear-delay-default, var(--xyz-delay-default))));
  --xyz-stagger-delay: calc(var(--xyz-stagger-delay-calc));
  --xyz-total-delay: calc(var(--xyz-total-delay-calc));
  transform-origin: var(--xyz-appear-origin, var(--xyz-origin, var(--xyz-appear-origin-default, var(--xyz-origin-default))));
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  --xyz-delay-calc: var(--xyz-total-delay, 0s) + var(--xyz-start-offset, 0) * (var(--xyz-total-delay, 0s) + var(--xyz-appear-duration, var(--xyz-duration, var(--xyz-appear-duration-default, var(--xyz-duration-default))))) * -1;
  -webkit-animation: var(--xyz-appear-duration, var(--xyz-duration, var(--xyz-appear-duration-default, var(--xyz-duration-default)))) var(--xyz-appear-ease, var(--xyz-ease, var(--xyz-appear-ease-default, var(--xyz-ease-default)))) calc(var(--xyz-delay-calc)) var(--xyz-appear-iterate, var(--xyz-iterate, var(--xyz-appear-iterate-default, var(--xyz-iterate-default)))) var(--xyz-appear-direction, var(--xyz-direction, var(--xyz-appear-direction-default, var(--xyz-direction-default)))) both;
          animation: var(--xyz-appear-duration, var(--xyz-duration, var(--xyz-appear-duration-default, var(--xyz-duration-default)))) var(--xyz-appear-ease, var(--xyz-ease, var(--xyz-appear-ease-default, var(--xyz-ease-default)))) calc(var(--xyz-delay-calc)) var(--xyz-appear-iterate, var(--xyz-iterate, var(--xyz-appear-iterate-default, var(--xyz-iterate-default)))) var(--xyz-appear-direction, var(--xyz-direction, var(--xyz-appear-direction-default, var(--xyz-direction-default)))) both;
  -webkit-animation-name: xyz-appear-keyframes, var(--xyz-appear-keyframes, var(--xyz-keyframes, var(--xyz-appear-keyframes-default, var(--xyz-keyframes-default))));
          animation-name: xyz-appear-keyframes, var(--xyz-appear-keyframes, var(--xyz-keyframes, var(--xyz-appear-keyframes-default, var(--xyz-keyframes-default))));
}
.xyz-absolute.xyz-in, .xyz-in-absolute.xyz-in, .xyz-in .xyz-absolute.xyz-nested, .xyz-in .xyz-absolute.xyz-in-nested, .xyz-in .xyz-in-absolute.xyz-nested, .xyz-in .xyz-in-absolute.xyz-in-nested, .xyz-absolute.xyz-out, .xyz-out-absolute.xyz-out, .xyz-out .xyz-absolute.xyz-nested, .xyz-out .xyz-absolute.xyz-out-nested, .xyz-out .xyz-out-absolute.xyz-nested, .xyz-out .xyz-out-absolute.xyz-out-nested, .xyz-absolute.xyz-appear, .xyz-appear-absolute.xyz-appear, .xyz-appear .xyz-absolute.xyz-nested, .xyz-appear .xyz-absolute.xyz-appear-nested, .xyz-appear .xyz-appear-absolute.xyz-nested, .xyz-appear .xyz-appear-absolute.xyz-appear-nested {
  position: absolute !important;
}

.xyz-paused.xyz-in, .xyz-in-paused.xyz-in, .xyz-in .xyz-paused.xyz-nested, .xyz-in .xyz-paused.xyz-in-nested, .xyz-in .xyz-in-paused.xyz-nested, .xyz-in .xyz-in-paused.xyz-in-nested, .xyz-in.xyz-paused-all, .xyz-in.xyz-in-paused-all, .xyz-in.xyz-paused-all .xyz-nested, .xyz-in.xyz-paused-all .xyz-in-nested, .xyz-in.xyz-in-paused-all .xyz-nested, .xyz-in.xyz-in-paused-all .xyz-in-nested, .xyz-paused.xyz-out, .xyz-out-paused.xyz-out, .xyz-out .xyz-paused.xyz-nested, .xyz-out .xyz-paused.xyz-out-nested, .xyz-out .xyz-out-paused.xyz-nested, .xyz-out .xyz-out-paused.xyz-out-nested, .xyz-out.xyz-paused-all, .xyz-out.xyz-out-paused-all, .xyz-out.xyz-paused-all .xyz-nested, .xyz-out.xyz-paused-all .xyz-out-nested, .xyz-out.xyz-out-paused-all .xyz-nested, .xyz-out.xyz-out-paused-all .xyz-out-nested, .xyz-paused.xyz-appear, .xyz-appear-paused.xyz-appear, .xyz-appear .xyz-paused.xyz-nested, .xyz-appear .xyz-paused.xyz-appear-nested, .xyz-appear .xyz-appear-paused.xyz-nested, .xyz-appear .xyz-appear-paused.xyz-appear-nested, .xyz-appear.xyz-paused-all, .xyz-appear.xyz-appear-paused-all, .xyz-appear.xyz-paused-all .xyz-nested, .xyz-appear.xyz-paused-all .xyz-appear-nested, .xyz-appear.xyz-appear-paused-all .xyz-nested, .xyz-appear.xyz-appear-paused-all .xyz-appear-nested {
  -webkit-animation-play-state: paused !important;
          animation-play-state: paused !important;
}

.xyz-none.xyz-in, .xyz-in-none.xyz-in, .xyz-in .xyz-none.xyz-nested, .xyz-in .xyz-none.xyz-in-nested, .xyz-in .xyz-in-none.xyz-nested, .xyz-in .xyz-in-none.xyz-in-nested, .xyz-in.xyz-none-all, .xyz-in.xyz-in-none-all, .xyz-in.xyz-none-all .xyz-nested, .xyz-in.xyz-none-all .xyz-in-nested, .xyz-in.xyz-in-none-all .xyz-nested, .xyz-in.xyz-in-none-all .xyz-in-nested, .xyz-none.xyz-out, .xyz-out-none.xyz-out, .xyz-out .xyz-none.xyz-nested, .xyz-out .xyz-none.xyz-out-nested, .xyz-out .xyz-out-none.xyz-nested, .xyz-out .xyz-out-none.xyz-out-nested, .xyz-out.xyz-none-all, .xyz-out.xyz-out-none-all, .xyz-out.xyz-none-all .xyz-nested, .xyz-out.xyz-none-all .xyz-out-nested, .xyz-out.xyz-out-none-all .xyz-nested, .xyz-out.xyz-out-none-all .xyz-out-nested, .xyz-none.xyz-appear, .xyz-appear-none.xyz-appear, .xyz-appear .xyz-none.xyz-nested, .xyz-appear .xyz-none.xyz-appear-nested, .xyz-appear .xyz-appear-none.xyz-nested, .xyz-appear .xyz-appear-none.xyz-appear-nested, .xyz-appear.xyz-none-all, .xyz-appear.xyz-appear-none-all, .xyz-appear.xyz-none-all .xyz-nested, .xyz-appear.xyz-none-all .xyz-appear-nested, .xyz-appear.xyz-appear-none-all .xyz-nested, .xyz-appear.xyz-appear-none-all .xyz-appear-nested {
  -webkit-animation: none !important;
          animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .xyz-appear, .xyz-appear .xyz-nested, .xyz-appear .xyz-appear-nested, .xyz-out, .xyz-out .xyz-nested, .xyz-out .xyz-out-nested, .xyz-in, .xyz-in .xyz-nested, .xyz-in .xyz-in-nested {
    -webkit-animation: none;
            animation: none;
  }
}
[xyz] {
  --xyz-keyframes: initial;
  --xyz-in-keyframes: initial;
  --xyz-out-keyframes: initial;
  --xyz-appear-keyframes: initial;
  --xyz-ease: initial;
  --xyz-in-ease: initial;
  --xyz-out-ease: initial;
  --xyz-appear-ease: initial;
  --xyz-duration: initial;
  --xyz-in-duration: initial;
  --xyz-out-duration: initial;
  --xyz-appear-duration: initial;
  --xyz-delay: initial;
  --xyz-in-delay: initial;
  --xyz-out-delay: initial;
  --xyz-appear-delay: initial;
  --xyz-stagger: initial;
  --xyz-in-stagger: initial;
  --xyz-out-stagger: initial;
  --xyz-appear-stagger: initial;
  --xyz-stagger-rev: initial;
  --xyz-in-stagger-rev: initial;
  --xyz-out-stagger-rev: initial;
  --xyz-appear-stagger-rev: initial;
  --xyz-iterate: initial;
  --xyz-in-iterate: initial;
  --xyz-out-iterate: initial;
  --xyz-appear-iterate: initial;
  --xyz-direction: initial;
  --xyz-in-direction: initial;
  --xyz-out-direction: initial;
  --xyz-appear-direction: initial;
  --xyz-origin: initial;
  --xyz-in-origin: initial;
  --xyz-out-origin: initial;
  --xyz-appear-origin: initial;
  --xyz-opacity: initial;
  --xyz-in-opacity: initial;
  --xyz-out-opacity: initial;
  --xyz-appear-opacity: initial;
  --xyz-transform: initial;
  --xyz-in-transform: initial;
  --xyz-out-transform: initial;
  --xyz-appear-transform: initial;
  --xyz-perspective: initial;
  --xyz-in-perspective: initial;
  --xyz-out-perspective: initial;
  --xyz-appear-perspective: initial;
  --xyz-translate-x: initial;
  --xyz-in-translate-x: initial;
  --xyz-out-translate-x: initial;
  --xyz-appear-translate-x: initial;
  --xyz-translate-y: initial;
  --xyz-in-translate-y: initial;
  --xyz-out-translate-y: initial;
  --xyz-appear-translate-y: initial;
  --xyz-translate-z: initial;
  --xyz-in-translate-z: initial;
  --xyz-out-translate-z: initial;
  --xyz-appear-translate-z: initial;
  --xyz-rotate-x: initial;
  --xyz-in-rotate-x: initial;
  --xyz-out-rotate-x: initial;
  --xyz-appear-rotate-x: initial;
  --xyz-rotate-y: initial;
  --xyz-in-rotate-y: initial;
  --xyz-out-rotate-y: initial;
  --xyz-appear-rotate-y: initial;
  --xyz-rotate-z: initial;
  --xyz-in-rotate-z: initial;
  --xyz-out-rotate-z: initial;
  --xyz-appear-rotate-z: initial;
  --xyz-scale-x: initial;
  --xyz-in-scale-x: initial;
  --xyz-out-scale-x: initial;
  --xyz-appear-scale-x: initial;
  --xyz-scale-y: initial;
  --xyz-in-scale-y: initial;
  --xyz-out-scale-y: initial;
  --xyz-appear-scale-y: initial;
  --xyz-scale-z: initial;
  --xyz-in-scale-z: initial;
  --xyz-out-scale-z: initial;
  --xyz-appear-scale-z: initial;
  --xyz-skew-x: initial;
  --xyz-in-skew-x: initial;
  --xyz-out-skew-x: initial;
  --xyz-appear-skew-x: initial;
  --xyz-skew-y: initial;
  --xyz-in-skew-y: initial;
  --xyz-out-skew-y: initial;
  --xyz-appear-skew-y: initial;
}

[xyz~=inherit] {
  --xyz-keyframes: inherit;
  --xyz-in-keyframes: inherit;
  --xyz-out-keyframes: inherit;
  --xyz-appear-keyframes: inherit;
  --xyz-ease: inherit;
  --xyz-in-ease: inherit;
  --xyz-out-ease: inherit;
  --xyz-appear-ease: inherit;
  --xyz-duration: inherit;
  --xyz-in-duration: inherit;
  --xyz-out-duration: inherit;
  --xyz-appear-duration: inherit;
  --xyz-delay: inherit;
  --xyz-in-delay: inherit;
  --xyz-out-delay: inherit;
  --xyz-appear-delay: inherit;
  --xyz-stagger: inherit;
  --xyz-in-stagger: inherit;
  --xyz-out-stagger: inherit;
  --xyz-appear-stagger: inherit;
  --xyz-stagger-rev: inherit;
  --xyz-in-stagger-rev: inherit;
  --xyz-out-stagger-rev: inherit;
  --xyz-appear-stagger-rev: inherit;
  --xyz-iterate: inherit;
  --xyz-in-iterate: inherit;
  --xyz-out-iterate: inherit;
  --xyz-appear-iterate: inherit;
  --xyz-direction: inherit;
  --xyz-in-direction: inherit;
  --xyz-out-direction: inherit;
  --xyz-appear-direction: inherit;
  --xyz-origin: inherit;
  --xyz-in-origin: inherit;
  --xyz-out-origin: inherit;
  --xyz-appear-origin: inherit;
  --xyz-opacity: inherit;
  --xyz-in-opacity: inherit;
  --xyz-out-opacity: inherit;
  --xyz-appear-opacity: inherit;
  --xyz-transform: inherit;
  --xyz-in-transform: inherit;
  --xyz-out-transform: inherit;
  --xyz-appear-transform: inherit;
  --xyz-perspective: inherit;
  --xyz-in-perspective: inherit;
  --xyz-out-perspective: inherit;
  --xyz-appear-perspective: inherit;
  --xyz-translate-x: inherit;
  --xyz-in-translate-x: inherit;
  --xyz-out-translate-x: inherit;
  --xyz-appear-translate-x: inherit;
  --xyz-translate-y: inherit;
  --xyz-in-translate-y: inherit;
  --xyz-out-translate-y: inherit;
  --xyz-appear-translate-y: inherit;
  --xyz-translate-z: inherit;
  --xyz-in-translate-z: inherit;
  --xyz-out-translate-z: inherit;
  --xyz-appear-translate-z: inherit;
  --xyz-rotate-x: inherit;
  --xyz-in-rotate-x: inherit;
  --xyz-out-rotate-x: inherit;
  --xyz-appear-rotate-x: inherit;
  --xyz-rotate-y: inherit;
  --xyz-in-rotate-y: inherit;
  --xyz-out-rotate-y: inherit;
  --xyz-appear-rotate-y: inherit;
  --xyz-rotate-z: inherit;
  --xyz-in-rotate-z: inherit;
  --xyz-out-rotate-z: inherit;
  --xyz-appear-rotate-z: inherit;
  --xyz-scale-x: inherit;
  --xyz-in-scale-x: inherit;
  --xyz-out-scale-x: inherit;
  --xyz-appear-scale-x: inherit;
  --xyz-scale-y: inherit;
  --xyz-in-scale-y: inherit;
  --xyz-out-scale-y: inherit;
  --xyz-appear-scale-y: inherit;
  --xyz-scale-z: inherit;
  --xyz-in-scale-z: inherit;
  --xyz-out-scale-z: inherit;
  --xyz-appear-scale-z: inherit;
  --xyz-skew-x: inherit;
  --xyz-in-skew-x: inherit;
  --xyz-out-skew-x: inherit;
  --xyz-appear-skew-x: inherit;
  --xyz-skew-y: inherit;
  --xyz-in-skew-y: inherit;
  --xyz-out-skew-y: inherit;
  --xyz-appear-skew-y: inherit;
}

[xyz~=ease] {
  --xyz-ease: var(--xyz-ease-default);
}

[xyz~=ease-ease] {
  --xyz-ease: ease;
}

[xyz~=ease-linear] {
  --xyz-ease: linear;
}

[xyz~=ease-in] {
  --xyz-ease: ease-in;
}

[xyz~=ease-in-back] {
  --xyz-ease: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

[xyz~=ease-out] {
  --xyz-ease: ease-out;
}

[xyz~=ease-out-back] {
  --xyz-ease: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[xyz~=ease-in-out] {
  --xyz-ease: ease-in-out;
}

[xyz~=ease-in-out-back] {
  --xyz-ease: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

[xyz~=in-ease] {
  --xyz-in-ease: var(--xyz-ease-default);
}

[xyz~=in-ease-ease] {
  --xyz-in-ease: ease;
}

[xyz~=in-ease-linear] {
  --xyz-in-ease: linear;
}

[xyz~=in-ease-in] {
  --xyz-in-ease: ease-in;
}

[xyz~=in-ease-in-back] {
  --xyz-in-ease: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

[xyz~=in-ease-out] {
  --xyz-in-ease: ease-out;
}

[xyz~=in-ease-out-back] {
  --xyz-in-ease: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[xyz~=in-ease-in-out] {
  --xyz-in-ease: ease-in-out;
}

[xyz~=in-ease-in-out-back] {
  --xyz-in-ease: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

[xyz~=out-ease] {
  --xyz-out-ease: var(--xyz-ease-default);
}

[xyz~=out-ease-ease] {
  --xyz-out-ease: ease;
}

[xyz~=out-ease-linear] {
  --xyz-out-ease: linear;
}

[xyz~=out-ease-in] {
  --xyz-out-ease: ease-in;
}

[xyz~=out-ease-in-back] {
  --xyz-out-ease: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

[xyz~=out-ease-out] {
  --xyz-out-ease: ease-out;
}

[xyz~=out-ease-out-back] {
  --xyz-out-ease: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[xyz~=out-ease-in-out] {
  --xyz-out-ease: ease-in-out;
}

[xyz~=out-ease-in-out-back] {
  --xyz-out-ease: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

[xyz~=appear-ease] {
  --xyz-appear-ease: var(--xyz-ease-default);
}

[xyz~=appear-ease-ease] {
  --xyz-appear-ease: ease;
}

[xyz~=appear-ease-linear] {
  --xyz-appear-ease: linear;
}

[xyz~=appear-ease-in] {
  --xyz-appear-ease: ease-in;
}

[xyz~=appear-ease-in-back] {
  --xyz-appear-ease: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

[xyz~=appear-ease-out] {
  --xyz-appear-ease: ease-out;
}

[xyz~=appear-ease-out-back] {
  --xyz-appear-ease: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[xyz~=appear-ease-in-out] {
  --xyz-appear-ease: ease-in-out;
}

[xyz~=appear-ease-in-out-back] {
  --xyz-appear-ease: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

[xyz~=duration] {
  --xyz-duration: var(--xyz-duration-default);
}

[xyz~=duration-0] {
  --xyz-duration: 0s;
}

[xyz~="duration-0.5"] {
  --xyz-duration: 0.05s;
}

[xyz~=duration-1] {
  --xyz-duration: 0.1s;
}

[xyz~="duration-1.5"] {
  --xyz-duration: 0.15s;
}

[xyz~=duration-2] {
  --xyz-duration: 0.2s;
}

[xyz~="duration-2.5"] {
  --xyz-duration: 0.25s;
}

[xyz~=duration-3] {
  --xyz-duration: 0.3s;
}

[xyz~=duration-4] {
  --xyz-duration: 0.4s;
}

[xyz~=duration-5] {
  --xyz-duration: 0.5s;
}

[xyz~=duration-6] {
  --xyz-duration: 0.6s;
}

[xyz~=duration-7] {
  --xyz-duration: 0.7s;
}

[xyz~=duration-8] {
  --xyz-duration: 0.8s;
}

[xyz~=duration-9] {
  --xyz-duration: 0.9s;
}

[xyz~=duration-10] {
  --xyz-duration: 1s;
}

[xyz~=duration-15] {
  --xyz-duration: 1.5s;
}

[xyz~=duration-20] {
  --xyz-duration: 2s;
}

[xyz~=duration-25] {
  --xyz-duration: 2.5s;
}

[xyz~=duration-30] {
  --xyz-duration: 3s;
}

[xyz~=in-duration] {
  --xyz-in-duration: var(--xyz-duration-default);
}

[xyz~=in-duration-0] {
  --xyz-in-duration: 0s;
}

[xyz~="in-duration-0.5"] {
  --xyz-in-duration: 0.05s;
}

[xyz~=in-duration-1] {
  --xyz-in-duration: 0.1s;
}

[xyz~="in-duration-1.5"] {
  --xyz-in-duration: 0.15s;
}

[xyz~=in-duration-2] {
  --xyz-in-duration: 0.2s;
}

[xyz~="in-duration-2.5"] {
  --xyz-in-duration: 0.25s;
}

[xyz~=in-duration-3] {
  --xyz-in-duration: 0.3s;
}

[xyz~=in-duration-4] {
  --xyz-in-duration: 0.4s;
}

[xyz~=in-duration-5] {
  --xyz-in-duration: 0.5s;
}

[xyz~=in-duration-6] {
  --xyz-in-duration: 0.6s;
}

[xyz~=in-duration-7] {
  --xyz-in-duration: 0.7s;
}

[xyz~=in-duration-8] {
  --xyz-in-duration: 0.8s;
}

[xyz~=in-duration-9] {
  --xyz-in-duration: 0.9s;
}

[xyz~=in-duration-10] {
  --xyz-in-duration: 1s;
}

[xyz~=in-duration-15] {
  --xyz-in-duration: 1.5s;
}

[xyz~=in-duration-20] {
  --xyz-in-duration: 2s;
}

[xyz~=in-duration-25] {
  --xyz-in-duration: 2.5s;
}

[xyz~=in-duration-30] {
  --xyz-in-duration: 3s;
}

[xyz~=out-duration] {
  --xyz-out-duration: var(--xyz-duration-default);
}

[xyz~=out-duration-0] {
  --xyz-out-duration: 0s;
}

[xyz~="out-duration-0.5"] {
  --xyz-out-duration: 0.05s;
}

[xyz~=out-duration-1] {
  --xyz-out-duration: 0.1s;
}

[xyz~="out-duration-1.5"] {
  --xyz-out-duration: 0.15s;
}

[xyz~=out-duration-2] {
  --xyz-out-duration: 0.2s;
}

[xyz~="out-duration-2.5"] {
  --xyz-out-duration: 0.25s;
}

[xyz~=out-duration-3] {
  --xyz-out-duration: 0.3s;
}

[xyz~=out-duration-4] {
  --xyz-out-duration: 0.4s;
}

[xyz~=out-duration-5] {
  --xyz-out-duration: 0.5s;
}

[xyz~=out-duration-6] {
  --xyz-out-duration: 0.6s;
}

[xyz~=out-duration-7] {
  --xyz-out-duration: 0.7s;
}

[xyz~=out-duration-8] {
  --xyz-out-duration: 0.8s;
}

[xyz~=out-duration-9] {
  --xyz-out-duration: 0.9s;
}

[xyz~=out-duration-10] {
  --xyz-out-duration: 1s;
}

[xyz~=out-duration-15] {
  --xyz-out-duration: 1.5s;
}

[xyz~=out-duration-20] {
  --xyz-out-duration: 2s;
}

[xyz~=out-duration-25] {
  --xyz-out-duration: 2.5s;
}

[xyz~=out-duration-30] {
  --xyz-out-duration: 3s;
}

[xyz~=appear-duration] {
  --xyz-appear-duration: var(--xyz-duration-default);
}

[xyz~=appear-duration-0] {
  --xyz-appear-duration: 0s;
}

[xyz~="appear-duration-0.5"] {
  --xyz-appear-duration: 0.05s;
}

[xyz~=appear-duration-1] {
  --xyz-appear-duration: 0.1s;
}

[xyz~="appear-duration-1.5"] {
  --xyz-appear-duration: 0.15s;
}

[xyz~=appear-duration-2] {
  --xyz-appear-duration: 0.2s;
}

[xyz~="appear-duration-2.5"] {
  --xyz-appear-duration: 0.25s;
}

[xyz~=appear-duration-3] {
  --xyz-appear-duration: 0.3s;
}

[xyz~=appear-duration-4] {
  --xyz-appear-duration: 0.4s;
}

[xyz~=appear-duration-5] {
  --xyz-appear-duration: 0.5s;
}

[xyz~=appear-duration-6] {
  --xyz-appear-duration: 0.6s;
}

[xyz~=appear-duration-7] {
  --xyz-appear-duration: 0.7s;
}

[xyz~=appear-duration-8] {
  --xyz-appear-duration: 0.8s;
}

[xyz~=appear-duration-9] {
  --xyz-appear-duration: 0.9s;
}

[xyz~=appear-duration-10] {
  --xyz-appear-duration: 1s;
}

[xyz~=appear-duration-15] {
  --xyz-appear-duration: 1.5s;
}

[xyz~=appear-duration-20] {
  --xyz-appear-duration: 2s;
}

[xyz~=appear-duration-25] {
  --xyz-appear-duration: 2.5s;
}

[xyz~=appear-duration-30] {
  --xyz-appear-duration: 3s;
}

[xyz~=delay] {
  --xyz-delay: var(--xyz-delay-default);
}

[xyz~=delay-0] {
  --xyz-delay: 0s;
}

[xyz~="delay-0.5"] {
  --xyz-delay: 0.05s;
}

[xyz~=delay-1] {
  --xyz-delay: 0.1s;
}

[xyz~="delay-1.5"] {
  --xyz-delay: 0.15s;
}

[xyz~=delay-2] {
  --xyz-delay: 0.2s;
}

[xyz~="delay-2.5"] {
  --xyz-delay: 0.25s;
}

[xyz~=delay-3] {
  --xyz-delay: 0.3s;
}

[xyz~=delay-4] {
  --xyz-delay: 0.4s;
}

[xyz~=delay-5] {
  --xyz-delay: 0.5s;
}

[xyz~=delay-6] {
  --xyz-delay: 0.6s;
}

[xyz~=delay-7] {
  --xyz-delay: 0.7s;
}

[xyz~=delay-8] {
  --xyz-delay: 0.8s;
}

[xyz~=delay-9] {
  --xyz-delay: 0.9s;
}

[xyz~=delay-10] {
  --xyz-delay: 1s;
}

[xyz~=delay-15] {
  --xyz-delay: 1.5s;
}

[xyz~=delay-20] {
  --xyz-delay: 2s;
}

[xyz~=delay-25] {
  --xyz-delay: 2.5s;
}

[xyz~=delay-30] {
  --xyz-delay: 3s;
}

[xyz~=in-delay] {
  --xyz-in-delay: var(--xyz-delay-default);
}

[xyz~=in-delay-0] {
  --xyz-in-delay: 0s;
}

[xyz~="in-delay-0.5"] {
  --xyz-in-delay: 0.05s;
}

[xyz~=in-delay-1] {
  --xyz-in-delay: 0.1s;
}

[xyz~="in-delay-1.5"] {
  --xyz-in-delay: 0.15s;
}

[xyz~=in-delay-2] {
  --xyz-in-delay: 0.2s;
}

[xyz~="in-delay-2.5"] {
  --xyz-in-delay: 0.25s;
}

[xyz~=in-delay-3] {
  --xyz-in-delay: 0.3s;
}

[xyz~=in-delay-4] {
  --xyz-in-delay: 0.4s;
}

[xyz~=in-delay-5] {
  --xyz-in-delay: 0.5s;
}

[xyz~=in-delay-6] {
  --xyz-in-delay: 0.6s;
}

[xyz~=in-delay-7] {
  --xyz-in-delay: 0.7s;
}

[xyz~=in-delay-8] {
  --xyz-in-delay: 0.8s;
}

[xyz~=in-delay-9] {
  --xyz-in-delay: 0.9s;
}

[xyz~=in-delay-10] {
  --xyz-in-delay: 1s;
}

[xyz~=in-delay-15] {
  --xyz-in-delay: 1.5s;
}

[xyz~=in-delay-20] {
  --xyz-in-delay: 2s;
}

[xyz~=in-delay-25] {
  --xyz-in-delay: 2.5s;
}

[xyz~=in-delay-30] {
  --xyz-in-delay: 3s;
}

[xyz~=out-delay] {
  --xyz-out-delay: var(--xyz-delay-default);
}

[xyz~=out-delay-0] {
  --xyz-out-delay: 0s;
}

[xyz~="out-delay-0.5"] {
  --xyz-out-delay: 0.05s;
}

[xyz~=out-delay-1] {
  --xyz-out-delay: 0.1s;
}

[xyz~="out-delay-1.5"] {
  --xyz-out-delay: 0.15s;
}

[xyz~=out-delay-2] {
  --xyz-out-delay: 0.2s;
}

[xyz~="out-delay-2.5"] {
  --xyz-out-delay: 0.25s;
}

[xyz~=out-delay-3] {
  --xyz-out-delay: 0.3s;
}

[xyz~=out-delay-4] {
  --xyz-out-delay: 0.4s;
}

[xyz~=out-delay-5] {
  --xyz-out-delay: 0.5s;
}

[xyz~=out-delay-6] {
  --xyz-out-delay: 0.6s;
}

[xyz~=out-delay-7] {
  --xyz-out-delay: 0.7s;
}

[xyz~=out-delay-8] {
  --xyz-out-delay: 0.8s;
}

[xyz~=out-delay-9] {
  --xyz-out-delay: 0.9s;
}

[xyz~=out-delay-10] {
  --xyz-out-delay: 1s;
}

[xyz~=out-delay-15] {
  --xyz-out-delay: 1.5s;
}

[xyz~=out-delay-20] {
  --xyz-out-delay: 2s;
}

[xyz~=out-delay-25] {
  --xyz-out-delay: 2.5s;
}

[xyz~=out-delay-30] {
  --xyz-out-delay: 3s;
}

[xyz~=appear-delay] {
  --xyz-appear-delay: var(--xyz-delay-default);
}

[xyz~=appear-delay-0] {
  --xyz-appear-delay: 0s;
}

[xyz~="appear-delay-0.5"] {
  --xyz-appear-delay: 0.05s;
}

[xyz~=appear-delay-1] {
  --xyz-appear-delay: 0.1s;
}

[xyz~="appear-delay-1.5"] {
  --xyz-appear-delay: 0.15s;
}

[xyz~=appear-delay-2] {
  --xyz-appear-delay: 0.2s;
}

[xyz~="appear-delay-2.5"] {
  --xyz-appear-delay: 0.25s;
}

[xyz~=appear-delay-3] {
  --xyz-appear-delay: 0.3s;
}

[xyz~=appear-delay-4] {
  --xyz-appear-delay: 0.4s;
}

[xyz~=appear-delay-5] {
  --xyz-appear-delay: 0.5s;
}

[xyz~=appear-delay-6] {
  --xyz-appear-delay: 0.6s;
}

[xyz~=appear-delay-7] {
  --xyz-appear-delay: 0.7s;
}

[xyz~=appear-delay-8] {
  --xyz-appear-delay: 0.8s;
}

[xyz~=appear-delay-9] {
  --xyz-appear-delay: 0.9s;
}

[xyz~=appear-delay-10] {
  --xyz-appear-delay: 1s;
}

[xyz~=appear-delay-15] {
  --xyz-appear-delay: 1.5s;
}

[xyz~=appear-delay-20] {
  --xyz-appear-delay: 2s;
}

[xyz~=appear-delay-25] {
  --xyz-appear-delay: 2.5s;
}

[xyz~=appear-delay-30] {
  --xyz-appear-delay: 3s;
}

[xyz~=stagger] {
  --xyz-stagger: var(--xyz-stagger-default);
}

[xyz~=stagger-0] {
  --xyz-stagger: 0s;
}

[xyz~="stagger-0.5"] {
  --xyz-stagger: 0.05s;
}

[xyz~=stagger-1] {
  --xyz-stagger: 0.1s;
}

[xyz~="stagger-1.5"] {
  --xyz-stagger: 0.15s;
}

[xyz~=stagger-2] {
  --xyz-stagger: 0.2s;
}

[xyz~="stagger-2.5"] {
  --xyz-stagger: 0.25s;
}

[xyz~=stagger-3] {
  --xyz-stagger: 0.3s;
}

[xyz~=stagger-4] {
  --xyz-stagger: 0.4s;
}

[xyz~=stagger-5] {
  --xyz-stagger: 0.5s;
}

[xyz~=stagger-6] {
  --xyz-stagger: 0.6s;
}

[xyz~=stagger-7] {
  --xyz-stagger: 0.7s;
}

[xyz~=stagger-8] {
  --xyz-stagger: 0.8s;
}

[xyz~=stagger-9] {
  --xyz-stagger: 0.9s;
}

[xyz~=stagger-10] {
  --xyz-stagger: 1s;
}

[xyz~=stagger-15] {
  --xyz-stagger: 1.5s;
}

[xyz~=stagger-20] {
  --xyz-stagger: 2s;
}

[xyz~=stagger-25] {
  --xyz-stagger: 2.5s;
}

[xyz~=stagger-30] {
  --xyz-stagger: 3s;
}

[xyz~=in-stagger] {
  --xyz-in-stagger: var(--xyz-stagger-default);
}

[xyz~=in-stagger-0] {
  --xyz-in-stagger: 0s;
}

[xyz~="in-stagger-0.5"] {
  --xyz-in-stagger: 0.05s;
}

[xyz~=in-stagger-1] {
  --xyz-in-stagger: 0.1s;
}

[xyz~="in-stagger-1.5"] {
  --xyz-in-stagger: 0.15s;
}

[xyz~=in-stagger-2] {
  --xyz-in-stagger: 0.2s;
}

[xyz~="in-stagger-2.5"] {
  --xyz-in-stagger: 0.25s;
}

[xyz~=in-stagger-3] {
  --xyz-in-stagger: 0.3s;
}

[xyz~=in-stagger-4] {
  --xyz-in-stagger: 0.4s;
}

[xyz~=in-stagger-5] {
  --xyz-in-stagger: 0.5s;
}

[xyz~=in-stagger-6] {
  --xyz-in-stagger: 0.6s;
}

[xyz~=in-stagger-7] {
  --xyz-in-stagger: 0.7s;
}

[xyz~=in-stagger-8] {
  --xyz-in-stagger: 0.8s;
}

[xyz~=in-stagger-9] {
  --xyz-in-stagger: 0.9s;
}

[xyz~=in-stagger-10] {
  --xyz-in-stagger: 1s;
}

[xyz~=in-stagger-15] {
  --xyz-in-stagger: 1.5s;
}

[xyz~=in-stagger-20] {
  --xyz-in-stagger: 2s;
}

[xyz~=in-stagger-25] {
  --xyz-in-stagger: 2.5s;
}

[xyz~=in-stagger-30] {
  --xyz-in-stagger: 3s;
}

[xyz~=out-stagger] {
  --xyz-out-stagger: var(--xyz-stagger-default);
}

[xyz~=out-stagger-0] {
  --xyz-out-stagger: 0s;
}

[xyz~="out-stagger-0.5"] {
  --xyz-out-stagger: 0.05s;
}

[xyz~=out-stagger-1] {
  --xyz-out-stagger: 0.1s;
}

[xyz~="out-stagger-1.5"] {
  --xyz-out-stagger: 0.15s;
}

[xyz~=out-stagger-2] {
  --xyz-out-stagger: 0.2s;
}

[xyz~="out-stagger-2.5"] {
  --xyz-out-stagger: 0.25s;
}

[xyz~=out-stagger-3] {
  --xyz-out-stagger: 0.3s;
}

[xyz~=out-stagger-4] {
  --xyz-out-stagger: 0.4s;
}

[xyz~=out-stagger-5] {
  --xyz-out-stagger: 0.5s;
}

[xyz~=out-stagger-6] {
  --xyz-out-stagger: 0.6s;
}

[xyz~=out-stagger-7] {
  --xyz-out-stagger: 0.7s;
}

[xyz~=out-stagger-8] {
  --xyz-out-stagger: 0.8s;
}

[xyz~=out-stagger-9] {
  --xyz-out-stagger: 0.9s;
}

[xyz~=out-stagger-10] {
  --xyz-out-stagger: 1s;
}

[xyz~=out-stagger-15] {
  --xyz-out-stagger: 1.5s;
}

[xyz~=out-stagger-20] {
  --xyz-out-stagger: 2s;
}

[xyz~=out-stagger-25] {
  --xyz-out-stagger: 2.5s;
}

[xyz~=out-stagger-30] {
  --xyz-out-stagger: 3s;
}

[xyz~=appear-stagger] {
  --xyz-appear-stagger: var(--xyz-stagger-default);
}

[xyz~=appear-stagger-0] {
  --xyz-appear-stagger: 0s;
}

[xyz~="appear-stagger-0.5"] {
  --xyz-appear-stagger: 0.05s;
}

[xyz~=appear-stagger-1] {
  --xyz-appear-stagger: 0.1s;
}

[xyz~="appear-stagger-1.5"] {
  --xyz-appear-stagger: 0.15s;
}

[xyz~=appear-stagger-2] {
  --xyz-appear-stagger: 0.2s;
}

[xyz~="appear-stagger-2.5"] {
  --xyz-appear-stagger: 0.25s;
}

[xyz~=appear-stagger-3] {
  --xyz-appear-stagger: 0.3s;
}

[xyz~=appear-stagger-4] {
  --xyz-appear-stagger: 0.4s;
}

[xyz~=appear-stagger-5] {
  --xyz-appear-stagger: 0.5s;
}

[xyz~=appear-stagger-6] {
  --xyz-appear-stagger: 0.6s;
}

[xyz~=appear-stagger-7] {
  --xyz-appear-stagger: 0.7s;
}

[xyz~=appear-stagger-8] {
  --xyz-appear-stagger: 0.8s;
}

[xyz~=appear-stagger-9] {
  --xyz-appear-stagger: 0.9s;
}

[xyz~=appear-stagger-10] {
  --xyz-appear-stagger: 1s;
}

[xyz~=appear-stagger-15] {
  --xyz-appear-stagger: 1.5s;
}

[xyz~=appear-stagger-20] {
  --xyz-appear-stagger: 2s;
}

[xyz~=appear-stagger-25] {
  --xyz-appear-stagger: 2.5s;
}

[xyz~=appear-stagger-30] {
  --xyz-appear-stagger: 3s;
}

[xyz~=stagger-rev] {
  --xyz-stagger-rev: var(--xyz-stagger-default);
}

[xyz~=stagger-rev-0] {
  --xyz-stagger-rev: 0s;
}

[xyz~="stagger-rev-0.5"] {
  --xyz-stagger-rev: 0.05s;
}

[xyz~=stagger-rev-1] {
  --xyz-stagger-rev: 0.1s;
}

[xyz~="stagger-rev-1.5"] {
  --xyz-stagger-rev: 0.15s;
}

[xyz~=stagger-rev-2] {
  --xyz-stagger-rev: 0.2s;
}

[xyz~="stagger-rev-2.5"] {
  --xyz-stagger-rev: 0.25s;
}

[xyz~=stagger-rev-3] {
  --xyz-stagger-rev: 0.3s;
}

[xyz~=stagger-rev-4] {
  --xyz-stagger-rev: 0.4s;
}

[xyz~=stagger-rev-5] {
  --xyz-stagger-rev: 0.5s;
}

[xyz~=stagger-rev-6] {
  --xyz-stagger-rev: 0.6s;
}

[xyz~=stagger-rev-7] {
  --xyz-stagger-rev: 0.7s;
}

[xyz~=stagger-rev-8] {
  --xyz-stagger-rev: 0.8s;
}

[xyz~=stagger-rev-9] {
  --xyz-stagger-rev: 0.9s;
}

[xyz~=stagger-rev-10] {
  --xyz-stagger-rev: 1s;
}

[xyz~=stagger-rev-15] {
  --xyz-stagger-rev: 1.5s;
}

[xyz~=stagger-rev-20] {
  --xyz-stagger-rev: 2s;
}

[xyz~=stagger-rev-25] {
  --xyz-stagger-rev: 2.5s;
}

[xyz~=stagger-rev-30] {
  --xyz-stagger-rev: 3s;
}

[xyz~=in-stagger-rev] {
  --xyz-in-stagger-rev: var(--xyz-stagger-default);
}

[xyz~=in-stagger-rev-0] {
  --xyz-in-stagger-rev: 0s;
}

[xyz~="in-stagger-rev-0.5"] {
  --xyz-in-stagger-rev: 0.05s;
}

[xyz~=in-stagger-rev-1] {
  --xyz-in-stagger-rev: 0.1s;
}

[xyz~="in-stagger-rev-1.5"] {
  --xyz-in-stagger-rev: 0.15s;
}

[xyz~=in-stagger-rev-2] {
  --xyz-in-stagger-rev: 0.2s;
}

[xyz~="in-stagger-rev-2.5"] {
  --xyz-in-stagger-rev: 0.25s;
}

[xyz~=in-stagger-rev-3] {
  --xyz-in-stagger-rev: 0.3s;
}

[xyz~=in-stagger-rev-4] {
  --xyz-in-stagger-rev: 0.4s;
}

[xyz~=in-stagger-rev-5] {
  --xyz-in-stagger-rev: 0.5s;
}

[xyz~=in-stagger-rev-6] {
  --xyz-in-stagger-rev: 0.6s;
}

[xyz~=in-stagger-rev-7] {
  --xyz-in-stagger-rev: 0.7s;
}

[xyz~=in-stagger-rev-8] {
  --xyz-in-stagger-rev: 0.8s;
}

[xyz~=in-stagger-rev-9] {
  --xyz-in-stagger-rev: 0.9s;
}

[xyz~=in-stagger-rev-10] {
  --xyz-in-stagger-rev: 1s;
}

[xyz~=in-stagger-rev-15] {
  --xyz-in-stagger-rev: 1.5s;
}

[xyz~=in-stagger-rev-20] {
  --xyz-in-stagger-rev: 2s;
}

[xyz~=in-stagger-rev-25] {
  --xyz-in-stagger-rev: 2.5s;
}

[xyz~=in-stagger-rev-30] {
  --xyz-in-stagger-rev: 3s;
}

[xyz~=out-stagger-rev] {
  --xyz-out-stagger-rev: var(--xyz-stagger-default);
}

[xyz~=out-stagger-rev-0] {
  --xyz-out-stagger-rev: 0s;
}

[xyz~="out-stagger-rev-0.5"] {
  --xyz-out-stagger-rev: 0.05s;
}

[xyz~=out-stagger-rev-1] {
  --xyz-out-stagger-rev: 0.1s;
}

[xyz~="out-stagger-rev-1.5"] {
  --xyz-out-stagger-rev: 0.15s;
}

[xyz~=out-stagger-rev-2] {
  --xyz-out-stagger-rev: 0.2s;
}

[xyz~="out-stagger-rev-2.5"] {
  --xyz-out-stagger-rev: 0.25s;
}

[xyz~=out-stagger-rev-3] {
  --xyz-out-stagger-rev: 0.3s;
}

[xyz~=out-stagger-rev-4] {
  --xyz-out-stagger-rev: 0.4s;
}

[xyz~=out-stagger-rev-5] {
  --xyz-out-stagger-rev: 0.5s;
}

[xyz~=out-stagger-rev-6] {
  --xyz-out-stagger-rev: 0.6s;
}

[xyz~=out-stagger-rev-7] {
  --xyz-out-stagger-rev: 0.7s;
}

[xyz~=out-stagger-rev-8] {
  --xyz-out-stagger-rev: 0.8s;
}

[xyz~=out-stagger-rev-9] {
  --xyz-out-stagger-rev: 0.9s;
}

[xyz~=out-stagger-rev-10] {
  --xyz-out-stagger-rev: 1s;
}

[xyz~=out-stagger-rev-15] {
  --xyz-out-stagger-rev: 1.5s;
}

[xyz~=out-stagger-rev-20] {
  --xyz-out-stagger-rev: 2s;
}

[xyz~=out-stagger-rev-25] {
  --xyz-out-stagger-rev: 2.5s;
}

[xyz~=out-stagger-rev-30] {
  --xyz-out-stagger-rev: 3s;
}

[xyz~=appear-stagger-rev] {
  --xyz-appear-stagger-rev: var(--xyz-stagger-default);
}

[xyz~=appear-stagger-rev-0] {
  --xyz-appear-stagger-rev: 0s;
}

[xyz~="appear-stagger-rev-0.5"] {
  --xyz-appear-stagger-rev: 0.05s;
}

[xyz~=appear-stagger-rev-1] {
  --xyz-appear-stagger-rev: 0.1s;
}

[xyz~="appear-stagger-rev-1.5"] {
  --xyz-appear-stagger-rev: 0.15s;
}

[xyz~=appear-stagger-rev-2] {
  --xyz-appear-stagger-rev: 0.2s;
}

[xyz~="appear-stagger-rev-2.5"] {
  --xyz-appear-stagger-rev: 0.25s;
}

[xyz~=appear-stagger-rev-3] {
  --xyz-appear-stagger-rev: 0.3s;
}

[xyz~=appear-stagger-rev-4] {
  --xyz-appear-stagger-rev: 0.4s;
}

[xyz~=