@charset "UTF-8";

/*!
 * SuperAnimate.css - Enhanced Animation Library
 * Version - 4.2.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Based on Animate.css by Daniel Eden
 * Enhanced with modern effects, 3D transforms, and smoother timing
 */

:root {
  --animation-duration: 1s;
  --animation-timing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --animation-stagger: 0.1s;
}

/* Base animation class with modern defaults */
.animated {
  --duration: var(--animation-duration);
  --timing: var(--animation-timing);
  
  animation-duration: var(--duration);
  animation-fill-mode: both;
  animation-timing-function: var(--timing);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* Timing modifiers */
.animated.fast { --duration: 0.6s; }
.animated.faster { --duration: 0.4s; }
.animated.slow { --duration: 1.6s; }
.animated.slower { --duration: 2.4s; }

/* Delay modifiers */
.animated.delay-1s { animation-delay: 1s; }
.animated.delay-2s { animation-delay: 2s; }
.animated.delay-3s { animation-delay: 3s; }
.animated.delay-4s { animation-delay: 4s; }
.animated.delay-5s { animation-delay: 5s; }

/* Staggered animations */
.animated.stagger-1 { animation-delay: calc(1 * var(--animation-stagger)); }
.animated.stagger-2 { animation-delay: calc(2 * var(--animation-stagger)); }
.animated.stagger-3 { animation-delay: calc(3 * var(--animation-stagger)); }
.animated.stagger-4 { animation-delay: calc(4 * var(--animation-stagger)); }
.animated.stagger-5 { animation-delay: calc(5 * var(--animation-stagger)); }

/* Infinite animation */
.animated.infinite { animation-iteration-count: infinite; }

/* Pulse animation with smoother scaling */
@keyframes pulse {
  0%, 100% { transform: scale3d(1, 1, 1); }
  50% { transform: scale3d(1.08, 1.08, 1.08); }
}
.pulse {
  animation-name: pulse;
}

/* Enhanced bounce with 3D perspective */
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}
.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}

/* Floating animation */
@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(2deg);
  }
}
.float {
  animation-name: float;
  animation-timing-function: ease-in-out;
}

/* 3D Flip animations */
@keyframes flip3d {
  0% {
    transform: perspective(600px) rotateY(0);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(600px) translateZ(120px) rotateY(170deg);
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(600px) translateZ(120px) rotateY(190deg);
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(600px) rotateY(360deg) scale3d(0.95, 0.95, 0.95);
    animation-timing-function: ease-in;
  }
  100% {
    transform: perspective(600px) rotateY(360deg);
    animation-timing-function: ease-in;
  }
}
.flip3d {
  animation-name: flip3d;
  backface-visibility: visible;
}

/* Glow effect */
@keyframes glow {
  0%, 100% {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  }
  50% {
    text-shadow: 0 0 16px rgba(255, 255, 255, 1);
    box-shadow: 0 0 16px rgba(255, 255, 255, 1);
  }
}
.glow {
  animation-name: glow;
}

/* Neon flicker effect */
@keyframes neon {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: 1;
    text-shadow: 0 0 10px #fff,
                 0 0 20px #fff,
                 0 0 30px #fff,
                 0 0 40px #ff00de,
                 0 0 70px #ff00de,
                 0 0 80px #ff00de,
                 0 0 100px #ff00de,
                 0 0 150px #ff00de;
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    opacity: 0.6;
    text-shadow: none;
  }
}
.neon {
  animation-name: neon;
  animation-duration: 1.5s;
}

/* Smooth fade transitions */
@keyframes smoothFadeIn {
  0% { opacity: 0; transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1); }
}
.smoothFadeIn {
  animation-name: smoothFadeIn;
}

@keyframes smoothFadeOut {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.02); }
}
.smoothFadeOut {
  animation-name: smoothFadeOut;
}

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

/* Hover animations */
.hover-grow {
  transition: transform 0.3s var(--animation-timing);
}
.hover-grow:hover {
  transform: scale(1.05);
}

.hover-rotate {
  transition: transform 0.4s var(--animation-timing);
}
.hover-rotate:hover {
  transform: rotate(5deg);
}

/* Attention seekers */
@keyframes vibrate {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}
.vibrate {
  animation-name: vibrate;
}

/* Modern entrance animations */
@keyframes slideInFade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.slideInFade {
  animation-name: slideInFade;
}

@keyframes zoomInFade {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.zoomInFade {
  animation-name: zoomInFade;
}

/* Special effects */
@keyframes ripple {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}
.ripple {
  animation-name: ripple;
  animation-timing-function: linear;
}

/* Responsive animation adjustments */
@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none !important;
    transition: none !important;
  }
}

/* Dark mode aware animations */
@media (prefers-color-scheme: dark) {
  .glow {
    animation-name: glow-dark;
  }
  
  @keyframes glow-dark {
    0%, 100% {
      text-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
      box-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
    }
    50% {
      text-shadow: 0 0 16px rgba(0, 255, 255, 1);
      box-shadow: 0 0 16px rgba(0, 255, 255, 1);
    }
  }
}