@charset "UTF-8";

/*!
 * Animate.css — Aesthetic Redesign
 * Based on Animate.css by Daniel Eden (MIT License)
 * Refined with modern easing, CSS custom properties,
 * smoother motion curves & reduced extremes.
 */

/* ============================================
   CONFIG — Tweak these to taste
   ============================================ */
:root {
  --animate-duration: 0.65s;
  --animate-delay: 0.15s;
  --animate-distance-sm: 24px;
  --animate-distance-md: 60px;
  --animate-distance-lg: 120px;
  --animate-distance-xl: 600px;

  /* Easing library */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   BASE
   ============================================ */
.animated {
  animation-duration: var(--animate-duration);
  animation-fill-mode: both;
  animation-delay: var(--animate-delay);
  animation-timing-function: var(--ease-out-expo);
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.hinge {
  animation-duration: 1.8s;
}

/* Optional speed modifiers */
.animated.fast    { animation-duration: 0.4s; }
.animated.faster  { animation-duration: 0.25s; }
.animated.slow    { animation-duration: 1s; }
.animated.slower  { animation-duration: 1.4s; }


/* ============================================
   ATTENTION SEEKERS
   ============================================ */

/* --- Bounce --- */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  35%      { transform: translateY(-20px); animation-timing-function: var(--ease-out-back); }
  55%      { transform: translateY(-10px); }
  75%      { transform: translateY(-4px); }
}
.bounce { animation-name: bounce; animation-timing-function: var(--ease-spring); }

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

/* --- Pulse --- */
@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.pulse { animation-name: pulse; animation-timing-function: var(--ease-smooth); }

/* --- Rubber Band --- */
@keyframes rubberBand {
  0%   { transform: scale3d(1, 1, 1); }
  30%  { transform: scale3d(1.2, 0.8, 1); }
  40%  { transform: scale3d(0.8, 1.2, 1); }
  50%  { transform: scale3d(1.1, 0.9, 1); }
  65%  { transform: scale3d(0.97, 1.03, 1); }
  75%  { transform: scale3d(1.02, 0.98, 1); }
  100% { transform: scale3d(1, 1, 1); }
}
.rubberBand { animation-name: rubberBand; }

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

/* --- Swing --- */
@keyframes swing {
  20%  { transform: rotate(12deg); }
  40%  { transform: rotate(-8deg); }
  60%  { transform: rotate(4deg); }
  80%  { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}
.swing {
  transform-origin: top center;
  animation-name: swing;
  animation-timing-function: var(--ease-spring);
}

/* --- Tada --- */
@keyframes tada {
  0%        { transform: scale(1) rotate(0); }
  10%, 20%  { transform: scale(0.92) rotate(-2.5deg); }
  30%, 50%, 70%, 90% { transform: scale(1.08) rotate(2.5deg); }
  40%, 60%, 80%      { transform: scale(1.08) rotate(-2.5deg); }
  100%      { transform: scale(1) rotate(0); }
}
.tada { animation-name: tada; }

/* --- Wobble --- */
@keyframes wobble {
  0%   { transform: translateX(0) rotate(0); }
  15%  { transform: translateX(-18%) rotate(-4deg); }
  30%  { transform: translateX(14%) rotate(2.5deg); }
  45%  { transform: translateX(-10%) rotate(-2deg); }
  60%  { transform: translateX(6%) rotate(1.5deg); }
  75%  { transform: translateX(-3%) rotate(-0.5deg); }
  100% { transform: translateX(0) rotate(0); }
}
.wobble { animation-name: wobble; }


/* ============================================
   BOUNCE ENTRANCES
   ============================================ */

@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.35); }
  50%  { opacity: 1; transform: scale(1.04); }
  70%  { transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
.bounceIn { animation-name: bounceIn; animation-timing-function: var(--ease-spring); }

@keyframes bounceInDown {
  0%   { opacity: 0; transform: translateY(calc(var(--animate-distance-xl) * -1)); }
  55%  { opacity: 1; transform: translateY(18px); }
  75%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
.bounceInDown { animation-name: bounceInDown; animation-timing-function: var(--ease-spring); }

@keyframes bounceInLeft {
  0%   { opacity: 0; transform: translateX(calc(var(--animate-distance-xl) * -1)); }
  55%  { opacity: 1; transform: translateX(18px); }
  75%  { transform: translateX(-6px); }
  100% { transform: translateX(0); }
}
.bounceInLeft { animation-name: bounceInLeft; animation-timing-function: var(--ease-spring); }

@keyframes bounceInRight {
  0%   { opacity: 0; transform: translateX(var(--animate-distance-xl)); }
  55%  { opacity: 1; transform: translateX(-18px); }
  75%  { transform: translateX(6px); }
  100% { transform: translateX(0); }
}
.bounceInRight { animation-name: bounceInRight; animation-timing-function: var(--ease-spring); }

@keyframes bounceInUp {
  0%   { opacity: 0; transform: translateY(var(--animate-distance-xl)); }
  55%  { opacity: 1; transform: translateY(-18px); }
  75%  { transform: translateY(6px); }
  100% { transform: translateY(0); }
}
.bounceInUp { animation-name: bounceInUp; animation-timing-function: var(--ease-spring); }


/* ============================================
   BOUNCE EXITS
   ============================================ */

@keyframes bounceOut {
  0%   { transform: scale(1); }
  20%  { transform: scale(0.95); }
  50%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(0.35); }
}
.bounceOut { animation-name: bounceOut; animation-timing-function: var(--ease-in-expo); }

@keyframes bounceOutDown {
  0%   { transform: translateY(0); }
  15%  { opacity: 1; transform: translateY(-14px); }
  100% { opacity: 0; transform: translateY(var(--animate-distance-xl)); }
}
.bounceOutDown { animation-name: bounceOutDown; animation-timing-function: var(--ease-in-expo); }

@keyframes bounceOutLeft {
  0%   { transform: translateX(0); }
  15%  { opacity: 1; transform: translateX(14px); }
  100% { opacity: 0; transform: translateX(calc(var(--animate-distance-xl) * -1)); }
}
.bounceOutLeft { animation-name: bounceOutLeft; animation-timing-function: var(--ease-in-expo); }

@keyframes bounceOutRight {
  0%   { transform: translateX(0); }
  15%  { opacity: 1; transform: translateX(-14px); }
  100% { opacity: 0; transform: translateX(var(--animate-distance-xl)); }
}
.bounceOutRight { animation-name: bounceOutRight; animation-timing-function: var(--ease-in-expo); }

@keyframes bounceOutUp {
  0%   { transform: translateY(0); }
  15%  { opacity: 1; transform: translateY(14px); }
  100% { opacity: 0; transform: translateY(calc(var(--animate-distance-xl) * -1)); }
}
.bounceOutUp { animation-name: bounceOutUp; animation-timing-function: var(--ease-in-expo); }


/* ============================================
   FADE ENTRANCES
   ============================================ */

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.fadeIn { animation-name: fadeIn; }

@keyframes fadeInDown {
  0%   { opacity: 0; transform: translateY(calc(var(--animate-distance-md) * -1)); }
  100% { opacity: 1; transform: translateY(0); }
}
.fadeInDown { animation-name: fadeInDown; }

@keyframes fadeInDownBig {
  0%   { opacity: 0; transform: translateY(calc(var(--animate-distance-xl) * -1)); }
  100% { opacity: 1; transform: translateY(0); }
}
.fadeInDownBig { animation-name: fadeInDownBig; }

@keyframes fadeInLeft {
  0%   { opacity: 0; transform: translateX(calc(var(--animate-distance-sm) * -1)); }
  100% { opacity: 1; transform: translateX(0); }
}
.fadeInLeft { animation-name: fadeInLeft; }

@keyframes fadeInLeftBig {
  0%   { opacity: 0; transform: translateX(calc(var(--animate-distance-xl) * -1)); }
  100% { opacity: 1; transform: translateX(0); }
}
.fadeInLeftBig { animation-name: fadeInLeftBig; }

@keyframes fadeInRight {
  0%   { opacity: 0; transform: translateX(var(--animate-distance-sm)); }
  100% { opacity: 1; transform: translateX(0); }
}
.fadeInRight { animation-name: fadeInRight; }

@keyframes fadeInRightBig {
  0%   { opacity: 0; transform: translateX(var(--animate-distance-xl)); }
  100% { opacity: 1; transform: translateX(0); }
}
.fadeInRightBig { animation-name: fadeInRightBig; }

@keyframes fadeInUp {
  0%   { opacity: 0; transform: translateY(var(--animate-distance-md)); }
  100% { opacity: 1; transform: translateY(0); }
}
.fadeInUp { animation-name: fadeInUp; }

@keyframes fadeInUpBig {
  0%   { opacity: 0; transform: translateY(var(--animate-distance-xl)); }
  100% { opacity: 1; transform: translateY(0); }
}
.fadeInUpBig { animation-name: fadeInUpBig; }


/* ============================================
   FADE EXITS
   ============================================ */

@keyframes fadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
.fadeOut { animation-name: fadeOut; animation-timing-function: var(--ease-in-expo); }

@keyframes fadeOutDown {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(var(--animate-distance-sm)); }
}
.fadeOutDown { animation-name: fadeOutDown; animation-timing-function: var(--ease-in-expo); }

@keyframes fadeOutDownBig {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(var(--animate-distance-xl)); }
}
.fadeOutDownBig { animation-name: fadeOutDownBig; animation-timing-function: var(--ease-in-expo); }

@keyframes fadeOutLeft {
  0%   { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(calc(var(--animate-distance-sm) * -1)); }
}
.fadeOutLeft { animation-name: fadeOutLeft; animation-timing-function: var(--ease-in-expo); }

@keyframes fadeOutLeftBig {
  0%   { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(calc(var(--animate-distance-xl) * -1)); }
}
.fadeOutLeftBig { animation-name: fadeOutLeftBig; animation-timing-function: var(--ease-in-expo); }

@keyframes fadeOutRight {
  0%   { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(var(--animate-distance-sm)); }
}
.fadeOutRight { animation-name: fadeOutRight; animation-timing-function: var(--ease-in-expo); }

@keyframes fadeOutRightBig {
  0%   { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(var(--animate-distance-xl)); }
}
.fadeOutRightBig { animation-name: fadeOutRightBig; animation-timing-function: var(--ease-in-expo); }

@keyframes fadeOutUp {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(calc(var(--animate-distance-sm) * -1)); }
}
.fadeOutUp { animation-name: fadeOutUp; animation-timing-function: var(--ease-in-expo); }

@keyframes fadeOutUpBig {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(calc(var(--animate-distance-xl) * -1)); }
}
.fadeOutUpBig { animation-name: fadeOutUpBig; animation-timing-function: var(--ease-in-expo); }


/* ============================================
   FLIPPERS
   ============================================ */

@keyframes flip {
  0%   { transform: perspective(500px) rotateY(-360deg) scale(1); animation-timing-function: ease-out; }
  40%  { transform: perspective(500px) translateZ(100px) rotateY(-190deg) scale(1); animation-timing-function: ease-out; }
  50%  { transform: perspective(500px) translateZ(100px) rotateY(-170deg) scale(1); animation-timing-function: ease-in; }
  80%  { transform: perspective(500px) scale(0.96); animation-timing-function: ease-in; }
  100% { transform: perspective(500px) scale(1); animation-timing-function: ease-in; }
}
.animated.flip {
  backface-visibility: visible;
  animation-name: flip;
}

@keyframes flipInX {
  0%   { transform: perspective(500px) rotateX(80deg); opacity: 0; }
  40%  { transform: perspective(500px) rotateX(-8deg); }
  70%  { transform: perspective(500px) rotateX(6deg); }
  100% { transform: perspective(500px) rotateX(0); opacity: 1; }
}
.flipInX {
  backface-visibility: visible !important;
  animation-name: flipInX;
  animation-timing-function: var(--ease-spring);
}

@keyframes flipInY {
  0%   { transform: perspective(500px) rotateY(80deg); opacity: 0; }
  40%  { transform: perspective(500px) rotateY(-8deg); }
  70%  { transform: perspective(500px) rotateY(6deg); }
  100% { transform: perspective(500px) rotateY(0); opacity: 1; }
}
.flipInY {
  backface-visibility: visible !important;
  animation-name: flipInY;
  animation-timing-function: var(--ease-spring);
}

@keyframes flipOutX {
  0%   { transform: perspective(500px) rotateX(0); opacity: 1; }
  100% { transform: perspective(500px) rotateX(80deg); opacity: 0; }
}
.flipOutX {
  animation-name: flipOutX;
  backface-visibility: visible !important;
  animation-timing-function: var(--ease-in-expo);
}

@keyframes flipOutY {
  0%   { transform: perspective(500px) rotateY(0); opacity: 1; }
  100% { transform: perspective(500px) rotateY(80deg); opacity: 0; }
}
.flipOutY {
  backface-visibility: visible !important;
  animation-name: flipOutY;
  animation-timing-function: var(--ease-in-expo);
}


/* ============================================
   LIGHTSPEED
   ============================================ */

@keyframes lightSpeedIn {
  0%   { transform: translateX(80%) skewX(-20deg); opacity: 0; }
  60%  { transform: translateX(-8%) skewX(14deg); opacity: 1; }
  80%  { transform: skewX(-6deg); }
  100% { transform: translateX(0) skewX(0); opacity: 1; }
}
.lightSpeedIn { animation-name: lightSpeedIn; animation-timing-function: ease-out; }

@keyframes lightSpeedOut {
  0%   { transform: translateX(0) skewX(0); opacity: 1; }
  100% { transform: translateX(80%) skewX(-20deg); opacity: 0; }
}
.lightSpeedOut { animation-name: lightSpeedOut; animation-timing-function: ease-in; }


/* ============================================
   ROTATIONS — ENTRANCES
   ============================================ */

@keyframes rotateIn {
  0%   { transform-origin: center; transform: rotate(-180deg); opacity: 0; }
  100% { transform-origin: center; transform: rotate(0); opacity: 1; }
}
.rotateIn { animation-name: rotateIn; animation-timing-function: var(--ease-out-expo); }

@keyframes rotateInDownLeft {
  0%   { transform-origin: left bottom; transform: rotate(-75deg); opacity: 0; }
  100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; }
}
.rotateInDownLeft { animation-name: rotateInDownLeft; animation-timing-function: var(--ease-out-expo); }

@keyframes rotateInDownRight {
  0%   { transform-origin: right bottom; transform: rotate(75deg); opacity: 0; }
  100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; }
}
.rotateInDownRight { animation-name: rotateInDownRight; animation-timing-function: var(--ease-out-expo); }

@keyframes rotateInUpLeft {
  0%   { transform-origin: left bottom; transform: rotate(75deg); opacity: 0; }
  100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; }
}
.rotateInUpLeft { animation-name: rotateInUpLeft; animation-timing-function: var(--ease-out-expo); }

@keyframes rotateInUpRight {
  0%   { transform-origin: right bottom; transform: rotate(-75deg); opacity: 0; }
  100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; }
}
.rotateInUpRight { animation-name: rotateInUpRight; animation-timing-function: var(--ease-out-expo); }


/* ============================================
   ROTATIONS — EXITS
   ============================================ */

@keyframes rotateOut {
  0%   { transform-origin: center; transform: rotate(0); opacity: 1; }
  100% { transform-origin: center; transform: rotate(180deg); opacity: 0; }
}
.rotateOut { animation-name: rotateOut; animation-timing-function: var(--ease-in-expo); }

@keyframes rotateOutDownLeft {
  0%   { transform-origin: left bottom; transform: rotate(0); opacity: 1; }
  100% { transform-origin: left bottom; transform: rotate(75deg); opacity: 0; }
}
.rotateOutDownLeft { animation-name: rotateOutDownLeft; animation-timing-function: var(--ease-in-expo); }

@keyframes rotateOutDownRight {
  0%   { transform-origin: right bottom; transform: rotate(0); opacity: 1; }
  100% { transform-origin: right bottom; transform: rotate(-75deg); opacity: 0; }
}
.rotateOutDownRight { animation-name: rotateOutDownRight; animation-timing-function: var(--ease-in-expo); }

@keyframes rotateOutUpLeft {
  0%   { transform-origin: left bottom; transform: rotate(0); opacity: 1; }
  100% { transform-origin: left bottom; transform: rotate(-75deg); opacity: 0; }
}
.rotateOutUpLeft { animation-name: rotateOutUpLeft; animation-timing-function: var(--ease-in-expo); }

@keyframes rotateOutUpRight {
  0%   { transform-origin: right bottom; transform: rotate(0); opacity: 1; }
  100% { transform-origin: right bottom; transform: rotate(75deg); opacity: 0; }
}
.rotateOutUpRight { animation-name: rotateOutUpRight; animation-timing-function: var(--ease-in-expo); }


/* ============================================
   SLIDES
   ============================================ */

@keyframes slideInDown {
  0%   { opacity: 0; transform: translateY(calc(var(--animate-distance-lg) * -1)); }
  100% { opacity: 1; transform: translateY(0); }
}
.slideInDown { animation-name: slideInDown; }

@keyframes slideInLeft {
  0%   { opacity: 0; transform: translateX(calc(var(--animate-distance-lg) * -1)); }
  100% { opacity: 1; transform: translateX(0); }
}
.slideInLeft { animation-name: slideInLeft; }

@keyframes slideInRight {
  0%   { opacity: 0; transform: translateX(var(--animate-distance-lg)); }
  100% { opacity: 1; transform: translateX(0); }
}
.slideInRight { animation-name: slideInRight; }

@keyframes slideInUp {
  0%   { opacity: 0; transform: translateY(var(--animate-distance-lg)); }
  100% { opacity: 1; transform: translateY(0); }
}
.slideInUp { animation-name: slideInUp; }

@keyframes slideOutDown {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(var(--animate-distance-lg)); }
}
.slideOutDown { animation-name: slideOutDown; animation-timing-function: var(--ease-in-expo); }

@keyframes slideOutLeft {
  0%   { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(calc(var(--animate-distance-lg) * -1)); }
}
.slideOutLeft { animation-name: slideOutLeft; animation-timing-function: var(--ease-in-expo); }

@keyframes slideOutRight {
  0%   { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(var(--animate-distance-lg)); }
}
.slideOutRight { animation-name: slideOutRight; animation-timing-function: var(--ease-in-expo); }

@keyframes slideOutUp {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(calc(var(--animate-distance-xl) * -1)); }
}
.slideOutUp { animation-name: slideOutUp; animation-timing-function: var(--ease-in-expo); }


/* ============================================
   SPECIALS
   ============================================ */

@keyframes hinge {
  0%       { transform-origin: top left; transform: rotate(0); animation-timing-function: ease-in-out; }
  20%, 60% { transform-origin: top left; transform: rotate(70deg); animation-timing-function: ease-in-out; }
  40%      { transform-origin: top left; transform: rotate(55deg); animation-timing-function: ease-in-out; }
  80%      { transform-origin: top left; transform: rotate(55deg) translateY(0); opacity: 1; animation-timing-function: ease-in-out; }
  100%     { transform: translateY(500px); opacity: 0; }
}
.hinge { animation-name: hinge; }

@keyframes rollIn {
  0%   { opacity: 0; transform: translateX(-100%) rotate(-100deg); }
  100% { opacity: 1; transform: translateX(0) rotate(0); }
}
.rollIn { animation-name: rollIn; animation-timing-function: var(--ease-out-expo); }

@keyframes rollOut {
  0%   { opacity: 1; transform: translateX(0) rotate(0); }
  100% { opacity: 0; transform: translateX(100%) rotate(100deg); }
}
.rollOut { animation-name: rollOut; animation-timing-function: var(--ease-in-expo); }


/* ============================================
   ZOOM ENTRANCES
   ============================================ */

@keyframes zoomIn {
  0%  { opacity: 0; transform: scale(0.35); }
  50% { opacity: 1; }
}
.zoomIn { animation-name: zoomIn; animation-timing-function: var(--ease-out-expo); }

@keyframes zoomInDown {
  0%  { opacity: 0; transform: scale(0.15) translateY(calc(var(--animate-distance-xl) * -1)); animation-timing-function: var(--ease-in-out-quint); }
  60% { opacity: 1; transform: scale(0.5) translateY(var(--animate-distance-md)); animation-timing-function: var(--ease-out-expo); }
}
.zoomInDown { animation-name: zoomInDown; }

@keyframes zoomInLeft {
  0%  { opacity: 0; transform: scale(0.15) translateX(calc(var(--animate-distance-xl) * -1)); animation-timing-function: var(--ease-in-out-quint); }
  60% { opacity: 1; transform: scale(0.5) translateX(36px); animation-timing-function: var(--ease-out-expo); }
}
.zoomInLeft { animation-name: zoomInLeft; }

@keyframes zoomInRight {
  0%  { opacity: 0; transform: scale(0.15) translateX(var(--animate-distance-xl)); animation-timing-function: var(--ease-in-out-quint); }
  60% { opacity: 1; transform: scale(0.5) translateX(-36px); animation-timing-function: var(--ease-out-expo); }
}
.zoomInRight { animation-name: zoomInRight; }

@keyframes zoomInUp {
  0%  { opacity: 0; transform: scale(0.15) translateY(var(--animate-distance-xl)); animation-timing-function: var(--ease-in-out-quint); }
  60% { opacity: 1; transform: scale(0.5) translateY(calc(var(--animate-distance-md) * -1)); animation-timing-function: var(--ease-out-expo); }
}
.zoomInUp { animation-name: zoomInUp; }


/* ============================================
   ZOOM EXITS
   ============================================ */

@keyframes zoomOut {
  0%  { opacity: 1; transform: scale(1); }
  50% { opacity: 0; transform: scale(0.35); }
  100% { opacity: 0; }
}
.zoomOut { animation-name: zoomOut; animation-timing-function: var(--ease-in-expo); }

@keyframes zoomOutDown {
  40%  { opacity: 1; transform: scale(0.5) translateY(calc(var(--animate-distance-md) * -1)); animation-timing-function: linear; }
  100% { opacity: 0; transform: scale(0.15) translateY(var(--animate-distance-xl)); transform-origin: center bottom; }
}
.zoomOutDown { animation-name: zoomOutDown; }

@keyframes zoomOutLeft {
  40%  { opacity: 1; transform: scale(0.5) translateX(30px); animation-timing-function: linear; }
  100% { opacity: 0; transform: scale(0.15) translateX(calc(var(--animate-distance-xl) * -1)); transform-origin: left center; }
}
.zoomOutLeft { animation-name: zoomOutLeft; }

@keyframes zoomOutRight {
  40%  { opacity: 1; transform: scale(0.5) translateX(-30px); animation-timing-function: linear; }
  100% { opacity: 0; transform: scale(0.15) translateX(var(--animate-distance-xl)); transform-origin: right center; }
}
.zoomOutRight { animation-name: zoomOutRight; }

@keyframes zoomOutUp {
  40%  { opacity: 1; transform: scale(0.5) translateY(var(--animate-distance-md)); animation-timing-function: linear; }
  100% { opacity: 0; transform: scale(0.15) translateY(calc(var(--animate-distance-xl) * -1)); transform-origin: center top; }
}
.zoomOutUp { animation-name: zoomOutUp; }


/* ============================================
   BONUS — MODERN EXTRAS
   ============================================ */

/* --- Blur In --- */
@keyframes blurIn {
  0%   { opacity: 0; filter: blur(16px); transform: scale(0.95); }
  100% { opacity: 1; filter: blur(0); transform: scale(1); }
}
.blurIn { animation-name: blurIn; animation-timing-function: var(--ease-out-expo); }

/* --- Blur Out --- */
@keyframes blurOut {
  0%   { opacity: 1; filter: blur(0); transform: scale(1); }
  100% { opacity: 0; filter: blur(16px); transform: scale(1.04); }
}
.blurOut { animation-name: blurOut; animation-timing-function: var(--ease-in-expo); }

/* --- Soft Rise --- */
@keyframes softRise {
  0%   { opacity: 0; transform: translateY(20px) scale(0.98); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.softRise { animation-name: softRise; animation-timing-function: var(--ease-out-expo); }

/* --- Drift In --- */
@keyframes driftIn {
  0%   { opacity: 0; transform: translateY(30px) rotate(-1.5deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}
.driftIn { animation-name: driftIn; animation-timing-function: var(--ease-out-expo); }

/* --- Scale Pop --- */
@keyframes scalePop {
  0%   { opacity: 0; transform: scale(0.6); }
  70%  { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
.scalePop { animation-name: scalePop; animation-timing-function: var(--ease-spring); }

/* --- Gentle Pulse (subtle, for UI hints) --- */
@keyframes gentlePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.03); opacity: 0.85; }
}
.gentlePulse { animation-name: gentlePulse; animation-duration: 2s; animation-timing-function: var(--ease-smooth); }