/* animations.css - Animation classes and keyframes */

/* Quantum Effects */
@keyframes quantumFluctuation {
  0%, 100% {
    opacity: 0.3;
    transform: translate(0, 0) scale(1);
  }
  25% {
    opacity: 0.6;
    transform: translate(-5px, 5px) scale(1.05);
  }
  50% {
    opacity: 0.4;
    transform: translate(5px, -5px) scale(0.95);
  }
  75% {
    opacity: 0.7;
    transform: translate(-5px, -5px) scale(1.02);
  }
}

.quantum-fluctuate {
  animation: quantumFluctuation 4s ease-in-out infinite;
}

@keyframes quantumEntanglement {
  0% {
    box-shadow: 
      0 0 20px var(--quantum-blue),
      0 0 40px var(--quantum-purple),
      0 0 60px var(--quantum-green);
  }
  33% {
    box-shadow: 
      0 0 20px var(--quantum-purple),
      0 0 40px var(--quantum-green),
      0 0 60px var(--quantum-blue);
  }
  66% {
    box-shadow: 
      0 0 20px var(--quantum-green),
      0 0 40px var(--quantum-blue),
      0 0 60px var(--quantum-purple);
  }
  100% {
    box-shadow: 
      0 0 20px var(--quantum-blue),
      0 0 40px var(--quantum-purple),
      0 0 60px var(--quantum-green);
  }
}

.quantum-entangled {
  animation: quantumEntanglement 3s linear infinite;
}

/* Elemental Animations */
@keyframes waterFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.water-flow {
  background: linear-gradient(90deg, 
    rgba(59, 130, 246, 0.1) 0%,
    rgba(59, 130, 246, 0.3) 25%,
    rgba(59, 130, 246, 0.5) 50%,
    rgba(59, 130, 246, 0.3) 75%,
    rgba(59, 130, 246, 0.1) 100%
  );
  background-size: 200% 100%;
  animation: waterFlow 4s ease-in-out infinite;
}

@keyframes fireFlicker {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  25% {
    opacity: 1;
    transform: scale(1.1);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.9);
  }
  75% {
    opacity: 0.9;
    transform: scale(1.05);
  }
}

.fire-flicker {
  animation: fireFlicker 2s ease-in-out infinite;
}

@keyframes earthPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
  }
}

.earth-pulse {
  animation: earthPulse 2s infinite;
}

@keyframes airFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-10px) rotate(120deg);
  }
  66% {
    transform: translateY(5px) rotate(240deg);
  }
}

.air-float {
  animation: airFloat 6s ease-in-out infinite;
}

/* Transmutation Animations */
@keyframes transmutationFlash {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

.transmutation-flash {
  animation: transmutationFlash 1s ease-out forwards;
}

@keyframes elementCombine {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(var(--tx), var(--ty)) scale(0.5);
    opacity: 0.5;
  }
  100% {
    transform: translate(0, 0) scale(0);
    opacity: 0;
  }
}

.element-combining {
  animation: elementCombine 1s ease-in-out forwards;
}

/* Portal Effects */
@keyframes portalSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.portal-spin {
  animation: portalSpin 20s linear infinite;
}

@keyframes portalRings {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

.portal-ring {
  animation: portalRings 2s linear infinite;
}

/* Particle Effects */
@keyframes particleTrail {
  0% {
    transform: translate(0, 0) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(1);
    opacity: 0;
  }
}

.particle-trail {
  animation: particleTrail 1s ease-out forwards;
}

@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
}

.sparkle {
  animation: sparkle 1s ease-in-out infinite;
}

/* Text Animations */
@keyframes glitch {
  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);
  }
}

.glitch-text {
  animation: glitch 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes textReveal {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

.text-reveal {
  animation: textReveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* Hover Animations */
.hover-lift {
  transition: transform var(--transition-fast);
}

.hover-lift:hover {
  transform: translateY(-4px);
}

.hover-glow {
  transition: box-shadow var(--transition-fast);
}

.hover-glow:hover {
  box-shadow: var(--shadow-glow);
}

.hover-rotate {
  transition: transform var(--transition-base);
}

.hover-rotate:hover {
  transform: rotate(15deg);
}

.hover-pulse {
  animation: pulse 2s infinite;
}

.hover-pulse:hover {
  animation: none;
}

/* Loading Animations */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-down {
  animation: fadeInDown 0.6s ease-out forwards;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-in-left {
  animation: fadeInLeft 0.6s ease-out forwards;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-in-right {
  animation: fadeInRight 0.6s ease-out forwards;
}

/* Stagger Animations */
.stagger-item {
  opacity: 0;
}

.stagger-item.animated {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Page Transitions */
@keyframes pageEnter {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.page-enter {
  animation: pageEnter 0.5s ease-out forwards;
}

@keyframes pageExit {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.1);
  }
}

.page-exit {
  animation: pageExit 0.5s ease-in forwards;
}

/* Special Effects */
@keyframes rainbow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.rainbow-text {
  background: linear-gradient(
    90deg,
    #ff0000,
    #ff9900,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #9900ff,
    #ff00ff
  );
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow 3s linear infinite;
}

@keyframes borderFlow {
  0% {
    border-image: linear-gradient(
      90deg,
      transparent 0%,
      var(--gold-base) 50%,
      transparent 100%
    ) 1;
  }
  100% {
    border-image: linear-gradient(
      90deg,
      transparent 50%,
      var(--gold-base) 100%,
      transparent 150%
    ) 1;
  }
}

.border-flow {
  border: 2px solid transparent;
  animation: borderFlow 2s linear infinite;
}

/* Scroll Animations */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Attention Grabbers */
@keyframes attentionBounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.attention-bounce {
  animation: attentionBounce 0.5s ease infinite;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

.shake {
  animation: shake 0.5s ease-in-out;
}

/* Utility Animation Classes */
.animate-once {
  animation-iteration-count: 1;
}

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

.animate-paused {
  animation-play-state: paused;
}

.animate-running {
  animation-play-state: running;
}

.delay-100 {
  animation-delay: 100ms;
}

.delay-200 {
  animation-delay: 200ms;
}

.delay-300 {
  animation-delay: 300ms;
}

.delay-500 {
  animation-delay: 500ms;
}

.delay-1000 {
  animation-delay: 1000ms;
}

.duration-100 {
  animation-duration: 100ms;
}

.duration-200 {
  animation-duration: 200ms;
}

.duration-300 {
  animation-duration: 300ms;
}

.duration-500 {
  animation-duration: 500ms;
}

.duration-1000 {
  animation-duration: 1000ms;
}

.duration-2000 {
  animation-duration: 2000ms;
}