/* custom-animations.css
   Custom Animate.css style animations with "wow" trigger.
   Elements get an "animated" class when triggered by custom-wow.js.
   Use: <div class="wow bounce" data-wow-delay="0.2s" data-wow-duration="1s"></div>
*/

/* ---------- Base ---------- */
.animated, .wow.animated {
  animation-duration: var(--animate-duration, 1s);
  animation-delay: var(--animate-delay, 0s);
  animation-iteration-count: var(--animate-iteration, 1);
  animation-fill-mode: both;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  -webkit-animation-fill-mode: both;
}

.wow { visibility: hidden; } /* show when animated */

.wow.animated { visibility: visible; }

/* Helper to combine name with .animated.e.g. .animated.bounce */

/* ---------- Attention Seekers ---------- */
/* bounce */
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
  40%, 43% { transform: translateY(-30px); }
  70% { transform: translateY(-15px); }
  90% { transform: translateY(-4px); }
}
.animated.bounce { animation-name: bounce; transform-origin: center bottom; }

/* flash */
@keyframes flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}
.animated.flash { animation-name: flash; }

/* pulse */
@keyframes pulse {
  0% { transform: scale3d(1,1,1); }
  50% { transform: scale3d(1.05,1.05,1.05); }
  100% { transform: scale3d(1,1,1); }
}
.animated.pulse { animation-name: pulse; }

/* rubberBand */
@keyframes rubberBand {
  0% { transform: scale3d(1,1,1); }
  30% { 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(.95,1.05,1); }
  100% { transform: scale3d(1,1,1); }
}
.animated.rubberBand { animation-name: rubberBand; }

/* shakeX */
@keyframes shakeX {
  0%,100%{ transform: translateX(0); }
  10%,30%,50%,70%,90%{ transform: translateX(-10px); }
  20%,40%,60%,80%{ transform: translateX(10px); }
}
.animated.shakeX { animation-name: shakeX; }

/* shakeY */
@keyframes shakeY {
  0%,100%{ transform: translateY(0); }
  10%,30%,50%,70%,90%{ transform: translateY(-10px); }
  20%,40%,60%,80%{ transform: translateY(10px); }
}
.animated.shakeY { animation-name: shakeY; }

/* headShake */
@keyframes headShake {
  0%{ transform: translateX(0); }
  6.5%{ 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); }
}
.animated.headShake { animation-name: headShake; }

/* swing */
@keyframes swing {
  20%{ transform: rotate3d(0,0,1,15deg); }
  40%{ transform: rotate3d(0,0,1,-10deg); }
  60%{ transform: rotate3d(0,0,1,5deg); }
  80%{ transform: rotate3d(0,0,1,-5deg); }
  100%{ transform: rotate3d(0,0,1,0deg); }
}
.animated.swing { transform-origin: top center; animation-name: swing; }

/* tada */
@keyframes tada {
  0%{ transform: scale3d(1,1,1); }
  10%,20%{ transform: scale3d(.9,.9,.9) rotate(-3deg); }
  30%,50%,70%,90%{ transform: scale3d(1.1,1.1,1.1) rotate(3deg); }
  40%,60%,80%{ transform: scale3d(1.1,1.1,1.1) rotate(-3deg); }
  100%{ transform: scale3d(1,1,1); }
}
.animated.tada { animation-name: tada; }

/* wobble */
@keyframes wobble {
  0%{ transform: none; }
  15%{ transform: translateX(-25%) rotate(-5deg); }
  30%{ transform: translateX(20%) rotate(3deg); }
  45%{ transform: translateX(-15%) rotate(-3deg); }
  60%{ transform: translateX(10%) rotate(2deg); }
  75%{ transform: translateX(-5%) rotate(-1deg); }
  100%{ transform: none; }
}
.animated.wobble { animation-name: wobble; }

/* jello */
@keyframes jello {
  0%{ transform: none; }
  11.1%{ 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); }
  88.8%{ transform: skewX(0.09765625deg) skewY(0.09765625deg); }
  100%{ transform: none; }
}
.animated.jello { animation-name: jello; transform-origin: center; }

/* heartBeat */
@keyframes heartBeat {
  0%{ transform: scale(1); }
  14%{ transform: scale(1.3); }
  28%{ transform: scale(1); }
  42%{ transform: scale(1.3); }
  70%{ transform: scale(1); }
}
.animated.heartBeat { animation-name: heartBeat; transform-origin: center center; }

/* ---------- Back entrances & exits ---------- */
/* backInDown */
@keyframes backInDown {
  0%{ transform: translateY(-1200px) scale(.7); opacity: 0; }
  80%{ transform: translateY(25px) scale(.95); opacity: 1; }
  100%{ transform: translateY(0) scale(1); }
}
.animated.backInDown { animation-name: backInDown; }

/* backInLeft */
@keyframes backInLeft {
  0%{ transform: translateX(-2000px) scale(.7); opacity: 0; }
  80%{ transform: translateX(20px) scale(.95); opacity: 1; }
  100%{ transform: translateX(0) scale(1); }
}
.animated.backInLeft { animation-name: backInLeft; }

/* backInRight */
@keyframes backInRight {
  0%{ transform: translateX(2000px) scale(.7); opacity: 0; }
  80%{ transform: translateX(-20px) scale(.95); opacity: 1; }
  100%{ transform: translateX(0) scale(1); }
}
.animated.backInRight { animation-name: backInRight; }

/* backInUp */
@keyframes backInUp {
  0%{ transform: translateY(1200px) scale(.7); opacity: 0; }
  80%{ transform: translateY(-20px) scale(.95); opacity: 1; }
  100%{ transform: translateY(0) scale(1); }
}
.animated.backInUp { animation-name: backInUp; }

/* backOutDown */
@keyframes backOutDown {
  0%{ transform: translateY(0) scale(1); }
  20%{ transform: translateY(10px) scale(.95); opacity: 1; }
  100%{ transform: translateY(2000px) scale(.7); opacity: 0; }
}
.animated.backOutDown { animation-name: backOutDown; }

/* backOutLeft */
@keyframes backOutLeft {
  0%{ transform: translateX(0) scale(1); }
  20%{ transform: translateX(-10px) scale(.95); opacity: 1; }
  100%{ transform: translateX(-2000px) scale(.7); opacity: 0; }
}
.animated.backOutLeft { animation-name: backOutLeft; }

/* backOutRight */
@keyframes backOutRight {
  0%{ transform: translateX(0) scale(1); }
  20%{ transform: translateX(10px) scale(.95); opacity: 1; }
  100%{ transform: translateX(2000px) scale(.7); opacity: 0; }
}
.animated.backOutRight { animation-name: backOutRight; }

/* backOutUp */
@keyframes backOutUp {
  0%{ transform: translateY(0) scale(1); }
  20%{ transform: translateY(-10px) scale(.95); opacity: 1; }
  100%{ transform: translateY(-2000px) scale(.7); opacity: 0; }
}
.animated.backOutUp { animation-name: backOutUp; }

/* ---------- Bouncing entrances & exits ---------- */
/* bounceIn */
@keyframes bounceIn {
  0%{ opacity: 0; transform: scale(.3); }
  50%{ opacity: 1; transform: scale(1.05); }
  70%{ transform: scale(.9); }
  100%{ transform: scale(1); }
}
.animated.bounceIn { animation-name: bounceIn; }

/* bounceInDown */
@keyframes bounceInDown {
  0%{ opacity: 0; transform: translateY(-2000px); }
  60%{ opacity: 1; transform: translateY(30px); }
  80%{ transform: translateY(-10px); }
  100%{ transform: translateY(0); }
}
.animated.bounceInDown { animation-name: bounceInDown; }

/* bounceInLeft */
@keyframes bounceInLeft {
  0%{ opacity: 0; transform: translateX(-2000px); }
  60%{ opacity: 1; transform: translateX(30px); }
  80%{ transform: translateX(-10px); }
  100%{ transform: translateX(0); }
}
.animated.bounceInLeft { animation-name: bounceInLeft; }

/* bounceInRight */
@keyframes bounceInRight {
  0%{ opacity: 0; transform: translateX(2000px); }
  60%{ opacity: 1; transform: translateX(-30px); }
  80%{ transform: translateX(10px); }
  100%{ transform: translateX(0); }
}
.animated.bounceInRight { animation-name: bounceInRight; }

/* bounceInUp */
@keyframes bounceInUp {
  0%{ opacity: 0; transform: translateY(2000px); }
  60%{ opacity: 1; transform: translateY(-30px); }
  80%{ transform: translateY(10px); }
  100%{ transform: translateY(0); }
}
.animated.bounceInUp { animation-name: bounceInUp; }

/* bounceOut variants */
@keyframes bounceOut {
  20%{ transform: scale(.9); }
  50%,55%{ opacity: 1; transform: scale(1.1); }
  100%{ opacity: 0; transform: scale(.3); }
}
.animated.bounceOut { animation-name: bounceOut; }

@keyframes bounceOutDown {
  0%{ transform: translateY(0); }
  20%{ transform: translateY(-10px); opacity: 1; }
  100%{ transform: translateY(2000px); opacity: 0; }
}
.animated.bounceOutDown { animation-name: bounceOutDown; }

@keyframes bounceOutLeft {
  0%{ transform: translateX(0); }
  20%{ transform: translateX(10px); opacity: 1; }
  100%{ transform: translateX(-2000px); opacity: 0; }
}
.animated.bounceOutLeft { animation-name: bounceOutLeft; }

@keyframes bounceOutRight {
  0%{ transform: translateX(0); }
  20%{ transform: translateX(-10px); opacity: 1; }
  100%{ transform: translateX(2000px); opacity: 0; }
}
.animated.bounceOutRight { animation-name: bounceOutRight; }

@keyframes bounceOutUp {
  0%{ transform: translateY(0); }
  20%{ transform: translateY(10px); opacity: 1; }
  100%{ transform: translateY(-2000px); opacity: 0; }
}
.animated.bounceOutUp { animation-name: bounceOutUp; }

/* ---------- Fading entrances & exits ---------- */
/* fadeIn (main) */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animated.fadeIn { animation-name: fadeIn; }

/* fadeInDown */
@keyframes fadeInDown {
  from { opacity: 0; transform: translate3d(0,-100%,0); }
  to { opacity: 1; transform: none; }
}
.animated.fadeInDown { animation-name: fadeInDown; }

/* fadeInDownBig */
@keyframes fadeInDownBig {
  from { opacity: 0; transform: translate3d(0,-2000px,0); }
  to { opacity: 1; transform: none; }
}
.animated.fadeInDownBig { animation-name: fadeInDownBig; }

/* fadeInLeft */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translate3d(-100%,0,0); }
  to { opacity: 1; transform: none; }
}
.animated.fadeInLeft { animation-name: fadeInLeft; }

/* fadeInLeftBig */
@keyframes fadeInLeftBig {
  from { opacity: 0; transform: translate3d(-2000px,0,0); }
  to { opacity: 1; transform: none; }
}
.animated.fadeInLeftBig { animation-name: fadeInLeftBig; }

/* fadeInRight */
@keyframes fadeInRight {
  from { opacity: 0; transform: translate3d(100%,0,0); }
  to { opacity: 1; transform: none; }
}
.animated.fadeInRight { animation-name: fadeInRight; }

/* fadeInRightBig */
@keyframes fadeInRightBig {
  from { opacity: 0; transform: translate3d(2000px,0,0); }
  to { opacity: 1; transform: none; }
}
.animated.fadeInRightBig { animation-name: fadeInRightBig; }

/* fadeInUp */
@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0,100%,0); }
  to { opacity: 1; transform: none; }
}
.animated.fadeInUp { animation-name: fadeInUp; }

/* fadeInUpBig */
@keyframes fadeInUpBig {
  from { opacity: 0; transform: translate3d(0,2000px,0); }
  to { opacity: 1; transform: none; }
}
.animated.fadeInUpBig { animation-name: fadeInUpBig; }

/* top-left / top-right / bottom-left / bottom-right variants */
@keyframes fadeInTopLeft { from { opacity:0; transform: translate3d(-50%,-50%,0) rotate(-10deg); } to { opacity:1; transform:none; } }
.animated.fadeInTopLeft { animation-name: fadeInTopLeft; }

@keyframes fadeInTopRight { from { opacity:0; transform: translate3d(50%,-50%,0) rotate(10deg); } to { opacity:1; transform:none; } }
.animated.fadeInTopRight { animation-name: fadeInTopRight; }

@keyframes fadeInBottomLeft { from { opacity:0; transform: translate3d(-50%,50%,0) rotate(10deg); } to { opacity:1; transform:none; } }
.animated.fadeInBottomLeft { animation-name: fadeInBottomLeft; }

@keyframes fadeInBottomRight { from { opacity:0; transform: translate3d(50%,50%,0) rotate(-10deg); } to { opacity:1; transform:none; } }
.animated.fadeInBottomRight { animation-name: fadeInBottomRight; }

/* fadeOut family */
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
.animated.fadeOut { animation-name: fadeOut; }

@keyframes fadeOutDown { from{ opacity:1; } to{ transform: translateY(2000px); opacity:0; } }
.animated.fadeOutDown { animation-name: fadeOutDown; }

@keyframes fadeOutLeft { from{ opacity:1; } to{ transform: translateX(-2000px); opacity:0; } }
.animated.fadeOutLeft { animation-name: fadeOutLeft; }

/* ... add big variants similarly ... */
@keyframes fadeOutRight { from{ opacity:1; } to{ transform: translateX(2000px); opacity:0; } }
.animated.fadeOutRight { animation-name: fadeOutRight; }

@keyframes fadeOutUp { from{ opacity:1; } to{ transform: translateY(-2000px); opacity:0; } }
.animated.fadeOutUp { animation-name: fadeOutUp; }

@keyframes fadeOutTopLeft { from{ opacity:1; } to{ transform: translate(-2000px,-2000px); opacity:0; } }
.animated.fadeOutTopLeft { animation-name: fadeOutTopLeft; }
@keyframes fadeOutTopRight { from{ opacity:1; } to{ transform: translate(2000px,-2000px); opacity:0; } }
.animated.fadeOutTopRight { animation-name: fadeOutTopRight; }
@keyframes fadeOutBottomRight { from{ opacity:1; } to{ transform: translate(2000px,2000px); opacity:0; } }
.animated.fadeOutBottomRight { animation-name: fadeOutBottomRight; }
@keyframes fadeOutBottomLeft { from{ opacity:1; } to{ transform: translate(-2000px,2000px); opacity:0; } }
.animated.fadeOutBottomLeft { animation-name: fadeOutBottomLeft; }

/* ---------- Flippers ---------- */
@keyframes flip { from { transform: perspective(400px) rotateY(0); } 50% { transform: perspective(400px) rotateY(180deg); } 100% { transform: perspective(400px) rotateY(360deg); } }
.animated.flip { backface-visibility: visible; animation-name: flip; }

@keyframes flipInX {
  from { transform: perspective(400px) rotateX(90deg); opacity:0; }
  40% { transform: perspective(400px) rotateX(-10deg); }
  70% { transform: perspective(400px) rotateX(10deg); }
  100% { transform: perspective(400px) rotateX(0deg); opacity:1; }
}
.animated.flipInX { animation-name: flipInX; }

@keyframes flipInY {
  from { transform: perspective(400px) rotateY(90deg); opacity:0; }
  40% { transform: perspective(400px) rotateY(-10deg); }
  70% { transform: perspective(400px) rotateY(10deg); }
  100% { transform: perspective(400px) rotateY(0deg); opacity:1; }
}
.animated.flipInY { animation-name: flipInY; }

@keyframes flipOutX {
  from { transform: perspective(400px) rotateX(0); opacity:1; }
  100% { transform: perspective(400px) rotateX(90deg); opacity:0; }
}
.animated.flipOutX { animation-name: flipOutX; }

@keyframes flipOutY {
  from { transform: perspective(400px) rotateY(0); opacity:1; }
  100% { transform: perspective(400px) rotateY(90deg); opacity:0; }
}
.animated.flipOutY { animation-name: flipOutY; }

/* ---------- Lightspeed ---------- */
@keyframes lightSpeedInRight {
  from { transform: translate3d(100%,0,0) skewX(-30deg); opacity:0; }
  60% { transform: skewX(20deg); opacity:1; }
  100% { transform: none; }
}
.animated.lightSpeedInRight { animation-name: lightSpeedInRight; }

@keyframes lightSpeedInLeft {
  from { transform: translate3d(-100%,0,0) skewX(30deg); opacity:0; }
  60% { transform: skewX(-20deg); opacity:1; }
  100% { transform: none; }
}
.animated.lightSpeedInLeft { animation-name: lightSpeedInLeft; }

@keyframes lightSpeedOutRight {
  from{ opacity:1; } 100%{ transform: translate3d(100%,0,0) skewX(30deg); opacity:0; }
}
.animated.lightSpeedOutRight { animation-name: lightSpeedOutRight; }
@keyframes lightSpeedOutLeft {
  from{ opacity:1; } 100%{ transform: translate3d(-100%,0,0) skewX(-30deg); opacity:0; }
}
.animated.lightSpeedOutLeft { animation-name: lightSpeedOutLeft; }

/* ---------- Rotating entrances & exits ---------- */
@keyframes rotateIn {
  from { transform-origin: center; transform: rotate3d(0,0,1,-200deg); opacity:0; }
  to { transform-origin: center; transform: none; opacity:1; }
}
.animated.rotateIn { animation-name: rotateIn; }

@keyframes rotateInDownLeft {
  from { transform-origin: left bottom; transform: rotate3d(0,0,1,-45deg); opacity:0; }
  to { transform-origin: left bottom; transform: none; opacity:1; }
}
.animated.rotateInDownLeft { animation-name: rotateInDownLeft; }

@keyframes rotateInDownRight {
  from { transform-origin: right bottom; transform: rotate3d(0,0,1,45deg); opacity:0; }
  to { transform-origin: right bottom; transform: none; opacity:1; }
}
.animated.rotateInDownRight { animation-name: rotateInDownRight; }

@keyframes rotateInUpLeft {
  from { transform-origin: left bottom; transform: rotate3d(0,0,1,45deg); opacity:0; }
  to { transform-origin: left bottom; transform: none; opacity:1; }
}
.animated.rotateInUpLeft { animation-name: rotateInUpLeft; }

@keyframes rotateInUpRight {
  from { transform-origin: right bottom; transform: rotate3d(0,0,1,-90deg); opacity:0; }
  to { transform-origin: right bottom; transform: none; opacity:1; }
}
.animated.rotateInUpRight { animation-name: rotateInUpRight; }

/* rotateOut variants */
@keyframes rotateOut { from{ opacity:1; } to{ transform: rotate3d(0,0,1,200deg); opacity:0; } }
.animated.rotateOut { animation-name: rotateOut; }
@keyframes rotateOutDownLeft { from{ opacity:1; } to{ transform-origin:left bottom; transform: rotate3d(0,0,1,45deg); opacity:0; } }
.animated.rotateOutDownLeft { animation-name: rotateOutDownLeft; }
@keyframes rotateOutDownRight { from{ opacity:1; } to{ transform-origin:right bottom; transform: rotate3d(0,0,1,-45deg); opacity:0; } }
.animated.rotateOutDownRight { animation-name: rotateOutDownRight; }
@keyframes rotateOutUpLeft { from{ opacity:1; } to{ transform-origin:left bottom; transform: rotate3d(0,0,1,-90deg); opacity:0; } }
.animated.rotateOutUpLeft { animation-name: rotateOutUpLeft; }
@keyframes rotateOutUpRight { from{ opacity:1; } to{ transform-origin:right bottom; transform: rotate3d(0,0,1,90deg); opacity:0; } }
.animated.rotateOutUpRight { animation-name: rotateOutUpRight; }

/* ---------- Specials ---------- */
@keyframes hinge {
  0%{ transform-origin: top left; animation-timing-function: ease-in-out; }
  20%,60%{ transform: rotate3d(0,0,1,80deg); transform-origin: top left; opacity:1; }
  100%{ transform: translateY(700px); opacity:0; }
}
.animated.hinge { animation-name: hinge; transform-origin: top left; }

/* jackInTheBox */
@keyframes jackInTheBox {
  from{ opacity:0; transform: scale(.1) rotate(30deg); transform-origin: center bottom; }
  50%{ transform: rotate(-10deg); }
  70%{ transform: rotate(3deg); }
  100%{ transform: none; opacity:1; }
}
.animated.jackInTheBox { animation-name: jackInTheBox; }

/* rollIn / rollOut */
@keyframes rollIn {
  from{ opacity:0; transform: translateX(-100%) rotate(-120deg); }
  to{ opacity:1; transform:none; }
}
.animated.rollIn { animation-name: rollIn; }

@keyframes rollOut { from{ opacity:1; } to{ opacity:0; transform: translateX(100%) rotate(120deg); } }
.animated.rollOut { animation-name: rollOut; }

/* ---------- Zooming entrances & exits ---------- */
@keyframes zoomIn {
  from { opacity: 0; transform: scale3d(.3,.3,.3); }
  50% { opacity: 1; }
  to { transform: none; }
}
.animated.zoomIn { animation-name: zoomIn; }

@keyframes zoomInDown { from{ opacity:0; transform: scale3d(.1,.1,.1) translateY(-2000px); } to{ opacity:1; transform:none; } }
.animated.zoomInDown { animation-name: zoomInDown; }

@keyframes zoomInLeft { from{ opacity:0; transform: scale3d(.1,.1,.1) translateX(-2000px); } to{ opacity:1; transform:none; } }
.animated.zoomInLeft { animation-name: zoomInLeft; }

@keyframes zoomInRight { from{ opacity:0; transform: scale3d(.1,.1,.1) translateX(2000px); } to{ opacity:1; transform:none; } }
.animated.zoomInRight { animation-name: zoomInRight; }

@keyframes zoomInUp { from{ opacity:0; transform: scale3d(.1,.1,.1) translateY(2000px); } to{ opacity:1; transform:none; } }
.animated.zoomInUp { animation-name: zoomInUp; }

@keyframes zoomOut { from{ opacity:1; } to{ opacity:0; transform: scale3d(.3,.3,.3); } }
.animated.zoomOut { animation-name: zoomOut; }
@keyframes zoomOutDown { from{ opacity:1; } to{ opacity:0; transform: scale3d(.1,.1,.1) translateY(2000px); } }
.animated.zoomOutDown { animation-name: zoomOutDown; }
@keyframes zoomOutLeft { from{ opacity:1; } to{ opacity:0; transform: scale3d(.1,.1,.1) translateX(-2000px); } }
.animated.zoomOutLeft { animation-name: zoomOutLeft; }
@keyframes zoomOutRight { from{ opacity:1; } to{ opacity:0; transform: scale3d(.1,.1,.1) translateX(2000px); } }
.animated.zoomOutRight { animation-name: zoomOutRight; }
@keyframes zoomOutUp { from{ opacity:1; } to{ opacity:0; transform: scale3d(.1,.1,.1) translateY(-2000px); } }
.animated.zoomOutUp { animation-name: zoomOutUp; }

/* ---------- Sliding entrances & exits ---------- */
@keyframes slideInDown { from{ transform: translateY(-100%); visibility: visible; } to{ transform:none; } }
.animated.slideInDown { animation-name: slideInDown; }

@keyframes slideInLeft { from{ transform: translateX(-100%); visibility: visible; } to{ transform:none; } }
.animated.slideInLeft { animation-name: slideInLeft; }

@keyframes slideInRight { from{ transform: translateX(100%); visibility: visible; } to{ transform:none; } }
.animated.slideInRight { animation-name: slideInRight; }

@keyframes slideInUp { from{ transform: translateY(100%); visibility: visible; } to{ transform:none; } }
.animated.slideInUp { animation-name: slideInUp; }

@keyframes slideOutDown { from{ opacity:1; } to{ transform: translateY(100%); opacity:0; } }
.animated.slideOutDown { animation-name: slideOutDown; }
@keyframes slideOutLeft { from{ opacity:1; } to{ transform: translateX(-100%); opacity:0; } }
.animated.slideOutLeft { animation-name: slideOutLeft; }
@keyframes slideOutRight { from{ opacity:1; } to{ transform: translateX(100%); opacity:0; } }
.animated.slideOutRight { animation-name: slideOutRight; }
@keyframes slideOutUp { from{ opacity:1; } to{ transform: translateY(-100%); opacity:0; } }
.animated.slideOutUp { animation-name: slideOutUp; }

/* ---------- Small utility tweaks for smoother visuals ---------- */
.animated { will-change: transform, opacity; }