/*************************************************
 *********** @author Eduardo P. Gomez ************
 *********** Animações do xmln:visaoi ************
 *********** ../js/site.js:setupAnims ************
 *************************************************/

/************ 

/* <Element
       visaoi:onViewAnimation="slideToRight" | "slideToLeft" | "slideToTop">
 */
[visaoi\:onViewAnimation="slideToRight"], [visaoi\:onViewAnimation="slideToLeft"],
[visaoi\:onViewAnimation="slideToTop"] {
     transition: transform .5s;
     transform: translate(0, 100%) !important;
 }
[visaoi\:onViewAnimation="slideToRight"][visaoi\:onViewAnimationDone="true"],
[visaoi\:onViewAnimation="slideToLeft"][visaoi\:onViewAnimationDone="true"],
[visaoi\:onViewAnimation="slideToTop"][visaoi\:onViewAnimationDone="true"] {
     transform: translate(0,0) !important;
 }
 
[visaoi\:onViewAnimation="slideToRight"][visaoi\:onViewAnimationDone="false"],
[visaoi\:onViewAnimation="slideToRight"]:not([visaoi\:onViewAnimationDone="true"]) {
     transform: translate(-100vw,0) !important;
 }
 
[visaoi\:onViewAnimation="slideToLeft"][visaoi\:onViewAnimationDone="false"],
[visaoi\:onViewAnimation="slideToLeft"]:not([visaoi\:onViewAnimationDone="true"]) {
     transform: translate(100vw,0) !important;
 }
 
 @keyframes Visaoi_Animation_SlideToTop {
     0% {
         transform: translate(0, 100%) !important;
     }
     100% {
         transform: translate(0, 0) !important;
     }
 }
 
[visaoi\:onViewAnimation="slideToTop"][visaoi\:onViewAnimationDone="false"],
[visaoi\:onViewAnimation="slideToTop"]:not([visaoi\:onViewAnimationDone="true"]) {
     opacity: 0;
 }
 
[visaoi\:onViewAnimation="slideToTop"][visaoi\:onViewAnimationDone="true"] {
     /*animation: Visaoi_Animation_SlideToTop .5s;*/
     opacity: 1;
 }
 
 /* <Element
        visaoi:onViewAnimation="fall">
  */
[visaoi\:onViewAnimation="fall"] {
     transform: rotate(270deg) translate(50%, calc(-50vw - 50vh)) !important;
     transition: transform .5s;
 }
 
[visaoi\:onViewAnimation="fall"][visaoi\:onViewAnimationDone="true"] {
     transform: rotate(360deg) !important;
 }
 
 /* <Element
        visaoi:onViewAnimation="fadeIn" | "fadeToTop" | "fadeToLeft" | "fadeToRight">
  */
[visaoi\:onViewAnimation="fadeIn"], [visaoi\:onViewAnimation="fadeToTop"],
[visaoi\:onViewAnimation="fadeToLeft"], [visaoi\:onViewAnimation="fadeToRight"] {
     transition: transform .5s, opacity 1s;
     transform: translate(0,0);
 }
[visaoi\:onViewAnimation="fadeIn"][visaoi\:onViewAnimationDone="true"],
[visaoi\:onViewAnimation="fadeToTop"][visaoi\:onViewAnimationDone="true"],
[visaoi\:onViewAnimation="fadeToLeft"][visaoi\:onViewAnimationDone="true"],
[visaoi\:onViewAnimation="fadeToRight"][visaoi\:onViewAnimationDone="true"] {
     opacity: 1;
 }
 
[visaoi\:onViewAnimation="fadeIn"][visaoi\:onViewAnimationDone="false"],
[visaoi\:onViewAnimation="fadeIn"]:not([visaoi\:onViewAnimationDone="true"]) {
     opacity: 0;
 }
 
[visaoi\:onViewAnimation="fadeToTop"][visaoi\:onViewAnimationDone="false"],
[visaoi\:onViewAnimation="fadeToTop"]:not([visaoi\:onViewAnimationDone="true"]) {
     opacity: 0;
     transform: translate(0,100%);
 }
 
[visaoi\:onViewAnimation="fadeToLeft"][visaoi\:onViewAnimationDone="false"],
[visaoi\:onViewAnimation="fadeToLeft"]:not([visaoi\:onViewAnimationDone="true"]) {
     opacity: 0;
     transform: translate(-100vw,0);
 }
 
[visaoi\:onViewAnimation="fadeToRight"][visaoi\:onViewAnimationDone="false"],
[visaoi\:onViewAnimation="fadeToRight"]:not([visaoi\:onViewAnimationDone="true"]) {
     opacity: 0;
     transform: translate(100vw,0);
 }
 
 /* <Element
        visaoi:onViewAnimation="zoomIn" | "fadeZoomIn" | "fadeZoomOut">
  */
[visaoi\:onViewAnimation="zoomIn"], [visaoi\:onViewAnimation="fadeZoomIn"],
[visaoi\:onViewAnimation="fadeZoomOut"] {
     transition: transform .5s, opacity 1s;
 }
 
[visaoi\:onViewAnimation="zoomIn"][visaoi\:onViewAnimationDone="false"],
[visaoi\:onViewAnimation="zoomIn"]:not([visaoi\:onViewAnimationDone="true"]) {
     transform: scale(0);
 }
 
[visaoi\:onViewAnimation="fadeZoomIn"][visaoi\:onViewAnimationDone="false"],
[visaoi\:onViewAnimation="fadeZoomIn"]:not([visaoi\:onViewAnimationDone="true"]) {
     transform: scale(0);
     opacity: 0;
 }
 
[visaoi\:onViewAnimation="fadeZoomOut"][visaoi\:onViewAnimationDone="false"],
[visaoi\:onViewAnimation="fadeZoomOut"]:not([visaoi\:onViewAnimationDone="true"]) {
     transform: scale(2);
     opacity: 0;
 }
 
[visaoi\:onViewAnimation="zoomIn"][visaoi\:onViewAnimationDone="true"],
[visaoi\:onViewAnimation="fadeZoomIn"][visaoi\:onViewAnimationDone="true"],
[visaoi\:onViewAnimation="fadeZoomOut"][visaoi\:onViewAnimationDone="true"] {
     transform: scale(1);
     opacity: 1;
 }
 
 /* <Element
        visaoi:onViewAnimation="fadeScrollTop">
  */
[visaoi\:onViewAnimation="fadeScrollTop"] {
     transition: transform .5s, opacity 1s;
 }
 
[visaoi\:onViewAnimation="fadeScrollTop"][visaoi\:onViewAnimationDone="false"],
[visaoi\:onViewAnimation="fadeScrollTop"]:not([visaoi\:onViewAnimationDone="true"]) {
     transform: translate(0,100%);
     opacity: 0;
 }
 
 /* <Element
        visaoi:onViewAnimation="curtainToTop"|"curtainToBottom"|"curtainToLeft"|"curtainToRight">
  */
  [visaoi\:onViewAnimation="curtainToTop"],
  [visaoi\:onViewAnimation="curtainToBottom"],
  [visaoi\:onViewAnimation="curtainToLeft"],
  [visaoi\:onViewAnimation="curtainToRight"] {
     --animBg: transparent;
  } 
 
[visaoi\:onViewAnimation="curtainToTop"]::before,
[visaoi\:onViewAnimation="curtainToBottom"]::before,
[visaoi\:onViewAnimation="curtainToLeft"]::before,
[visaoi\:onViewAnimation="curtainToRight"]::before {
     content: "";
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     background-color: var(--animBg);
     left: 0;
     z-index: 1;
     backdrop-filter: blur(10px);
     transition: width .5s, height .5s;
 }
 
[visaoi\:onViewAnimation="curtainToTop"][visaoi\:onViewAnimationDone="true"]::before {
     height: 0;
 }
 
[visaoi\:onViewAnimation="curtainToBottom"][visaoi\:onViewAnimationDone="true"]::before {
     height: 0;
     /*transform: translate(0,100%);*/
     top: unset !important;
     bottom: 0;
 }
 
[visaoi\:onViewAnimation="curtainToLeft"][visaoi\:onViewAnimationDone="true"]::before {
     width: 0;
 }
 
[visaoi\:onViewAnimation="curtainToRight"][visaoi\:onViewAnimationDone="true"]::before {
     width: 0;
     left: unset;
     right: 0;
 }
 
 
 /* <Element
        visaoi:onViewAnimation="lightBeam">
  */
[visaoi\:onViewAnimation="lightBeam"][visaoi\:onViewAnimationDone="false"],
[visaoi\:onViewAnimation="lightBeam"]:not([visaoi\:onViewAnimationDone="true"]) {
     opacity: 0;
     transform: scale(0);
 }
 
 @keyframes Visaoi_Animation_lightBeam {
     0% {
       filter: contrast(0) brightness(100) drop-shadow(0 0 100px #FFF) drop-shadow(0 0 100px #FFF);
       /*filter: hue-rotate(0deg);*/
     }
     100% {
       /*filter: hue-rotate(360deg);*/
       filter: contrast(1) brightness(1) drop-shadow(0 0 0px #FFF) drop-shadow(0 0 0px #FFF);
     }
   }
 
[visaoi\:onViewAnimation="lightBeam"][visaoi\:onViewAnimationDone="true"] {
     animation: Visaoi_Animation_lightBeam 500ms;
     opacity: 1;
     transform: scale(1);
 }
 
 
 /* <Element
        visaoi:onViewAnimation="bounce">
  */
 @keyframes Visaoi_Animation_bounce {
     0% {
       opacity: 0;
       transform: scale(0.5);
     }
     60% {
       opacity: 1;
       transform: scale(1.2);
     }
     100% {
       transform: scale(1);    
     }
 }
 
[visaoi\:onViewAnimation="bounce"][visaoi\:onViewAnimationDone="false"],
[visaoi\:onViewAnimation="bounce"]:not([visaoi\:onViewAnimationDone="true"]) {
     opacity: 0;
     transform: scale(0.5);
 }
 
[visaoi\:onViewAnimation="bounce"][visaoi\:onViewAnimationDone="true"] {
     animation: Visaoi_Animation_bounce .5s;
     opacity: 1;
     transform: scale(1);
 }

/******** onView fx (efeitos complexos) *********/

/* <Element
       visaoi:onView

/*************** hover animations ***************/

/* <Element
        visaoi:onMouseOverAnimation="zoomIn"|"zoomOut">
*/
[visaoi\:onMouseOverAnimation="zoomIn"],
[visaoi\:onMouseOverAnimation="zoomOut"] {
    transform: scale(1);
    transition: transform .2s;
}

[visaoi\:onMouseOverAnimation="zoomIn"]:hover {
    transform: scale(1.1);
}
[visaoi\:onMouseOverAnimation="zoomOut"]:hover {
    transform: scale(0.9);
}