/**
 * Keyframe Animations for Magic Cat Oracle
 * All @keyframes animations in one place
 */

/* ===== CAT ANIMATIONS ===== */
@keyframes floatCat {
  0%, 100% { 
    transform: translateY(0px); 
  }
  50% { 
    transform: translateY(-15px); 
  }
}

@keyframes glowCat {
  0% { 
    filter: drop-shadow(0 0 15px #a855f7) 
            drop-shadow(0 0 25px #8b5cf6) 
            drop-shadow(0 0 35px #c084fc); 
  }
  50% { 
    filter: drop-shadow(0 0 25px #f0abfc) 
            drop-shadow(0 0 35px #c084fc) 
            drop-shadow(0 0 45px #a78bfa); 
  }
  100% { 
    filter: drop-shadow(0 0 15px #a855f7) 
            drop-shadow(0 0 25px #8b5cf6) 
            drop-shadow(0 0 35px #c084fc); 
  }
}

@keyframes catBlink {
  0%, 100% { opacity: 1; }
  40%, 60% { opacity: 0.3; }
  50% { opacity: 0; }
}

@keyframes glowFlash {
  0% { 
    filter: drop-shadow(0 0 15px #a855f7) 
            drop-shadow(0 0 25px #8b5cf6) 
            drop-shadow(0 0 35px #c084fc); 
  }
  50% { 
    filter: drop-shadow(0 0 40px #f0abfc) 
            drop-shadow(0 0 60px #c084fc) 
            drop-shadow(0 0 80px #a78bfa); 
  }
  100% { 
    filter: drop-shadow(0 0 15px #a855f7) 
            drop-shadow(0 0 25px #8b5cf6) 
            drop-shadow(0 0 35px #c084fc); 
  }
}

/* ===== MOBILE FEEDBACK ANIMATIONS ===== */
@keyframes fadeInOut {
  0% { 
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  20% { 
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  80% { 
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% { 
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

/* Secret cat animations */
@keyframes secretSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(360deg) scale(1.3); }
  100% { transform: rotate(720deg) scale(1); }
}

@keyframes secretBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-30px) scale(1.2); }
  50% { transform: translateY(0) scale(1.1); }
  75% { transform: translateY(-15px) scale(1.15); }
}

@keyframes secretGlow {
  0%, 100% {
    filter: drop-shadow(0 0 15px #a855f7) 
            drop-shadow(0 0 25px #8b5cf6);
  }
  50% {
    filter: drop-shadow(0 0 60px #FFD700) 
            drop-shadow(0 0 80px #FFC107) 
            drop-shadow(0 0 100px #FFEB3B);
  }
}

/* Cat shimmer effect for category rotation */
@keyframes catShimmer {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.3)) brightness(1);
  }
  25% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 30px rgba(168, 85, 247, 0.8))
            drop-shadow(0 0 50px rgba(139, 92, 246, 0.6))
            brightness(1.3);
  }
  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 50px rgba(192, 132, 252, 1))
            drop-shadow(0 0 80px rgba(168, 85, 247, 0.8))
            drop-shadow(0 0 110px rgba(240, 171, 252, 0.6))
            brightness(1.5);
  }
  75% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 30px rgba(168, 85, 247, 0.8))
            drop-shadow(0 0 50px rgba(139, 92, 246, 0.6))
            brightness(1.3);
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.3)) brightness(1);
  }
}

/* User title pulse animation */
@keyframes titlePulse {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.8));
  }
}

/* AI badge pulse animation */
@keyframes aiPulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
  }
  50% {
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.7);
  }
}

/* ===== BUTTON ANIMATIONS ===== */
@keyframes buttonShimmer {
  0% {
    transform: scale(1);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
    border-color: rgba(168, 85, 247, 0.5);
  }
  20% {
    transform: scale(1.03);
    box-shadow: 
      0 0 40px rgba(168, 85, 247, 0.8),
      0 0 70px rgba(139, 92, 246, 0.6),
      0 0 100px rgba(192, 132, 252, 0.4),
      inset 0 0 30px rgba(168, 85, 247, 0.3);
    border-color: rgba(192, 132, 252, 0.9);
    filter: brightness(1.4) saturate(1.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 
      0 0 60px rgba(168, 85, 247, 1),
      0 0 100px rgba(139, 92, 246, 0.8),
      0 0 140px rgba(192, 132, 252, 0.6),
      0 0 180px rgba(236, 72, 153, 0.4),
      inset 0 0 40px rgba(240, 171, 252, 0.5);
    border-color: rgba(240, 171, 252, 1);
    filter: brightness(1.6) saturate(1.5);
  }
  80% {
    transform: scale(1.03);
    box-shadow: 
      0 0 40px rgba(168, 85, 247, 0.8),
      0 0 70px rgba(139, 92, 246, 0.6),
      0 0 100px rgba(192, 132, 252, 0.4),
      inset 0 0 30px rgba(168, 85, 247, 0.3);
    border-color: rgba(192, 132, 252, 0.9);
    filter: brightness(1.4) saturate(1.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
    border-color: rgba(168, 85, 247, 0.5);
    filter: brightness(1) saturate(1);
  }
}

@keyframes purpleSweep {
  0% {
    left: -100%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

/* ===== PARTICLE ANIMATIONS ===== */
@keyframes floatUp {
  from {
    transform: translateY(100vh);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  to {
    transform: translateY(-10vh);
    opacity: 0;
  }
}

@keyframes burstSparkle {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--burst-x), var(--burst-y)) scale(0);
    opacity: 0;
  }
}

@keyframes goldenTwinkle {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* ===== ORACLE TEXT ANIMATIONS ===== */
@keyframes wordAppear {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
    filter: drop-shadow(0 0 0px rgba(200, 150, 255, 0));
  }
  50% {
    transform: scale(1.4) translateY(0);
    filter: drop-shadow(0 0 15px rgba(200, 150, 255, 0.8))
            drop-shadow(0 0 25px rgba(168, 85, 247, 0.6));
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 0 10px rgba(200, 150, 255, 0.6))
            drop-shadow(0 0 15px rgba(168, 85, 247, 0.4));
  }
}

@keyframes wordSparkle {
  0%, 100% {
    box-shadow: 
      0 0 10px rgba(200, 150, 255, 0.6)
      drop-shadow(0 0 15px rgba(168, 85, 247, 0.4));
  }
  50% {
    box-shadow: 
      0 0 20px rgba(200, 150, 255, 1),
      0 -15px 0 -10px rgba(200, 150, 255, 0.8),
      15px -10px 0 -10px rgba(168, 85, 247, 0.8),
      -15px -10px 0 -10px rgba(200, 150, 255, 0.8);
  }
}

/* ===== LEGENDARY ANIMATIONS ===== */
@keyframes legendaryShimmer {
  0%, 100% {
    box-shadow: 
      0 0 30px rgba(255, 215, 0, 0.5),
      0 0 60px rgba(255, 193, 7, 0.3),
      inset 0 0 30px rgba(88, 28, 135, 0.4);
    border-color: rgba(255, 215, 0, 0.8);
  }
  50% {
    box-shadow: 
      0 0 50px rgba(255, 215, 0, 0.7),
      0 0 80px rgba(255, 193, 7, 0.5),
      inset 0 0 40px rgba(88, 28, 135, 0.6);
    border-color: rgba(255, 235, 59, 1);
  }
}

@keyframes legendaryTextGlow {
  0%, 100% {
    text-shadow: 
      0 0 15px rgba(255, 215, 0, 1),
      0 0 25px rgba(255, 193, 7, 0.8),
      1px 1px 3px rgba(0, 0, 0, 1);
  }
  50% {
    text-shadow: 
      0 0 25px rgba(255, 215, 0, 1),
      0 0 35px rgba(255, 193, 7, 1),
      1px 1px 3px rgba(0, 0, 0, 1);
  }
}

@keyframes legendaryPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ===== COMBO ANIMATIONS ===== */
@keyframes comboShake {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  25% { transform: translateX(-50%) rotate(-5deg); }
  75% { transform: translateX(-50%) rotate(5deg); }
}

/* ===== UTILITY ANIMATIONS ===== */
@keyframes rotateStar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

/* ===== CATEGORY-SPECIFIC PARTICLE ANIMATIONS ===== */

/* Ancient Scrolls - floating paper */
@keyframes scrollFloat {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-80vh) rotate(360deg);
    opacity: 0;
  }
}

/* DNA Helix - spiral motion */
@keyframes dnaSpiral {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--spiral-x), var(--spiral-y)) rotate(720deg) scale(1.5);
    opacity: 0;
  }
}

/* Pixel Explosion - retro burst */
@keyframes pixelBurst {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(0);
    opacity: 0;
  }
}

/* Heart Float - rising hearts */
@keyframes heartFloat {
  0% {
    transform: translateY(0) scale(0.5) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(-20px) scale(1) rotate(10deg);
  }
  50% {
    transform: translateY(-50vh) scale(1.2) rotate(-10deg);
  }
  100% {
    transform: translateY(-100vh) scale(0.8) rotate(20deg);
    opacity: 0;
  }
}

/* Coin Rain - falling coins */
@keyframes coinRain {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0.5;
  }
}

/* Health Orbit - circular healing glow */
@keyframes healthOrbit {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--orbit-x)), calc(-50% + var(--orbit-y))) scale(1.5);
    opacity: 0;
  }
}

/* Category particle base styles */
.category-particle {
  position: fixed;
  pointer-events: none;
  z-index: 100;
  user-select: none;
}

.scroll-particle {
  filter: sepia(0.6) brightness(1.2);
}

.dna-particle {
  filter: drop-shadow(0 0 10px rgba(100, 200, 255, 0.8));
}

.pixel-particle {
  box-shadow: 0 0 10px currentColor;
  border-radius: 2px;
}

.heart-particle {
  filter: drop-shadow(0 0 8px rgba(255, 100, 150, 0.8));
}

.coin-particle {
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.9));
}

.health-particle {
  filter: drop-shadow(0 0 12px rgba(100, 255, 150, 0.9));
}

.book-particle {
  filter: drop-shadow(0 0 15px rgba(139, 69, 19, 0.7));
}

.orb-particle {
  filter: drop-shadow(0 0 20px rgba(200, 150, 255, 1));
}

.star-particle {
  filter: drop-shadow(0 0 15px rgba(255, 220, 100, 0.9));
}

.bulb-particle {
  filter: drop-shadow(0 0 12px rgba(255, 200, 50, 0.8));
}

.mask-particle {
  filter: drop-shadow(0 0 10px rgba(255, 150, 200, 0.7));
}

/* ===== CATEGORY-SPECIFIC ANIMATIONS ===== */

/* Ancient Scrolls - for History */
@keyframes scrollFloat {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-120vh) rotate(720deg);
    opacity: 0;
  }
}

/* DNA Helix - for Secrets */
@keyframes dnaSpiral {
  0% {
    transform: translate(var(--spiral-x), var(--spiral-y)) rotate(0deg) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(var(--spiral-x) * -1), calc(var(--spiral-y) * -1)) rotate(720deg) scale(1.5);
    opacity: 0;
  }
}

/* Pixel Explosion - for Gaming */
@keyframes pixelBurst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--burst-x), var(--burst-y)) scale(0);
    opacity: 0;
  }
}

/* Heart Float - for Love */
@keyframes heartFloat {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) rotate(360deg) scale(1.5);
    opacity: 0;
  }
}

/* Coin Rain - for Wealth */
@keyframes coinRain {
  0% {
    transform: translateY(0) rotateY(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(120vh) rotateY(1080deg);
    opacity: 0;
  }
}

/* Health Orbit - for Health */
@keyframes healthOrbit {
  0% {
    transform: translate(0, 0) scale(0.8);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--orbit-x), var(--orbit-y)) scale(2);
    opacity: 0;
  }
}

/* Page Flip - for Tales */
@keyframes pageFlip {
  0% {
    transform: translateX(var(--page-start-x)) rotateY(0deg) scale(0.8);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  50% {
    transform: translateX(calc(var(--page-end-x) / 2)) rotateY(180deg) scale(1.2);
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateX(var(--page-end-x)) rotateY(360deg) scale(0.8);
    opacity: 0;
  }
}

/* Crystal Orbs - for Prophecies */
@keyframes orbFloat {
  0% {
    transform: translate(0, 0) scale(0) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  50% {
    transform: translate(var(--orb-x), var(--orb-y)) scale(1.3) rotate(180deg);
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(var(--orb-x) * 1.5), calc(var(--orb-y) * 1.5)) scale(0.5) rotate(360deg);
    opacity: 0;
  }
}

/* Shooting Stars - for Wishes */
@keyframes starShoot {
  0% {
    transform: translate(0, 0) rotate(-45deg) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--star-end-x), 120vh) rotate(-45deg) scale(0.5);
    opacity: 0;
  }
}

/* Light Bulbs - for Advice */
@keyframes bulbRise {
  0% {
    transform: translateY(0) scale(0.8);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  50% {
    transform: translateY(-50vh) scale(1.2);
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) scale(0.9);
    opacity: 0;
  }
}

/* Comedy Masks - for Humor */
@keyframes maskBounce {
  0% {
    transform: translate(0, 0) scale(0) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: translate(calc(var(--mask-x) * 0.3), calc(var(--mask-y) * 0.3)) scale(1.2) rotate(180deg);
  }
  40% {
    transform: translate(calc(var(--mask-x) * 0.7), calc(var(--mask-y) * 0.7)) scale(0.9) rotate(270deg);
  }
  60% {
    transform: translate(var(--mask-x), var(--mask-y)) scale(1.3) rotate(360deg);
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(var(--mask-x) * 1.3), calc(var(--mask-y) * 1.3)) scale(0) rotate(540deg);
    opacity: 0;
  }
}


/* ===== CATEGORY-SPECIFIC ANIMATIONS ===== */

/* Ancient Scrolls - for History */
@keyframes scrollFloat {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-120vh) rotate(720deg);
    opacity: 0;
  }
}

/* DNA Helix - for Secrets */
@keyframes dnaSpiral {
  0% {
    transform: translate(var(--dna-x), 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(var(--dna-x) * -1), -100vh) rotate(720deg);
    opacity: 0;
  }
}

/* Pixel Explosion - for Gaming */
@keyframes pixelBurst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--pixel-x), var(--pixel-y)) scale(0);
    opacity: 0;
  }
}

/* Heart Float - for Love */
@keyframes heartFloat {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) rotate(360deg) scale(1.5);
    opacity: 0;
  }
}

/* Coin Rain - for Wealth */
@keyframes coinRain {
  0% {
    transform: translateY(0) rotateY(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(120vh) rotateY(1080deg);
    opacity: 0;
  }
}

/* Health Orbit - for Health */
@keyframes healthOrbit {
  0% {
    transform: translate(0, 0) scale(0.8);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--orbit-x), var(--orbit-y)) scale(2);
    opacity: 0;
  }
}

/* Page Flip - for Tales */
@keyframes pageFlip {
  0% {
    transform: translateX(var(--page-start-x)) rotateY(0deg) scale(0.8);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  50% {
    transform: translateX(calc(var(--page-end-x) / 2)) rotateY(180deg) scale(1.2);
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateX(var(--page-end-x)) rotateY(360deg) scale(0.8);
    opacity: 0;
  }
}

/* ===== GOLD ANIMATIONS ===== */
@keyframes goldShine {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 5px rgba(252, 211, 77, 0.5));
  }
  50% {
    transform: scale(1.2);
    filter: drop-shadow(0 0 20px rgba(252, 211, 77, 1)) 
            drop-shadow(0 0 30px rgba(245, 158, 11, 0.8));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 5px rgba(252, 211, 77, 0.5));
  }
}

@keyframes floatUpGold {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-40px) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translateY(-80px) scale(0.8);
    opacity: 0;
  }
}