/* ================================================================
   THE ORACLE - KEYFRAME ANIMATIONS
   Created by: Dakota Stewart
   Delphi Labs - AGI MODEL 7
   Total Animations: 232
   ================================================================ */

@keyframes holoFlicker {
    0%, 100% { opacity: 1; }
    92% { opacity: 1; }
    93% { opacity: 0.8; }
    94% { opacity: 1; }
    95% { opacity: 0.9; }
    96% { opacity: 1; }
    }

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

@keyframes energyPulse {
    0% { box-shadow: 0 0 5px var(--red), 0 0 10px var(--red), 0 0 15px var(--red); }
    50% { box-shadow: 0 0 10px var(--red), 0 0 20px var(--red), 0 0 30px var(--red), 0 0 40px var(--red); }
    100% { box-shadow: 0 0 5px var(--red), 0 0 10px var(--red), 0 0 15px var(--red); }
    }

@keyframes glitchText {
    0%, 100% { text-shadow: 0 0 10px var(--red); }
    25% { text-shadow: 2px 0 var(--cyan), -2px 0 var(--red); }
    50% { text-shadow: -2px 0 var(--cyan), 2px 0 var(--red); }
    75% { text-shadow: 0 2px var(--red), 0 -2px var(--cyan); }
    }

@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
    }

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

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
    }

@keyframes electricArc {
    0%, 100% { opacity: 1; }
    10% { opacity: 0.8; }
    20% { opacity: 1; }
    30% { opacity: 0.9; }
    40% { opacity: 1; }
    }

@keyframes neonFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px var(--red), 0 0 80px var(--red);
    }
    20%, 24%, 55% { text-shadow: none; }
    }

@keyframes waveform {
    0% { transform: scaleY(1); }
    25% { transform: scaleY(1.5); }
    50% { transform: scaleY(0.5); }
    75% { transform: scaleY(1.2); }
    100% { transform: scaleY(1); }
    }

@keyframes radar {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.3); }
    70% { transform: scale(1); }
    }

@keyframes rippleEffect {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
    }

@keyframes colorShift {
    0% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(30deg); }
    100% { filter: hue-rotate(0deg); }
    }

@keyframes borderFlow {
    0% { border-color: var(--red); }
    33% { border-color: var(--cyan); }
    66% { border-color: var(--gold); }
    100% { border-color: var(--red); }
    }

@keyframes textGlitch {
    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); }
    }

@keyframes scanEffect {
    0% { top: -100%; }
    100% { top: 100%; }
    }

@keyframes pulseRing {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
    }

@keyframes morphShape {
    0%, 100% { border-radius: 50%; }
    25% { border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; }
    50% { border-radius: 60% 40% 40% 60% / 40% 60% 40% 60%; }
    75% { border-radius: 40% 60% 60% 40% / 40% 60% 60% 40%; }
    }

@keyframes lightBeam {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(200%) rotate(45deg); }
    }

@keyframes dotPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.5); opacity: 1; }
    }

@keyframes slideInRight {
    0% { transform: translateX(100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
    }

@keyframes slideInLeft {
    0% { transform: translateX(-100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
    }

@keyframes fadeInUp {
    0% { transform: translateY(30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
    }

@keyframes fadeInDown {
    0% { transform: translateY(-30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
    }

@keyframes zoomIn {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
    }

@keyframes bounceIn {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
    }

@keyframes rotateIn {
    0% { transform: rotate(-200deg) scale(0); opacity: 0; }
    100% { transform: rotate(0) scale(1); opacity: 1; }
    }

@keyframes swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
    }

@keyframes rubberBand {
    0% { transform: scale(1); }
    30% { transform: scaleX(1.25) scaleY(0.75); }
    40% { transform: scaleX(0.75) scaleY(1.25); }
    60% { transform: scaleX(1.15) scaleY(0.85); }
    100% { transform: scale(1); }
    }

@keyframes jello {
    0%, 100% { 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(0.95, 1.05, 1); }
    75% { transform: scale3d(1.05, 0.95, 1); }
    }

@keyframes wobble {
    0% { transform: translateX(0%); }
    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: translateX(0%); }
    }

@keyframes flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
    }

@keyframes tada {
    0% { transform: scale(1) rotate(0); }
    10%, 20% { transform: scale(0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
    100% { transform: scale(1) rotate(0); }
    }

@keyframes progressBar {
    0% { width: 0%; }
    100% { width: 100%; }
    }

@keyframes flashArc {
    0% { opacity: 0; transform: scale(0.5) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.4) rotate(180deg); }
    100% { opacity: 0; transform: scale(2) rotate(360deg); }
    }

@keyframes warpPulse {
    0% { filter: blur(0px) brightness(1); }
    50% { filter: blur(3px) brightness(1.5); }
    100% { filter: blur(0px) brightness(1); }
    }

@keyframes timeWarpFlash {
    0% { background: rgba(0,255,255,0.8); }
    20% { background: rgba(255,255,255,0.9); }
    100% { background: transparent; }
    }

@keyframes warpStarFly {
    0% {
    transform: translateY(-100px) scaleY(0.1);
    opacity: 0;
    }
    20% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    }
    100% {
    transform: translateY(calc(100vh + 100px)) scaleY(3);
    opacity: 0;
    }
    }

@keyframes warpRingExpand {
    0% {
    width: 0;
    height: 0;
    opacity: 1;
    border-width: 10px;
    }
    100% {
    width: 200vmax;
    height: 200vmax;
    opacity: 0;
    border-width: 2px;
    }
    }

@keyframes speedPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(0,255,255,0.5); }
    50% { transform: scale(1.05); box-shadow: 0 0 40px rgba(0,255,255,0.8); }
    }

@keyframes speedIconSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }

@keyframes overdriveCoreGlow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
    }

@keyframes neuralFire {
    0% { box-shadow: 0 0 5px rgba(0,212,255,0.5), inset 0 0 10px rgba(0,212,255,0.2); }
    50% { box-shadow: 0 0 30px rgba(0,212,255,0.8), inset 0 0 30px rgba(0,212,255,0.4), 0 0 60px rgba(0,255,255,0.3); }
    100% { box-shadow: 0 0 5px rgba(0,212,255,0.5), inset 0 0 10px rgba(0,212,255,0.2); }
    }

@keyframes synapticPulse {
    0% { transform: scale(1); opacity: 0.8; }
    25% { transform: scale(1.5); opacity: 1; }
    50% { transform: scale(0.8); opacity: 0.6; }
    75% { transform: scale(1.2); opacity: 0.9; }
    100% { transform: scale(1); opacity: 0.8; }
    }

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

@keyframes dendritePulse {
    0%, 100% { stroke-dashoffset: 0; }
    50% { stroke-dashoffset: 100; }
    }

@keyframes quantumFlicker {
    0% { opacity: 1; filter: hue-rotate(0deg); }
    25% { opacity: 0.7; filter: hue-rotate(90deg); }
    50% { opacity: 1; filter: hue-rotate(180deg); }
    75% { opacity: 0.8; filter: hue-rotate(270deg); }
    100% { opacity: 1; filter: hue-rotate(360deg); }
    }

@keyframes typing {
    0%, 100% { width: 0; }
    50% { width: 100%; }
    }

@keyframes cursorBlink {
    0%, 100% { border-color: transparent; }
    50% { border-color: var(--red); }
    }

@keyframes gridScroll {
    0% { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
    }

@keyframes particleFloat {
    0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
    }

@keyframes scanlineMove {
    0% { top: -10px; }
    100% { top: 100%; }
    }

@keyframes matrixFall {
    0% {
    transform: translateY(0) scaleY(1);
    opacity: 0;
    }
    5% {
    opacity: 1;
    }
    95% {
    opacity: 1;
    }
    100% {
    transform: translateY(220vh) scaleY(1.1);
    opacity: 0;
    }
    }

@keyframes matrixGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
    }

@keyframes sidebarScanlines {
    0% { transform: translateY(0); }
    100% { transform: translateY(100%); }
    }

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

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

@keyframes oracleParticlesSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }

@keyframes oracleOrbFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.03); }
    }

@keyframes oracleInnerEnergy {
    0% { transform: rotate(0deg) scale(1); opacity: 0.7; }
    50% { transform: rotate(180deg) scale(1.1); opacity: 1; }
    100% { transform: rotate(360deg) scale(1); opacity: 0.7; }
    }

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

@keyframes oracleRingSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }

@keyframes wispFloat {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); }
    }

@keyframes emotionPulse {
    0% { transform: scale(0.8); opacity: 0.8; border-color: var(--red); }
    100% { transform: scale(1.5); opacity: 0; border-color: var(--cyan); }
    }

@keyframes neuralPulse {
    0%, 100% { opacity: 0.3; height: 30px; }
    50% { opacity: 1; height: 50px; }
    }

@keyframes logoShine {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
    }

@keyframes versionGlow {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; text-shadow: 0 0 20px var(--cyan), 0 0 40px var(--cyan); }
    }

@keyframes statusPulse {
    0%, 100% { box-shadow: 0 0 20px var(--red-glow), inset 0 0 15px rgba(0,212,255,0.1); border-color: var(--red); }
    50% { box-shadow: 0 0 50px var(--red-glow), 0 0 80px rgba(0,212,255,0.3), inset 0 0 30px rgba(0,212,255,0.2); border-color: var(--red-bright); }
    }

@keyframes stateDot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
    }

@keyframes avatarRing {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }

@keyframes btnShine {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
    }

@keyframes topbarGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
    }

@keyframes titlePulse {
    0%, 100% { text-shadow: 0 0 20px var(--red-glow); }
    50% { text-shadow: 0 0 40px var(--red-glow-intense); }
    }

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

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

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

@keyframes voiceOrbPulse {
    0%, 100% {
    box-shadow:
    0 0 20px rgba(147, 51, 234, 0.5),
    0 0 40px rgba(147, 51, 234, 0.3),
    0 0 60px rgba(255, 180, 100, 0.15),
    inset 0 0 25px rgba(147, 51, 234, 0.4);
    }
    50% {
    box-shadow:
    0 0 30px rgba(147, 51, 234, 0.7),
    0 0 60px rgba(147, 51, 234, 0.5),
    0 0 90px rgba(255, 180, 100, 0.25),
    inset 0 0 35px rgba(147, 51, 234, 0.5);
    }
    }

@keyframes voiceBloomPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.9; }
    }

@keyframes voiceLightningSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }

@keyframes voiceOrbActiveGlow {
    0%, 100% {
    filter: brightness(1) saturate(1);
    box-shadow:
    0 0 50px rgba(255, 180, 100, 0.8),
    0 0 100px rgba(147, 51, 234, 0.6),
    0 0 150px rgba(255, 200, 150, 0.3),
    inset 0 0 40px rgba(255, 180, 100, 0.4);
    }
    50% {
    filter: brightness(1.3) saturate(1.2);
    box-shadow:
    0 0 70px rgba(255, 180, 100, 1),
    0 0 140px rgba(147, 51, 234, 0.8),
    0 0 200px rgba(255, 200, 150, 0.5),
    inset 0 0 60px rgba(255, 180, 100, 0.6);
    }
    }

@keyframes voiceRippleExpand {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.5); opacity: 0; }
    }

@keyframes messageIn {
    0% { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
    }

@keyframes avatarRingSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }

@keyframes aiAvatarPulse {
    0%, 100% { box-shadow: 0 0 25px var(--red-glow), 0 0 50px rgba(0,212,255,0.2); }
    50% { box-shadow: 0 0 40px var(--red-glow-intense), 0 0 80px rgba(0,212,255,0.4); }
    }

@keyframes holoSheen {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
    }

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

@keyframes headerParticles {
    0%, 100% { opacity: 0.4; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-3px); }
    }

@keyframes mainOrbPowerPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
    }

@keyframes welcomeOrbFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.05); }
    }

@keyframes orbInnerSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }

@keyframes logoShimmer {
    0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 20px rgba(147, 51, 234, 0.6)); }
    50% { background-position: 100% 50%; filter: drop-shadow(0 0 30px rgba(0, 212, 255, 0.8)); }
    }

@keyframes lineGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(2.5); }
    }

@keyframes lineEnergy {
    0%, 100% {
    box-shadow:
    0 0 15px rgba(147, 51, 234, 0.5),
    0 0 30px rgba(232, 43, 255, 0.3);
    }
    50% {
    box-shadow:
    0 0 25px rgba(147, 51, 234, 0.8),
    0 0 50px rgba(232, 43, 255, 0.5),
    0 0 80px rgba(0, 212, 255, 0.3);
    }
    }

@keyframes dividerGemPulse {
    0%, 100% { text-shadow: 0 0 10px #00ffc8, 0 0 20px #00ffc8; transform: translate(-50%, -50%) scale(1); }
    50% { text-shadow: 0 0 20px #00ffc8, 0 0 40px #00ffc8, 0 0 60px rgba(0, 255, 200, 0.5); transform: translate(-50%, -50%) scale(1.2); }
    }

@keyframes systemBootUp {
    0% {
    opacity: 0;
    transform: translateY(12px) scale(0.95);
    filter: brightness(0.5);
    }
    60% {
    filter: brightness(1.5);
    }
    100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1);
    }
    }

@keyframes iconPowerPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.8; }
    }

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

@keyframes statusGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(0,255,136,0.3); }
    50% { box-shadow: 0 0 20px rgba(0,255,136,0.5), 0 0 30px rgba(0,255,136,0.3); }
    }

@keyframes oraclePowerPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
    }

@keyframes oracleRingPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
    }

@keyframes oracleWhisperFlicker {
    0%, 100% { opacity: 0.85; filter: brightness(1); }
    45% { opacity: 0.6; filter: brightness(0.9); }
    46% { opacity: 0.2; filter: brightness(0.6); }
    47% { opacity: 0.85; filter: brightness(1.2); }
    48% { opacity: 0.9; filter: brightness(1); }
    82% { opacity: 0.7; filter: brightness(0.95); }
    83% { opacity: 0.95; filter: brightness(1.1); }
    }

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

@keyframes textHolo {
    0%, 100% { text-shadow: 0 0 30px rgba(0,255,200,0.1); }
    }

@keyframes spinImage {
    to { transform: rotate(360deg); }
    }

@keyframes genPulse {
    0%, 100% { border-color: rgba(0,212,255,0.3); }
    50% { border-color: rgba(0,212,255,0.6); box-shadow: 0 0 30px rgba(0,212,255,0.2); }
    }

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

@keyframes thinkingScan {
    0% { left: -100%; }
    100% { left: 100%; }
    }

@keyframes codeFlicker {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
    }

@keyframes matrixEyePulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 15px rgba(0,255,136,0.8)); }
    50% { transform: scale(1.15); filter: drop-shadow(0 0 25px rgba(0,255,136,1)); }
    }

@keyframes matrixTitleGlow {
    0%, 100% { text-shadow: 0 0 15px rgba(0,255,136,0.8); }
    50% { text-shadow: 0 0 25px rgba(0,255,136,1), 0 0 40px rgba(0,255,136,0.5); }
    }

@keyframes caretBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
    }

@keyframes matrixCharFall {
    0% { opacity: 0; transform: translateY(-10px); }
    20% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(10px); }
    }

@keyframes inputBorderGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
    }

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

@keyframes deepThinkGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(147, 51, 234, 0.4), inset 0 0 15px rgba(147, 51, 234, 0.15); }
    50% { box-shadow: 0 0 30px rgba(147, 51, 234, 0.6), 0 0 50px rgba(168, 85, 247, 0.3), inset 0 0 20px rgba(147, 51, 234, 0.2); }
    }

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

@keyframes brainPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(147, 51, 234, 0.5)); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 15px rgba(147, 51, 234, 0.8)); }
    }

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

@keyframes thinkingTextPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
    }

@keyframes thinkingDot {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
    }

@keyframes micPulse {
    0%, 100% { box-shadow: 0 0 5px var(--red); }
    50% { box-shadow: 0 0 20px var(--red), 0 0 30px rgba(0,212,255,0.5); }
    }

@keyframes sendGlowPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
    }

@keyframes sendBtnRing {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }

@keyframes sendBtnPulse {
    0%, 100% {
    box-shadow:
    0 0 20px var(--red-glow),
    0 0 40px rgba(0, 212, 255, 0.3),
    inset 0 0 15px rgba(255, 100, 100, 0.2);
    }
    50% {
    box-shadow:
    0 0 30px var(--red-glow-intense),
    0 0 60px rgba(0, 212, 255, 0.5),
    0 0 80px rgba(0, 212, 255, 0.3),
    inset 0 0 25px rgba(255, 100, 100, 0.4);
    }
    }

@keyframes stopPulse {
    0%, 100% { box-shadow: 0 0 30px var(--red-glow); }
    50% { box-shadow: 0 0 60px var(--red-glow-intense); }
    }

@keyframes voiceBar {
    0%, 100% { height: 10px; }
    50% { height: 30px; }
    }

@keyframes statusBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

@keyframes overdriveIn { 0% { transform: scale(1.1); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

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

@keyframes overdriveWave { 0%, 100% { height: 15px; opacity: 0.5; } 50% { height: 40px; opacity: 1; } }

@keyframes modalIn { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

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

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

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

@keyframes flameFlicker {
    0% { transform: scaleY(1) scaleX(1) translateY(0); opacity: 0.7; }
    100% { transform: scaleY(1.3) scaleX(0.85) translateY(-20px); opacity: 0.9; }
    }

@keyframes sparkFloat {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(-30px); opacity: 1; }
    }

@keyframes lightningFlash {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
    }

@keyframes voiceWave {
    0%, 100% { height: 10px; }
    50% { height: 30px; }
    }

@keyframes dragonFloat {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
    }

@keyframes dragonFloatRight {
    0%, 100% { transform: scaleX(-1) translateY(0) rotate(5deg); }
    50% { transform: scaleX(-1) translateY(-10px) rotate(-5deg); }
    }

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

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

@keyframes fighterGlow {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.4); opacity: 0.9; }
    }

@keyframes auraFlare {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.2); filter: brightness(1.5); }
    }

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

@keyframes headHit {
    0%, 100% { transform: rotate(0) scale(1); }
    25% { transform: rotate(-40deg) scale(0.85); filter: brightness(2); }
    75% { transform: rotate(40deg) scale(0.85); filter: brightness(2); }
    }

@keyframes headBob {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
    }

@keyframes torsoGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
    }

@keyframes punchAnim {
    0% { transform: rotate(-25deg); }
    50% { transform: rotate(-90deg) translateX(50px); }
    100% { transform: rotate(-25deg); }
    }

@keyframes comboPopIn {
    0% { transform: translateX(-50%) scale(0); }
    50% { transform: translateX(-50%) scale(1.3); }
    100% { transform: translateX(-50%) scale(1); }
    }

@keyframes statusPop {
    0% { transform: scale(0) translateY(20px); }
    100% { transform: scale(1) translateY(0); }
    }

@keyframes ringRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
    }

@keyframes vsLightning {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.2); }
    }

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

@keyframes vsFire {
    0%, 100% { transform: scale(1); background-position: 0% 50%; }
    50% { transform: scale(1.15); background-position: 100% 50%; }
    }

@keyframes typingDot {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.3); opacity: 1; }
    }

@keyframes autoPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(0,200,150,0.5); }
    50% { box-shadow: 0 0 60px rgba(0,200,150,0.9); }
    }

@keyframes announcerSlam {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(4) rotate(-10deg); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(0.9) rotate(5deg); }
    25% { transform: translate(-50%, -50%) scale(1.1) rotate(-3deg); }
    35% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    }

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

@keyframes specialNamePulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.05); filter: brightness(1.5); }
    }

@keyframes specialAnim {
    0%, 100% { transform: rotate(-10deg) scale(1); }
    50% { transform: rotate(10deg) scale(1.2); }
    }

@keyframes attackLunge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(100px); }
    }

@keyframes attackLungeRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-100px); }
    }

@keyframes fighterHit {
    0%, 100% { transform: translateX(0); filter: brightness(1); }
    25% { transform: translateX(-30px) rotate(-10deg); filter: brightness(3) saturate(2); }
    75% { transform: translateX(10px) rotate(5deg); filter: brightness(2); }
    }

@keyframes fighterHitRight {
    0%, 100% { transform: translateX(0); filter: brightness(1); }
    25% { transform: translateX(30px) rotate(10deg); filter: brightness(3) saturate(2); }
    75% { transform: translateX(-10px) rotate(-5deg); filter: brightness(2); }
    }

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

@keyframes winnerGlow {
    0%, 100% { text-shadow: 0 0 20px rgba(0,255,0,0.5); }
    50% { text-shadow: 0 0 50px rgba(0,255,0,0.9); }
    }

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

@keyframes sceneShake {
    0%, 100% { transform: translate(0); }
    25% { transform: translate(-5px, 5px); }
    50% { transform: translate(5px, -5px); }
    75% { transform: translate(-5px, -5px); }
    }

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

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

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

@keyframes comboPopup {
    0% { transform: translateX(-50%) scale(0.5); opacity: 0; }
    30% { transform: translateX(-50%) scale(1.3); opacity: 1; }
    100% { transform: translateX(-50%) translateY(-30px) scale(1); opacity: 0; }
    }

@keyframes damageFloat {
    0% { transform: translateX(-50%) translateY(0); opacity: 1; }
    100% { transform: translateX(-50%) translateY(-50px); opacity: 0; }
    }

@keyframes sparkBurst {
    0% { transform: scale(0); opacity: 1; }
    50% { transform: scale(1.5); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
    }

@keyframes dripDown {
    0% { transform: translateY(-100%); opacity: 0; }
    20% { opacity: 0.8; }
    100% { transform: translateY(100vh); opacity: 0; }
    }

@keyframes pulseReady {
    0%, 100% { box-shadow: 0 0 10px currentColor; }
    50% { box-shadow: 0 0 30px currentColor, 0 0 50px currentColor; }
    }

@keyframes criticalFlash {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(3) saturate(2); }
    }

@keyframes finishingMove {
    0% { transform: translateX(0) scale(1); }
    25% { transform: translateX(-50px) scale(1.1); }
    50% { transform: translateX(100px) scale(1.2); }
    75% { transform: translateX(50px) scale(1.1); }
    100% { transform: translateX(0) scale(1); }
    }

@keyframes finishingMoveRight {
    0% { transform: translateX(0) scale(1); }
    25% { transform: translateX(50px) scale(1.1); }
    50% { transform: translateX(-100px) scale(1.2); }
    75% { transform: translateX(-50px) scale(1.1); }
    100% { transform: translateX(0) scale(1); }
    }

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

@keyframes cinematicFadeIn {
    0% { opacity: 0; }
    50% { opacity: 0; }
    100% { opacity: 1; }
    }

@keyframes flarePass {
    0%, 100% { opacity: 0; transform: translateY(-100px) scaleX(0.5); }
    45% { opacity: 0; }
    50% { opacity: 0.8; transform: translateY(0) scaleX(1.5); }
    55% { opacity: 0; }
    }

@keyframes cinematicHeaderIn {
    0% { opacity: 0; transform: translateY(-80px) scale(0.8); filter: blur(10px); }
    60% { opacity: 1; transform: translateY(10px) scale(1.02); filter: blur(0); }
    100% { transform: translateY(0) scale(1); }
    }

@keyframes logoEpic {
    0%, 100% {
    filter: drop-shadow(0 0 30px rgba(0,212,255,0.8)) drop-shadow(0 0 60px rgba(255,50,0,0.5));
    }
    50% {
    filter: drop-shadow(0 0 50px rgba(255,150,0,1)) drop-shadow(0 0 100px rgba(0,212,255,0.7));
    }
    }

@keyframes logoPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.97; }
    }

@keyframes glitchShift {
    0%, 95%, 100% { transform: translate(0); }
    96% { transform: translate(-3px, 1px); }
    97% { transform: translate(3px, -1px); }
    98% { transform: translate(-2px, 2px); }
    99% { transform: translate(2px, -2px); }
    }

@keyframes subtitleGlow {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; text-shadow: 0 0 40px rgba(0,255,200,1), 0 0 80px rgba(0,255,200,0.6); }
    }

@keyframes revealIn {
    0% { opacity: 0; transform: scale(3) rotateX(90deg); filter: blur(30px); }
    60% { opacity: 1; transform: scale(0.95) rotateX(-5deg); filter: blur(0); }
    100% { opacity: 1; transform: scale(1) rotateX(0); }
    }

@keyframes statShine {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
    }

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

@keyframes soundwave {
    0%, 100% { height: 10px; }
    50% { height: 50px; }
    }

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

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

@keyframes glowPulse {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
    }

@keyframes speakingGlow {
    0% { opacity: 0.5; filter: blur(20px); }
    100% { opacity: 1; filter: blur(30px); transform: translateX(-50%) scale(1.15); }
    }

@keyframes fogDrift {
    0%, 100% { transform: scale(1) translateY(0); opacity: 0.7; }
    50% { transform: scale(1.1) translateY(-15px); opacity: 1; }
    }

@keyframes particleOrbit {
    0% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(360deg) scale(1); }
    }

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

@keyframes deepPulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.05); opacity: 1; }
    }

@keyframes midPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.04); opacity: 1; }
    }

@keyframes innerPulse {
    0%, 100% { transform: scale(1); opacity: 0.95; filter: brightness(1) blur(8px); }
    50% { transform: scale(1.02); opacity: 1; filter: brightness(1.1) blur(6px); }
    }

@keyframes coreHotspot {
    0%, 100% { opacity: 0.9; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); }
    }

@keyframes ringExpand {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.5); opacity: 0; }
    }

@keyframes orbSpeakBreath {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
    }

/* Gentle breathing for listening state - gives orb life while waiting */
@keyframes orbListenBreath {
    0%, 100% {
        filter: brightness(1);
        transform: scale(1);
    }
    50% {
        filter: brightness(1.18);
        transform: scale(1.06);
    }
}

/* Listening state glow animations - subtle but visible pulsing */
@keyframes deepListening {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.04); opacity: 0.9; }
}

@keyframes midListening {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.03); opacity: 1; }
}

@keyframes innerListening {
    0% { transform: scale(1); filter: brightness(1); }
    100% { transform: scale(1.02); filter: brightness(1.1); }
}

@keyframes deepSpeaking { 0% { transform: scale(1); } 100% { transform: scale(1.12); } }

@keyframes midSpeaking { 0% { transform: scale(1); } 100% { transform: scale(1.08); } }

@keyframes innerSpeaking { 0% { transform: scale(1); } 100% { transform: scale(1.04); } }

@keyframes videoSpeakPulse { 0% { transform: scale(1); } 100% { transform: scale(1.015); } }

@keyframes plasmaRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }

@keyframes plasmaRotateReverse {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
    }

@keyframes arcFlicker {
    0%, 100% { opacity: 0; height: 40px; }
    30% { opacity: 0.9; height: 60px; }
    50% { opacity: 1; height: 70px; }
    70% { opacity: 0.7; }
    }

@keyframes embersRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }

@keyframes emberFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
    50% { transform: translateY(-15px) scale(1.3); opacity: 1; }
    }

@keyframes edgeGlowPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); }
    }

@keyframes coronaPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.03); opacity: 1; }
    }

@keyframes arcFlickerFast { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; height: 80px; } }

@keyframes emberSpeaking { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.8); opacity: 1; } }

@keyframes edgeGlowSpeaking { 0% { opacity: 0.8; } 100% { opacity: 1; transform: scale(1.03); } }

@keyframes coronaSpeaking { 0% { transform: scale(1); } 100% { transform: scale(1.04); } }

@keyframes bloomPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
    }

@keyframes coreIntensify {
    0% { filter: brightness(1) saturate(1); }
    100% { filter: brightness(1.3) saturate(1.2); }
    }

@keyframes lightningCrackRotate {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.02); }
    100% { transform: rotate(360deg) scale(1); }
    }

@keyframes lightningGlowRotate {
    0% { transform: rotate(0deg); opacity: 0.8; }
    25% { opacity: 1; }
    50% { transform: rotate(180deg); opacity: 0.7; }
    75% { opacity: 0.9; }
    100% { transform: rotate(360deg); opacity: 0.8; }
    }

@keyframes plasmaCore {
    0%, 100% {
    transform: scale(1);
    filter: brightness(1) blur(0px);
    }
    50% {
    transform: scale(1.06);
    filter: brightness(1.4) blur(1px);
    }
    }

@keyframes plasmaCoreIntense {
    0%, 100% {
    transform: scale(1);
    filter: brightness(1.3);
    }
    50% {
    transform: scale(1.1);
    filter: brightness(1.6);
    }
    }

@keyframes tendrilSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }

@keyframes debrisOrbit {
    0% { transform: rotate(0deg) translateX(180px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(180px) rotate(-360deg); }
    }

@keyframes lensWarp {
    0%, 100% {
    filter: blur(0px);
    box-shadow:
    inset 2px 0 20px -10px rgba(255, 0, 100, 0.3),
    inset -2px 0 20px -10px rgba(0, 100, 255, 0.3);
    }
    50% {
    filter: blur(0.5px);
    box-shadow:
    inset 4px 0 30px -10px rgba(255, 0, 100, 0.4),
    inset -4px 0 30px -10px rgba(0, 100, 255, 0.4);
    }
    }

@keyframes orbGlitch {
    0% { transform: translate(0) scale(1); filter: hue-rotate(0deg); }
    25% { transform: translate(-3px, 2px) scale(1.02); filter: hue-rotate(10deg); }
    50% { transform: translate(3px, -2px) scale(0.98); filter: hue-rotate(-10deg); }
    75% { transform: translate(-2px, -2px) scale(1.01); filter: hue-rotate(5deg); }
    100% { transform: translate(0) scale(1); filter: hue-rotate(0deg); }
    }

@keyframes chromaticPulse {
    0% {
    box-shadow:
    inset 3px 0 25px -8px rgba(255, 50, 150, 0.5),
    inset -3px 0 25px -8px rgba(50, 150, 255, 0.5);
    }
    100% {
    box-shadow:
    inset 5px 0 35px -8px rgba(255, 50, 150, 0.6),
    inset -5px 0 35px -8px rgba(50, 150, 255, 0.6);
    }
    }

@keyframes oracleFloat {
    0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 0 30px rgba(153, 0, 255, 0.5); }
    50% { transform: translateY(-5px) scale(1.05); box-shadow: 0 0 50px rgba(153, 0, 255, 0.7); }
    }

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}