/**
   FADE
 */
.fade-enter-active:not(.no-anim),
.fade-leave-active:not(.no-anim) {
    transition : opacity var(--animation-duration-fast) ease;
}

.fade-enter-from:not(.no-anim),
.fade-leave-to:not(.no-anim) {
    opacity : 0;
}

.content-enter-active:not(.no-anim),
.content-leave-active:not(.no-anim) {
    transition : opacity 0.4s ease,
    filter 0.4s ease;
}

.content-enter-from:not(.no-anim),
.content-leave-to:not(.no-anim) {
    opacity : 0;
    filter: blur(2px);
}

/**
  FADE-LEFT
 */
.fade-left-enter-active:not(.no-anim),
.fade-left-leave-active:not(.no-anim) {
    transition : transform 0.2s ease-in-out;
    transform  : translate3d(0, 0, 0);
}

.fade-left-enter-to:not(.no-anim),
.fade-left-leave-from:not(.no-anim) {
    opacity   : 1;
    transform : translate3d(0, 0, 0);
}

.fade-left-enter-from:not(.no-anim),
.fade-left-leave-to:not(.no-anim) {
    opacity   : 0;
    transform : translate3d(-10%, 0, 0);
}

/**
  FADE-RIGHT
 */
.fade-right-enter-active:not(.no-anim),
.fade-right-leave-active:not(.no-anim) {
    transition : transform 0.2s ease-in-out;
    transform  : translate3d(0, 0, 0);
}

.fade-right-enter-to:not(.no-anim),
.fade-right-leave-from:not(.no-anim) {
    opacity   : 1;
    transform : translate3d(0, 0, 0);
}

.fade-right-enter-from:not(.no-anim),
.fade-right-leave-to:not(.no-anim) {
    opacity   : 0;
    transform : translate3d(10%, 0, 0);
}

/**
   FADE-SCALE
 */
.fade-scale-enter-active:not(.no-anim),
.fade-scale-leave-active:not(.no-anim) {
    transform-origin : top;
    transition       : all 0.2s ease-in-out;
}

.fade-scale-enter-to:not(.no-anim),
.fade-scale-leave-from:not(.no-anim) {
    opacity   : 1;
    transform : scaleY(1) !important;
}

.fade-scale-enter-from:not(.no-anim),
.fade-scale-leave-to:not(.no-anim) {
    opacity   : 0;
    transform : scaleY(0) !important;
}

.fade-bottom-enter-from,
.fade-bottom-leave-to {
    opacity   : 0;
    transform : translateY(100%);
}

.fade-bottom-enter-active,
.fade-bottom-leave-active {
    transition : all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.sheet-enter-active,
.sheet-leave-active {
    transition  : transform var(--animation-duration) cubic-bezier(0.68, -0.55, 0.27, 1.55),
    opacity var(--animation-duration) ease-out,
    filter calc(var(--animation-duration) + 50ms) ease-out;
    will-change : transform, opacity, filter;
}

.sheet-enter-from,
.sheet-leave-to {
    opacity : 0;
}

.sheet-enter-from,
.sheet-leave-to {
    transform : translateX(110%);
    opacity   : 1;
    filter    : blur(15px);
}

/**
   GRAYSCALE
 */
.grayscale-enter-active:not(.no-anim),
.grayscale-leave-active:not(.no-anim) {
    transition : all 1s ease-in;
}

.grayscale-enter-from:not(.no-anim),
.grayscale-leave-to:not(.no-anim) {
    filter  : grayscale(1);
    opacity : 0;
}

.grayscale-enter-to:not(.no-anim),
.grayscale-leave-from:not(.no-anim) {
    filter  : grayscale(0);
    opacity : 1;
}

/**
  SCALE
 */
.scale-enter-active:not(.no-anim),
.scale-leave-active:not(.no-anim) {
    transform-origin : top;
    transition       : transform 0.2s ease-in-out;
}

.scale-enter-to:not(.no-anim),
.scale-leave-from:not(.no-anim) {
    transform : scaleY(1);
}

.scale-enter-from:not(.no-anim),
.scale-leave-to:not(.no-anim) {
    opacity   : 0;
    transform : scaleY(0);
}

/**
  SCALE-UP
 */
.scaleUp-enter-active:not(.no-anim),
.scaleUp-leave-active:not(.no-anim) {
    overflow         : hidden;
    transition       : transform 0.1s ease, opacity 0.1s ease;
    transform-origin : bottom;
}

.scaleUp-enter-from:not(.no-anim),
.scaleUp-leave-to:not(.no-anim) {
    transform : scaleY(0);
    opacity   : 0;
}

/**
  SCALE-DOWN
 */
.scaleDown-enter-active:not(.no-anim),
.scaleDown-leave-active:not(.no-anim) {
    overflow         : hidden;
    transition       : transform 0.1s ease, opacity 0.1s ease;
    transform-origin : top;
}

.scaleDown-enter-from:not(.no-anim),
.scaleDown-leave-to:not(.no-anim) {
    transform : scaleY(0);
    opacity   : 0;
}

/**
  SLIDE-DOWN (need to set slideHeight in @enter event)
 */
.slideDown-enter-active,
.slideDown-leave-active {
    transition-duration        : 0.3s;
    transition-timing-function : ease-in-out;
    transition-property        : height, opacity;
}

.slideDown-enter-from, .slideDown-enter-to,
.slideDown-leave-from, .slideDown-leave-to {
    overflow-y : hidden;
}

.slideDown-enter-from,
.slideDown-leave-to {
    height  : 0;
    opacity : 0;
}

.slideDown-enter-to,
.slideDown-leave-from {
    --slideHeight : 0;
    height        : calc(var(--slideHeight) * 1px);
    opacity       : 1;
}


@supports (height: calc-size(max-content, size)) {
    .slideDownModern-enter-from:not(.no-anim),
    .slideDownModern-leave-to:not(.no-anim) {
        overflow-y : hidden;
        height     : 0;
    }
    
    .slideDownModern-enter-active:not(.no-anim),
    .slideDownModern-leave-active:not(.no-anim) {
        overflow-y                 : hidden;
        transition-duration        : var(--animation-duration);
        transition-timing-function : cubic-bezier(0.17, 0.04, 0.03, 0.94), ease-in-out;
        transition-property        : height;
        will-change                : height;
    }
    
    .slideDownModern-enter-to:not(.no-anim),
    .slideDownModern-leave-from:not(.no-anim) {
        height : calc-size(max-content, size);
    }
}

@supports not (height: calc-size(max-content, size)) {
    .slideDownModern-enter-from:not(.no-anim),
    .slideDownModern-leave-to:not(.no-anim) {
        opacity : 0;
    }
    
    .slideDownModern-enter-active:not(.no-anim),
    .slideDownModern-leave-active:not(.no-anim) {
        transition-duration        : var(--animation-duration-fast);
        transition-timing-function : cubic-bezier(0.17, 0.04, 0.03, 0.94);
        transition-property        : opacity;
    }
    
    .slideDownModern-enter-to:not(.no-anim),
    .slideDownModern-leave-from:not(.no-anim) {
        opacity : 1;
    }
}


.accordion-enter-active,
.accordion-leave-active {
    transition-duration        : 0.3s !important;
    transition-timing-function : ease-in-out;
    transition-property        : grid-template-rows, opacity;
}

.accordion-enter-from,
.accordion-leave-to {
    grid-template-rows : 0fr;
    opacity            : 0;
}

.accordion-enter-to,
.accordion-leave-from {
    grid-template-rows : 1fr;
    opacity            : 1;
}

.fade-grow-enter-active {
    animation : fade-grow-in var(--animation-duration-fast) ease-in-out;
}

.fade-grow-leave-active {
    animation : fade-grow-in var(--animation-duration-fast) ease-in-out reverse;
}

.popup-enter-active,
.popup-leave-active {
    transition : opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.popup-enter-from,
.popup-leave-to {
    opacity   : 0;
    transform : scale(0.9);
}

.popup-enter-to {
    transform : scale(1);
}

.popup-leave-to {
    opacity   : 0;
    transform : scale(0.9);
}


.dropdown-enter-from,
.dropdown-leave-to {
    overflow-y : hidden;
    height     : 0;
    opacity    : 0;
}

.dropdown-enter-active:not(.no-anim),
.dropdown-leave-active:not(.no-anim) {
    overflow-y                 : hidden;
    transition-duration        : var(--animation-duration);
    transition-timing-function : cubic-bezier(0.17, 0.04, 0.03, 0.94), ease-in-out;
    transition-property        : height, opacity;
    will-change                : height, opacity;
}

.dropdown-enter-to:not(.no-anim),
.dropdown-leave-from:not(.no-anim) {
    height  : calc-size(max-content, size);
    opacity : 1;
}

@media (max-width : 36rem) {
    .popup-enter-active,
    .popup-leave-active,
    .dropdown-enter-active,
    .dropdown-leave-active {
        transition : transform var(--animation-duration) cubic-bezier(0.68, -0.55, 0.27, 1.55),
        opacity 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
    }
    
    .popup-enter-from,
    .popup-leave-to,
    .dropdown-enter-from,
    .dropdown-leave-to {
        opacity   : 0;
        transform : translateY(100%) !important;
    }
    
    .popup-enter-to,
    .dropdown-enter-to {
        height    : auto !important;
        overflow  : visible !important;
        opacity   : 1;
        transform : translateY(0) !important;
        
    }
    
    .popup-leave-to,
    .dropdown-leave-to {
        opacity   : 0;
        transform : translateY(100%) !important;
    }
}

@keyframes fade-grow-in {
    0% {
        opacity   : 0;
        transform : scale(0);
    }
    100% {
        opacity   : 1;
        transform : scale(1);
    }
}


.bounce-enter-active {
    animation : bounce-in 0.3s;
}

.bounce-leave-active {
    animation : bounce-in 0.3s reverse;
}

.flip-enter-active,
.flip-leave-active {
    transition      : transform 150ms ease, opacity 150ms ease;
    transform-style : preserve-3d;
}

.flip-enter-from,
.flip-leave-to {
    transform : rotateY(90deg); /* vagy rotateX(90deg), ha „fel-le” forogjon */
}

.flip-enter-to,
.flip-leave-from {
    transform : rotateY(0deg);
}

@keyframes bounce-in {
    0% {
        opacity   : 0;
        transform : scale(0);
    }
    50% {
        opacity   : 0.5;
        transform : scale(1.25);
    }
    100% {
        opacity   : 1;
        transform : scale(1);
    }
}