/* === ZEUS Animations CSS -  === */
/* Todos efeitos prontos para produção. v1.0 */

/* -----------------
Timing-functions individuais
-------------------*/

/* Fades e Slides */
.fadeIn,
.fadeInUp,
.fadeInDown,
.fadeInLeft,
.fadeInRight,
.fadeOut,
.fadeOutUp,
.fadeOutDown,
.fadeOutLeft,
.fadeOutRight,
.slideInDown,
.slideInUp,
.slideInLeft,
.slideInRight,
.slideOutDown,
.slideOutUp,
.slideOutLeft,
.slideOutRight {
  animation-timing-function: ease;
}

/* Bounce */
.bounceIn,
.bounceInDown,
.bounceInUp,
.bounceInLeft,
.bounceInRight,
.bounceOut,
.bounceOutDown,
.bounceOutUp,
.bounceOutLeft,
.bounceOutRight {
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

/* Zoom */
.zoomIn,
.zoomInDown,
.zoomInUp,
.zoomInLeft,
.zoomInRight,
.zoomOut,
.zoomOutDown,
.zoomOutUp,
.zoomOutLeft,
.zoomOutRight {
  animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

/* RubberBand */
.rubberBand {
  animation-timing-function: ease-in-out;
}

/* Jello */
.jello {
  animation-timing-function: ease-in-out;
}

/* Wobble */
.wobble {
  animation-timing-function: ease-in-out;
}

/* Tada */
.tada {
  animation-timing-function: ease-in-out;
}

/* Swing */
.swing {
  animation-timing-function: ease-in-out;
}

/* Flash, Pulse, Heartbeat */
.flash,
.pulse,
.heartBeat {
  animation-timing-function: ease-in-out;
}

/* HeadShake */
.headShake {
  animation-timing-function: ease-in-out;
}

/* Flip */
.flipInX,
.flipInY,
.flipOutX,
.flipOutY {
  animation-timing-function: ease-in;
}

/* RotateIn / RotateOut */
.rotateIn,
.rotateInDownLeft,
.rotateInDownRight,
.rotateInUpLeft,
.rotateInUpRight,
.rotateOut,
.rotateOutDownLeft,
.rotateOutDownRight,
.rotateOutUpLeft,
.rotateOutUpRight {
  animation-timing-function: linear;
}

/* LightSpeedIn / LightSpeedOut */
.lightSpeedIn,
.lightSpeedOut {
  animation-timing-function: ease-out;
}

/* Hinge */
.hinge {
  animation-timing-function: ease-in-out;
}

/* JackInTheBox */
.jackInTheBox {
  animation-timing-function: ease-in;
}

/* RollIn / RollOut */
.rollIn,
.rollOut {
  animation-timing-function: ease-in-out;
}

/* PopIn / PopOut (custom) */
.popIn,
.popOut {
  animation-timing-function: ease-in-out;
}

/* BlurIn / BlurOut (custom) */
.blurIn,
.blurOut {
  animation-timing-function: ease;
}

/* GrowIn / ShrinkOut (custom) */
.growIn,
.shrinkOut {
  animation-timing-function: ease;
}


/* ------- FADES ------- */
@keyframes fadeIn { 0%{opacity:0;visibility:hidden;} 100%{opacity:1;visibility:visible;} }
.fadeIn { animation: fadeIn 1s both; }

@keyframes fadeOut { 0%{opacity:1;visibility:visible;} 100%{opacity:0;visibility:hidden;} }
.fadeOut { animation: fadeOut 1s both; }

@keyframes fadeInUp { 0%{opacity:0;visibility:hidden;transform:translateY(20px);} 100%{opacity:1;visibility:visible;transform:none;} }
.fadeInUp { animation: fadeInUp 1s both; }

@keyframes fadeOutUp { 0%{opacity:1;visibility:visible;transform:none;} 100%{opacity:0;visibility:hidden;transform:translateY(-20px);} }
.fadeOutUp { animation: fadeOutUp 1s both; }

@keyframes fadeInDown { 0%{opacity:0;visibility:hidden;transform:translateY(-20px);} 100%{opacity:1;visibility:visible;transform:none;} }
.fadeInDown { animation: fadeInDown 1s both; }

@keyframes fadeOutDown { 0%{opacity:1;visibility:visible;transform:none;} 100%{opacity:0;visibility:hidden;transform:translateY(20px);} }
.fadeOutDown { animation: fadeOutDown 1s both; }

@keyframes fadeInLeft { 0%{opacity:0;visibility:hidden;transform:translateX(-20px);} 100%{opacity:1;visibility:visible;transform:none;} }
.fadeInLeft { animation: fadeInLeft 1s both; }

@keyframes fadeOutLeft { 0%{opacity:1;visibility:visible;transform:none;} 100%{opacity:0;visibility:hidden;transform:translateX(-20px);} }
.fadeOutLeft { animation: fadeOutLeft 1s both; }

@keyframes fadeInRight { 0%{opacity:0;visibility:hidden;transform:translateX(20px);} 100%{opacity:1;visibility:visible;transform:none;} }
.fadeInRight { animation: fadeInRight 1s both; }

@keyframes fadeOutRight { 0%{opacity:1;visibility:visible;transform:none;} 100%{opacity:0;visibility:hidden;transform:translateX(20px);} }
.fadeOutRight { animation: fadeOutRight 1s both; }

/* ------- SLIDES ------- */
@keyframes slideInDown { 0%{opacity:0;visibility:hidden;transform:translateY(-100%);} 100%{opacity:1;visibility:visible;transform:translateY(0);} }
.slideInDown { animation: slideInDown 1s both; }

@keyframes slideInUp { 0%{opacity:0;visibility:hidden;transform:translateY(100%);} 100%{opacity:1;visibility:visible;transform:translateY(0);} }
.slideInUp { animation: slideInUp 1s both; }

@keyframes slideInLeft { 0%{opacity:0;visibility:hidden;transform:translateX(-100%);} 100%{opacity:1;visibility:visible;transform:translateX(0);} }
.slideInLeft { animation: slideInLeft 1s both; }

@keyframes slideInRight { 0%{opacity:0;visibility:hidden;transform:translateX(100%);} 100%{opacity:1;visibility:visible;transform:translateX(0);} }
.slideInRight { animation: slideInRight 1s both; }

@keyframes slideOutDown { 0%{opacity:1;visibility:visible;transform:translateY(0);} 100%{opacity:0;visibility:hidden;transform:translateY(100%);} }
.slideOutDown { animation: slideOutDown 1s both; }

@keyframes slideOutUp { 0%{opacity:1;visibility:visible;transform:translateY(0);} 100%{opacity:0;visibility:hidden;transform:translateY(-100%);} }
.slideOutUp { animation: slideOutUp 1s both; }

@keyframes slideOutLeft { 0%{opacity:1;visibility:visible;transform:translateX(0);} 100%{opacity:0;visibility:hidden;transform:translateX(-100%);} }
.slideOutLeft { animation: slideOutLeft 1s both; }

@keyframes slideOutRight { 0%{opacity:1;visibility:visible;transform:translateX(0);} 100%{opacity:0;visibility:hidden;transform:translateX(100%);} }
.slideOutRight { animation: slideOutRight 1s both; }

/* ------- BOUNCE ------- */
@keyframes bounceIn { 
  0%{opacity:0;visibility:hidden;transform:scale(0.3);}
  50%{opacity:1;visibility:visible;transform:scale(1.05);}
  70%{transform:scale(0.9);}
  100%{transform:scale(1);}
}
.bounceIn { animation: bounceIn 1s both; }

@keyframes bounceOut {
  20%{transform:scale(0.9);}
  50%,55%{opacity:1;transform:scale(1.1);}
  100%{opacity:0;visibility:hidden;transform:scale(0.3);}
}
.bounceOut { animation: bounceOut 1s both; }

/* ------- ZOOM ------- */
@keyframes zoomIn {
  0%{opacity:0;visibility:hidden;transform:scale(0.3);}
  100%{opacity:1;visibility:visible;transform:scale(1);}
}
.zoomIn { animation: zoomIn 1s both; }

@keyframes zoomOut {
  0%{opacity:1;visibility:visible;transform:scale(1);}
  100%{opacity:0;visibility:hidden;transform:scale(0.3);}
}
.zoomOut { animation: zoomOut 1s both; }

/* ------- POP (material style) ------- */
@keyframes popIn {
  0%{opacity:0;visibility:hidden;transform:scale(0.5);}
  80%{opacity:1;visibility:visible;transform:scale(1.05);}
  100%{transform:scale(1);}
}
.popIn { animation: popIn 0.7s both; }

@keyframes popOut {
  0%{opacity:1;visibility:visible;transform:scale(1);}
  20%{transform:scale(1.05);}
  100%{opacity:0;visibility:hidden;transform:scale(0.5);}
}
.popOut { animation: popOut 0.7s both; }

/* ------- BLUR ------- */
@keyframes blurIn {
  0%{opacity:0;visibility:hidden;filter:blur(10px);}
  100%{opacity:1;visibility:visible;filter:blur(0);}
}
.blurIn { animation: blurIn 0.7s both; }

@keyframes blurOut {
  0%{opacity:1;visibility:visible;filter:blur(0);}
  100%{opacity:0;visibility:hidden;filter:blur(10px);}
}
.blurOut { animation: blurOut 0.7s both; }

/* ------- WOBBLE ------- */
@keyframes wobble {
  0%{opacity:0;visibility:hidden;transform:none;}
  15%{opacity:1;visibility:visible;transform:translateX(-25px) rotate(-5deg);}
  30%{transform:translateX(20px) rotate(3deg);}
  45%{transform:translateX(-15px) rotate(-3deg);}
  60%{transform:translateX(10px) rotate(2deg);}
  75%{transform:translateX(-5px) rotate(-1deg);}
  100%{opacity:1;visibility:visible;transform:none;}
}
.wobble { animation: wobble 1s both; }

/* ------- JELLO ------- */
@keyframes jello {
  0%,100%{opacity:0;visibility:hidden;transform:none;}
  11.1%{opacity:1;visibility:visible;transform:skewX(-12.5deg) skewY(-12.5deg);}
  22.2%{transform:skewX(6.25deg) skewY(6.25deg);}
  33.3%{transform:skewX(-3.125deg) skewY(-3.125deg);}
  44.4%{transform:skewX(1.5625deg) skewY(1.5625deg);}
  55.5%{transform:skewX(-0.78125deg) skewY(-0.78125deg);}
  66.6%{transform:skewX(0.390625deg) skewY(0.390625deg);}
  77.7%{transform:skewX(-0.1953125deg) skewY(-0.1953125deg);}
  100%{opacity:1;visibility:visible;}
}
.jello { animation: jello 1s both; }

/* ------- RUBBERBAND ------- */
@keyframes rubberBand {
  0%{opacity:0;visibility:hidden;transform:scale3d(1,1,1);}
  30%{opacity:1;visibility:visible;transform:scale3d(1.25,0.75,1);}
  40%{transform:scale3d(0.75,1.25,1);}
  50%{transform:scale3d(1.15,0.85,1);}
  65%{transform:scale3d(0.95,1.05,1);}
  75%{transform:scale3d(1.05,0.95,1);}
  100%{opacity:1;visibility:visible;transform:scale3d(1,1,1);}
}
.rubberBand { animation: rubberBand 1s both; }

/* ------- TADA ------- */
@keyframes tada {
  0%{opacity:0;visibility:hidden;transform:scale3d(1,1,1);}
  10%,20%{opacity:1;visibility:visible;transform:scale3d(0.9,0.9,1) rotate(-3deg);}
  30%,50%,70%,90%{transform:scale3d(1.1,1.1,1) rotate(3deg);}
  40%,60%,80%{transform:scale3d(1.1,1.1,1) rotate(-3deg);}
  100%{opacity:1;visibility:visible;transform:scale3d(1,1,1);}
}
.tada { animation: tada 1s both; }

/* ------- SWING ------- */
@keyframes swing {
  0%{opacity:0;visibility:hidden;transform:rotate(0deg);}
  20%{opacity:1;visibility:visible;transform:rotate(15deg);}
  40%{transform:rotate(-10deg);}
  60%{transform:rotate(5deg);}
  80%{transform:rotate(-5deg);}
  100%{opacity:1;visibility:visible;transform:rotate(0deg);}
}
.swing { animation: swing 1s both; }

/* ------- FLASH ------- */
@keyframes flash {
  0%,100%{opacity:1;visibility:visible;}
  25%,75%{opacity:0;visibility:hidden;}
  50%{opacity:1;visibility:visible;}
}
.flash { animation: flash 1s both; }

/* ------- HEADSHAKE ------- */
@keyframes headShake {
  0%{opacity:0;visibility:hidden;transform:translateX(0);}
  6.5%{opacity:1;visibility:visible;transform:translateX(-6px) rotateY(-9deg);}
  18.5%{transform:translateX(5px) rotateY(7deg);}
  31.5%{transform:translateX(-3px) rotateY(-5deg);}
  43.5%{transform:translateX(2px) rotateY(3deg);}
  50%{transform:translateX(0);}
  100%{opacity:1;visibility:visible;transform:translateX(0);}
}
.headShake { animation: headShake 1s both; }

/* ------- PULSE ------- */
@keyframes pulse {
  0%{opacity:1;visibility:visible;transform:scale(1);}
  50%{transform:scale(1.05);}
  100%{transform:scale(1);}
}
.pulse { animation: pulse 1s both; }

/* ------- GROW/SHRINK ------- */
@keyframes growIn {
  0%{opacity:0;visibility:hidden;transform:scale(0);}
  100%{opacity:1;visibility:visible;transform:scale(1);}
}
.growIn { animation: growIn 1s both; }

@keyframes shrinkOut {
  0%{opacity:1;visibility:visible;transform:scale(1);}
  100%{opacity:0;visibility:hidden;transform:scale(0);}
}
.shrinkOut { animation: shrinkOut 1s both; }

/* ------- FLIP ------- */
@keyframes flipInX {
  0%{opacity:0;visibility:hidden;transform:perspective(400px) rotateX(90deg);}
  100%{opacity:1;visibility:visible;transform:perspective(400px) rotateX(0deg);}
}
.flipInX { animation: flipInX 1s both; }

@keyframes flipOutX {
  0%{opacity:1;visibility:visible;transform:perspective(400px) rotateX(0deg);}
  100%{opacity:0;visibility:hidden;transform:perspective(400px) rotateX(90deg);}
}
.flipOutX { animation: flipOutX 1s both; }

@keyframes flipInY {
  0%{opacity:0;visibility:hidden;transform:perspective(400px) rotateY(90deg);}
  100%{opacity:1;visibility:visible;transform:perspective(400px) rotateY(0deg);}
}
.flipInY { animation: flipInY 1s both; }

@keyframes flipOutY {
  0%{opacity:1;visibility:visible;transform:perspective(400px) rotateY(0deg);}
  100%{opacity:0;visibility:hidden;transform:perspective(400px) rotateY(90deg);}
}
.flipOutY { animation: flipOutY 1s both; }

/* ------- ROTATE ------- */
@keyframes rotateIn {
  0%{opacity:0;visibility:hidden;transform:rotate(-200deg);}
  100%{opacity:1;visibility:visible;transform:rotate(0);}
}
.rotateIn { animation: rotateIn 1s both; }

@keyframes rotateOut {
  0%{opacity:1;visibility:visible;transform:rotate(0);}
  100%{opacity:0;visibility:hidden;transform:rotate(200deg);}
}
.rotateOut { animation: rotateOut 1s both; }

/* ------- HINGE ------- */
@keyframes hinge {
  0%{opacity:1;visibility:visible;transform:rotate(0);transform-origin:top left;}
  20%,60%{transform:rotate(80deg);}
  80%{transform:rotate(60deg) translateY(0);}
  100%{opacity:0;visibility:hidden;transform:translateY(700px);}
}
.hinge { animation: hinge 2s both; }

/* ------- JACKINTHEBOX ------- */
@keyframes jackInTheBox {
  0%{opacity:0;visibility:hidden;transform:scale(0.1) rotate(30deg);}
  50%{opacity:1;visibility:visible;transform:rotate(-10deg);}
  70%{transform:rotate(3deg);}
  100%{transform:scale(1) rotate(0);}
}
.jackInTheBox { animation: jackInTheBox 1s both; }

/* ------- ROLL ------- */
@keyframes rollIn {
  0%{opacity:0;visibility:hidden;transform:translateX(-100%) rotate(-120deg);}
  100%{opacity:1;visibility:visible;transform:none;}
}
.rollIn { animation: rollIn 1s both; }

@keyframes rollOut {
  0%{opacity:1;visibility:visible;transform:none;}
  100%{opacity:0;visibility:hidden;transform:translateX(100%) rotate(120deg);}
}
.rollOut { animation: rollOut 1s both; }