/* Duration */

.anim0  { animation-duration:    0s; }
.anim05 { animation-duration: 0.05s; }
.anim,
.anim1  { animation-duration:  0.1s; }
.anim2  { animation-duration:  0.2s; }
.anim25 { animation-duration: 0.25s; }
.anim3  { animation-duration:  0.3s; }
.anim4  { animation-duration:  0.4s; }
.anim5  { animation-duration:  0.5s; }
.anim6  { animation-duration:  0.6s; }
.anim7  { animation-duration:  0.7s; }
.anim8  { animation-duration:  0.8s; }
.anim9  { animation-duration:  0.9s; }
.anim10 { animation-duration:    1s; }
.anim20 { animation-duration:    2s; }
.anim30 { animation-duration:    3s; }
.anim40 { animation-duration:    4s; }
.anim50 { animation-duration:    5s; }

.animVar { animation-duration: calc(var(--animVar, 0) * 1s); }

/* Delay */

.anDelay0  { animation-delay: calc(((var(--anBetweenVar, 0) * var(--anDelayOrder, 0)) +    0) * 1s); }
.anDelay05 { animation-delay: calc(((var(--anBetweenVar, 0) * var(--anDelayOrder, 0)) + 0.05) * 1s); }
.anDelay,
.anDelay1  { animation-delay: calc(((var(--anBetweenVar, 0) * var(--anDelayOrder, 0)) +  0.1) * 1s); }
.anDelay2  { animation-delay: calc(((var(--anBetweenVar, 0) * var(--anDelayOrder, 0)) +  0.2) * 1s); }
.anDelay25 { animation-delay: calc(((var(--anBetweenVar, 0) * var(--anDelayOrder, 0)) + 0.25) * 1s); }
.anDelay3  { animation-delay: calc(((var(--anBetweenVar, 0) * var(--anDelayOrder, 0)) +  0.3) * 1s); }
.anDelay4  { animation-delay: calc(((var(--anBetweenVar, 0) * var(--anDelayOrder, 0)) +  0.4) * 1s); }
.anDelay5  { animation-delay: calc(((var(--anBetweenVar, 0) * var(--anDelayOrder, 0)) +  0.5) * 1s); }
.anDelay6  { animation-delay: calc(((var(--anBetweenVar, 0) * var(--anDelayOrder, 0)) +  0.6) * 1s); }
.anDelay7  { animation-delay: calc(((var(--anBetweenVar, 0) * var(--anDelayOrder, 0)) +  0.7) * 1s); }
.anDelay8  { animation-delay: calc(((var(--anBetweenVar, 0) * var(--anDelayOrder, 0)) +  0.8) * 1s); }
.anDelay9  { animation-delay: calc(((var(--anBetweenVar, 0) * var(--anDelayOrder, 0)) +  0.9) * 1s); }
.anDelay10 { animation-delay: calc(((var(--anBetweenVar, 0) * var(--anDelayOrder, 0)) +    1) * 1s); }
.anDelay20 { animation-delay: calc(((var(--anBetweenVar, 0) * var(--anDelayOrder, 0)) +    2) * 1s); }
.anDelay30 { animation-delay: calc(((var(--anBetweenVar, 0) * var(--anDelayOrder, 0)) +    3) * 1s); }
.anDelay40 { animation-delay: calc(((var(--anBetweenVar, 0) * var(--anDelayOrder, 0)) +    4) * 1s); }
.anDelay50 { animation-delay: calc(((var(--anBetweenVar, 0) * var(--anDelayOrder, 0)) +    5) * 1s); }

.anDelayVar { animation-delay: calc(((var(--anBetweenVar, 0) * var(--anDelayOrder, 0)) + var(--anDelayVar, 0)) * 1s); }

/* Between */

.anBetween0  { --anBetweenVar:    0; }
.anBetween05 { --anBetweenVar: 0.05; }
.anBetween,
.anBetween1  { --anBetweenVar:  0.1; }
.anBetween2  { --anBetweenVar:  0.2; }
.anBetween25 { --anBetweenVar: 0.25; }
.anBetween3  { --anBetweenVar:  0.3; }
.anBetween4  { --anBetweenVar:  0.4; }
.anBetween5  { --anBetweenVar:  0.5; }
.anBetween6  { --anBetweenVar:  0.6; }
.anBetween7  { --anBetweenVar:  0.7; }
.anBetween8  { --anBetweenVar:  0.8; }
.anBetween9  { --anBetweenVar:  0.9; }
.anBetween10 { --anBetweenVar:    1; }
.anBetween20 { --anBetweenVar:    2; }
.anBetween30 { --anBetweenVar:    3; }
.anBetween40 { --anBetweenVar:    4; }
.anBetween50 { --anBetweenVar:    5; }

/* Count */

.anCount-infinite { animation-iteration-count: infinite; }
.anCount-once,
.anCount-1        { animation-iteration-count:  1; }
.anCount-2        { animation-iteration-count:  2; }
.anCount-3        { animation-iteration-count:  3; }
.anCount-4        { animation-iteration-count:  4; }
.anCount-5        { animation-iteration-count:  5; }
.anCount-6        { animation-iteration-count:  6; }
.anCount-7        { animation-iteration-count:  7; }
.anCount-8        { animation-iteration-count:  8; }
.anCount-9        { animation-iteration-count:  9; }
.anCount-10       { animation-iteration-count: 10; }

.anCountVar { animation-iteration-count: var(--anCountVar); }

.anStatePause   { animation-play-state:  paused; }
.anStateRunning { animation-play-state: running; }

.anNone,
.anRestartHov:is(:hover, :active),
.anRestartAct:active:active,
.anRestartHovOut:is(:hover, :active)  .anRestartHovIn,
.anRestartHovOut1:is(:hover, :active) .anRestartHovIn1,
.anRestartHovOut2:is(:hover, :active) .anRestartHovIn2,
.anRestartActOut:active:active  .anRestartActIn,
.anRestartActOut1:active:active .anRestartActIn1,
.anRestartActOut2:active:active .anRestartActIn2 { animation-name: none !important; }





@media (pointer: fine) {
    .anNoneFine,
    .anNoneHovFine:is(:hover, :active),
    .anNoneActFine:active:active,
    .anNoneSelFine.sel.sel.sel { animation-name: none !important; }
}

@media (pointer: coarse) {
    .anNoneCoarse,
    .anNoneHovCoarse:is(:hover, :active),
    .anNoneActCoarse:active:active,
    .anNoneSelCoarse.sel.sel.sel { animation-name: none !important; }
}





/* Крутится вокруг своей оси */

.an-spinner {
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.an-spinner.animit,
.an-spinner.animitHov:is(:hover, :active),
.an-spinner.animitAct:active:active,
.an-spinner.animitSel.sel.sel.sel { animation-name: elzAnimSpinner; }

@keyframes elzAnimSpinner {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}





/* Сдвигуть вниз и вернуть */

.an-moveBottomReturn {
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.an-moveBottomReturn.animit,
.an-moveBottomReturn.animitHov:is(:hover, :active),
.an-moveBottomReturn.animitAct:active:active,
.an-moveBottomReturn.animitSel.sel.sel.sel { animation-name: elzMoveBotReturn; }

@keyframes elzMoveBotReturn {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(100%); }
    100% { transform: translateY(0); }
}





.an-showZoom,   .an-hideZoom,
.an-showOp,     .an-hideOp,
.an-showTop,    .an-hideTop,
.an-showRight,  .an-hideRight,
.an-showBottom, .an-hideBottom,
.an-showLeft,   .an-hideLeft,
.an-dash,       .an-dashRev {
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

/* Показать через зум */

.an-showZoom.animit,
.an-showZoom.animitHov:is(:hover, :active),
.an-showZoom.animitAct:active:active,
.an-showZoom.animitSel.sel.sel.sel { animation-name: elzAnimShowZoom; }

@keyframes elzAnimShowZoom {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1.0); }
}

/* Скрыть через зум */

.an-hideZoom.animit,
.an-hideZoom.animitHov:is(:hover, :active),
.an-hideZoom.animitAct:active:active,
.an-hideZoom.animitSel.sel.sel.sel { animation-name: elzAnimHideZoom; }

@keyframes elzAnimHideZoom {
    from { pointer-events: none; }
    to   { pointer-events: none; opacity: 0; transform: scale(0.5); }
}





/* Показ через прозрачность */

.an-showOp.animit,
.an-showOp.animitHov:is(:hover, :active),
.an-showOp.animitAct:active:active,
.an-showOp.animitSel.sel.sel.sel,
.animitHovOut:is(:hover, :active) .an-showOp.animitHovIn { animation-name: elzAnimShowOp; }

@keyframes elzAnimShowOp {
    from { opacity: 0; visibility: hidden; }
    to   { opacity: 1; }
}

/* Скрыть через прозрачность */

.an-hideOp.animit,
.an-hideOp.animitHov:is(:hover, :active),
.an-hideOp.animitAct:active:active,
.an-hideOp.animitSel.sel.sel.sel,
.animitHovOut:is(:hover, :active) .an-hideOp.animitHovIn { animation-name: elzAnimHideOp; }

@keyframes elzAnimHideOp {
    from { pointer-events: none; }
    to   { pointer-events: none; opacity: 0; visibility: hidden; }
}





/* Показать сверху */

.an-showTop.animit,
.an-showTop.animitHov:is(:hover, :active),
.an-showTop.animitAct:active:active,
.an-showTop.animitSel.sel.sel.sel { animation-name: elzAnimShowTop; }

@keyframes elzAnimShowTop {
    from { opacity: 0; transform: translateY(-50%); }
    to   { opacity: 1; }
}

/* Спрятать сверху */

.an-hideTop.animit,
.an-hideTop.animitHov:is(:hover, :active),
.an-hideTop.animitAct:active:active,
.an-hideTop.animitSel.sel.sel.sel { animation-name: elzAnimHideTop; }

@keyframes elzAnimHideTop {
    from { pointer-events: none; }
    to   { pointer-events: none; opacity: 0; transform: translateY(-50%); }
}





/* Показать справа */

.an-showRight.animit,
.an-showRight.animitHov:is(:hover, :active),
.an-showRight.animitAct:active:active,
.an-showRight.animitSel.sel.sel.sel { animation-name: elzAnimShowRight; }

@keyframes elzAnimShowRight {
    from { opacity: 0; transform: translateX(50%); }
    to   { opacity: 1; }
}

/* Спрятать справа */

.an-hideRight.animit,
.an-hideRight.animitHov:is(:hover, :active),
.an-hideRight.animitAct:active:active,
.an-hideRight.animitSel.sel.sel.sel { animation-name: elzAnimHideRight; }

@keyframes elzAnimHideRight {
    from { pointer-events: none; }
    to   { pointer-events: none; opacity: 0; transform: translateX(50%); }
}





/* Показать снизу */

.an-showBottom.animit,
.an-showBottom.animitHov:is(:hover, :active),
.an-showBottom.animitAct:active:active,
.an-showBottom.animitSel.sel.sel.sel { animation-name: elzAnimShowBottom; }

@keyframes elzAnimShowBottom {
    from { opacity: 0; transform: translateY(50%); }
    to   { opacity: 1; }
}

/* Спрятать снизу */

.an-hideBottom.animit,
.an-hideBottom.animitHov:is(:hover, :active),
.an-hideBottom.animitAct:active:active,
.an-hideBottom.animitSel.sel.sel.sel { animation-name: elzAnimHideBottom; }

@keyframes elzAnimHideBottom {
    from { pointer-events: none; }
    to   { pointer-events: none; opacity: 0; transform: translateY(50%); }
}





/* Показать слева */

.an-showLeft.animit,
.an-showLeft.animitHov:is(:hover, :active),
.an-showLeft.animitAct:active:active,
.an-showLeft.animitSel.sel.sel.sel { animation-name: elzAnimShowLeft; }

@keyframes elzAnimShowLeft {
    from { opacity: 0; transform: translateX(-50%); }
    to   { opacity: 1; }
}

/* Скрыть слева */

.an-hideLeft.animit,
.an-hideLeft.animitHov:is(:hover, :active),
.an-hideLeft.animitAct:active:active,
.an-hideLeft.animitSel.sel.sel.sel { animation-name: elzAnimHideLeft; }

@keyframes elzAnimHideLeft {
    from { pointer-events: none;  }
    to   { pointer-events: none; opacity: 0; transform: translateX(-50%); }
}





/* Мерцание */

.an-blink {
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.an-blink.animit,
.an-blink.animitHov:is(:hover, :active),
.an-blink.animitAct:active:active,
.an-blink.animitSel.sel.sel.sel { animation-name: elzAnimBlink; }

@keyframes elzAnimBlink {
    0%   { opacity: 0; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
}




/* Плейсхолдер для контента слева направо */

.an-shimmerLeftRight,
.an-shimmerRightLeft,
.an-shimmerTopBottom,
.an-shimmerBottomTop {
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.an-shimmerLeftRight.animit,
.an-shimmerLeftRight.animitHov:is(:hover, :active),
.an-shimmerLeftRight.animitAct:active:active,
.an-shimmerLeftRight.animitSel.sel.sel.sel { animation-name: elzAnimShimmerLeftRight; }

@keyframes elzAnimShimmerLeftRight {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

/* Плейсхолдер для контента слева направо */

.an-shimmerRightLeft.animit,
.an-shimmerRightLeft.animitHov:is(:hover, :active),
.an-shimmerRightLeft.animitAct:active:active,
.an-shimmerRightLeft.animitSel.sel.sel.sel { animation-name: elzAnimShimmerRightLeft; }

@keyframes elzAnimShimmerRightLeft {
    from { transform: translateX(100%); }
    to   { transform: translateX(-100%); }
}

/* Плейсхолдер для контента сверху вниз */

.an-shimmerTopBottom.animit,
.an-shimmerTopBottom.animitHov:is(:hover, :active),
.an-shimmerTopBottom.animitAct:active:active,
.an-shimmerTopBottom.animitSel.sel.sel.sel { animation-name: elzAnimShimmerTopBottom; }

@keyframes elzAnimShimmerTopBottom {
    from { transform: translateY(100%); }
    to   { transform: translateY(-100%); }
}

/* Плейсхолдер для контента снизу вверх */

.an-shimmerBottomTop.animit,
.an-shimmerBottomTop.animitHov:is(:hover, :active),
.an-shimmerBottomTop.animitAct:active:active,
.an-shimmerBottomTop.animitSel.sel.sel.sel { animation-name: elzAnimShimmerBottomTop; }

@keyframes elzAnimShimmerBottomTop {
    from { transform: translateY(100%); }
    to   { transform: translateY(-100%); }
}





/* Длина дуги */

.an-dash.animit,
.an-dash.animitHov:is(:hover, :active),
.an-dash.animitAct:active:active,
.an-dash.animitSel.sel.sel.sel { animation-name: elzAnimDash; }

.an-dashRev.animit,
.an-dashRev.animitHov:is(:hover, :active),
.an-dashRev.animitAct:active:active,
.an-dashRev.animitSel.sel.sel.sel { animation-name: elzAnimDashRev; }

@keyframes elzAnimDash {
    0%   { stroke-dasharray: 0, var(--animDashEnd, 0); }
    100% { stroke-dasharray: var(--animDashEnd, 0), var(--animDashEnd, 0); }
}

@keyframes elzAnimDashRev {
    0%   { stroke-dasharray: var(--animDashEnd, 0), var(--animDashEnd, 0); }
    100% { stroke-dasharray: 0, var(--animDashEnd, 0); }
}










/* Timing function */

.an-ease        { animation-timing-function: ease; }
.an-ease-in     { animation-timing-function: ease-in; }
.an-ease-out    { animation-timing-function: ease-out; }
.an-ease-in-out { animation-timing-function: ease-in-out; }
.an-linear      { animation-timing-function: linear; }
.an-step-start  { animation-timing-function: step-start; }
.an-step-end    { animation-timing-function: step-end; }