/*

==========================
reveal
==========================
*/


body:not(.page-edite) .reveal_opacity {
    animation: reveal_oppacity 1ms ease-in-out;
    animation-timeline: view();
    animation-range: cover 0% cover 50%;


}

@keyframes reveal_oppacity {

    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

/*====================*/
body:not(.page-edite) .reveal_fromleft {
    animation: reveal_fromleft 1ms ease-in-out;
    animation-timeline: view();
    animation-range: cover 0% cover 50%
}

@keyframes reveal_fromleft {

    from {
        opacity: 0;
        transform: translateX(-100vw)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}


/*====================*/
body:not(.page-edite) .reveal_fromright {
    animation: reveal_fromright 1ms ease-in-out;
    animation-timeline: view();
    animation-range: cover 0% cover 50%
}

@keyframes reveal_fromright {

    from {
        opacity: 0;
        transform: translateX(100vw)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}



/*====================*/
body:not(.page-edite) .reveal_fromtop {
    animation: reveal_fromtop 1ms ease-in-out;
    animation-timeline: view();
    animation-range: cover 0% cover 50%
}

@keyframes reveal_fromtop {

    from {
        opacity: 0;
        transform: translateY(-100%)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/*====================*/
body:not(.page-edite) .reveal_frombottom {
    animation: reveal_frombottom 1ms ease-in-out;
    animation-timeline: view();
    animation-range: cover 0% cover 50%
}

@keyframes reveal_frombottom {

    from {
        opacity: 0;
        transform: translateY(100%)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}


/*====================*/
body:not(.page-edite) .reveal_zoomin {
    animation: reveal_zoomin 1ms ease-in-out;
    animation-timeline: view();
    animation-range: cover 0% cover 50%
}

@keyframes reveal_zoomin {

    from {
        transform: scale(.1)
    }

    to {
        transform: scale(1)
    }
}


/*====================*/
body:not(.page-edite) .reveal_zoomout {
    animation: reveal_zoomout 1ms ease-in-out;
    animation-timeline: view();
    animation-range: cover 0% cover 50%
}

@keyframes reveal_zoomout {

    from {
        transform: scale(3)
    }

    to {
        transform: scale(1)
    }
}


/*====================*/
body:not(.page-edite) .reveal_rotatex {
    animation: reveal_rotatex 1ms ease-in-out;
    animation-timeline: view();
    animation-range: cover 0% cover 50%
}

@keyframes reveal_rotatex {

    from {
        transform: rotateX(-90deg);
    }

    to {
        transform: rotateX(0);
    }
}


/*====================*/
body:not(.page-edite) .reveal_rotatey {
    animation: reveal_rotatey 1ms ease-in-out;
    animation-timeline: view();
    animation-range: cover 0% cover 50%
}

@keyframes reveal_rotatey {

    from {
        transform:rotateY(-90deg);
    }

    to {
        transform: rotateY(0);
    }
}



/*====================*/
body:not(.page-edite) .reveal_flyfromtop {
    animation: reveal_flyfromtop 1ms ease-in-out;
    animation-timeline: view();
    animation-range: cover 0% cover 50%
}

@keyframes reveal_flyfromtop {

    from {
        transform: perspective(2000px) rotateX(90deg) translateY(-120%);
    }

    to {
        transform: perspective(2000px) rotateX(0) translateY(0);
    }
}


/*====================*/
body:not(.page-edite) .reveal_flyfrombottom {
    animation: reveal_flyfrombottom 1ms ease-in-out;
    animation-timeline: view();
    animation-range: cover 0% cover 50%
}

@keyframes reveal_flyfrombottom {

    from {
          transform: perspective(2000px) rotateX(-90deg) translateY(120%);
    }

    to {
          transform: perspective(2000px) rotateX(-90deg) translateY(120%);
    }
}








/*

==========================
Father hover
==========================
*/


/* Pulse */
@keyframes pulse {
    25% {
        transform: scale(1.1);
        
    }

    75% {
        transform: scale(0.9);
    }
}

[hover-animation='pulse']:hover {
    animation: pulse 2s linear infinite;
}








/* Wobble Vertical */
@keyframes wobble-vertical {
    16.65% {
        transform: translateY(8px);
    }

    33.3% {
        transform: translateY(-6px);
    }

    49.95% {
        transform: translateY(4px);
    }

    66.6% {
        transform: translateY(-2px);
    }

    83.25% {
        transform: translateY(1px);
    }

    100% {
        transform: translateY(0);
    }
}

[hover-animation='wobble-vertical']:hover {
    animation-name: wobble-vertical;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

/* Wobble Horizontal */
@keyframes wobble-horizontal {
    16.65% {
        transform: translateX(8px);
    }

    33.3% {
        transform: translateX(-6px);
    }

    49.95% {
        transform: translateX(4px);
    }

    66.6% {
        transform: translateX(-2px);
    }

    83.25% {
        transform: translateX(1px);
    }

    100% {
        transform: translateX(0);
    }
}


.button[hover-animation='center-1'] {
    position: relative;
    z-index: 9;
    transition: .3s;
}

.button[hover-animation='center-1']:after {
    content: '';
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: currentcolor;
    opacity: .3;
    margin: auto;
    transition: .3s;
    filter: invert(1) grayscale(1);
    z-index: -1;
    border-radius: inherit;
}

.button[hover-animation='center-1']:hover:after {
    width: 100%;

}

.button[hover-animation='center-1']:hover {
    transform: scale(1.05)
}






.button[hover-animation='left-1'] .buttonhover:after {
    content: '';
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: currentcolor;
    opacity: .5;
    transition: .3s;
    filter: invert(1) grayscale(1);
    border-radius: inherit;

}

.button[hover-animation='left-1']:hover .buttonhover:after {
    width: 100%;

}





[hover-animation='wobble-horizontal']:hover {
    animation-name: wobble-horizontal;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}









.button[hover-animation='circle-center'] .buttonhover:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: currentcolor;
    opacity: .5;
    transition: .3s;
    filter: invert(1) grayscale(1);

    border-radius: 900px;
    margin: auto;

}

.button[hover-animation='circle-center']:hover .buttonhover:after {
    height: 100%;
    width: 100%;
    width: 800px;
    height: 800px;
}




.button[hover-animation='curve-top'] .buttonhover:after {
    content: '';
    width: 200%;
    height: 1000px;
    position: absolute;
    top: -1100px;
    bottom: 0;
    left: -100%;
    right: -100%;
    background: currentcolor;
    opacity: .5;
    transition: .5s;
    filter: invert(1) grayscale(1);

    border-radius: 100%;
    margin: auto;

}

.button[hover-animation='curve-top']:hover .buttonhover:after {
    top: 0;
}



















.button[hover-animation='darken'],
.button[hover-animation='zoom'],
.button[hover-animation='float'] {
    transition: .5s
}

.button[hover-animation='darken']:hover {
    box-shadow: inset 0 0 0 300px rgba(0, 0, 0, 0.2)
}

.button[hover-animation='zoom']:hover {
    transform: scale(1.05);
    animation: zoom .5s ease-in-out;
}

.button.ui-sortable-helper {
    transition: 0s !important
}








[all-hover-animation='zoom'] {
    transform: scale(1);
    transition: .5s;
}

[all-hover-animation='zoom']:hover {
    animation: zoom .5s ease-in-out;
    transform: scale(1.05)
}

@keyframes zoom {
    0% {
        transform: scale(1)
    }


    100% {
        transform: scale(1.05)
    }
}


[all-hover-animation='pulse']:hover {
    animation: pulse 2s linear infinite;
}

[all-hover-animation='wobble-vertical']:hover {
    animation: wobble-vertical 1s ease-in-out infinite;
}

[all-hover-animation='wobble-horizontal']:hover {
    animation: wobble-horizontal 1s ease-in-out infinite;
}

[all-hover-animation='balance']:hover {
    animation: balance 2s ease-in-out infinite;
}







body:not(.page-edite) [all-hover-animation='bg-zoom'] {
    position: relative;
    overflow: hidden
}

body:not(.page-edite) [all-hover-animation='bg-zoom']:before {
    content: '';
    position: absolute;
    margin: auto;
    background: #000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: inherit;
    background-attachment: inherit;
    background-size: inherit;
    background-position: inherit;
    transition: .5s;
    z-index: 0;
    transition: .5s
}

body:not(.page-edite) [all-hover-animation='bg-zoom']:hover:before {
    position: absolute;
    top: -5%;
    bottom: -5%;
    left: -5%;
    right: -5%
}

body:not(.page-edite) [all-hover-animation='bg-zoom'] > * {
    z-index: 9 !important;
    position: relative
}






[non-hover-animation='pulse']:not(:hover) {
    animation: pulse 2s linear infinite;
}

[non-hover-animation='wobble-vertical']:not(:hover) {
    animation: wobble-vertical 1s ease-in-out infinite;
}

[non-hover-animation='wobble-horizontal']:not(:hover) {
    animation: wobble-horizontal 1s ease-in-out infinite;
}

[non-hover-animation='balance']:not(:hover) {
    animation: balance 2s ease-in-out infinite;
}



@keyframes balance {
    0% {
        transform: rotate(0)
    }

    25% {
        transform: rotate(0)
    }

    50% {
        transform: rotate(2deg)
    }

    75% {
        transform: rotate(-2deg)
    }

    to {
        transform: rotate(0)
    }
}



/*

==========================
Father hover
==========================
*/

body:not(.page-edite) :is([type=subbloco], [type=carousel-card]) :is([father-hover-animation='showtop'], [father-hover-animation='showbottom'], [father-hover-animation='showleft'], [father-hover-animation='showright'], [father-hover-animation='show']) {
    transition: .5s;
    max-height: 1000px;
    display: block;
    animation: openheight 2s linear
}



body:not(.page-edite) :is([type=subbloco], [type=carousel-card]):not(:hover) [father-hover-animation='show'] {
    opacity: .001;
    margin: 00% !important;
    display: block;
    margin-bottom: -1px !important;
    max-height: .001px !important;

    animation: closeheight 2s linear;
    overflow: hidden;


}




@keyframes openheight {
    0% {
        max-height: 50px;
    }

    50% {
        max-height: 200px;
    }

    100% {
        max-height: 100px;
    }
}

@keyframes closeheight {
    0% {
        max-height: 1000px;

    }

    50% {
        max-height: 800px;
    }

    100% {
        max-height: 0.1px;
        overflow: hidden;
    }
}