/* Animations CSS - styles/animations.css */
 
 /* Glitch Effect */
 .glitch{
 position: relative;
 display: inline-block;
}
 
 .glitch::before,
 .glitch::after{
 content: attr(data-text);
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
 
 .glitch::before{
 animation: glitch-1 2s infinite linear alternate-reverse;
 color: var(--electric-blue);
 z-index: -1;
}
 
 .glitch::after{
 animation: glitch-2 1.5s infinite linear alternate-reverse;
 color: var(--neon-pink);
 z-index: -2;
}
 
 @keyframes glitch-1{
 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 glitch-2{
 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);
}
}
 
 /* Floating Animation */
 @keyframes float{
 0%, 100%{
 transform: translateY(0) rotate(0deg);
}
 25%{
 transform: translateY(-20px) rotate(5deg);
}
 50%{
 transform: translateY(-40px) rotate(0deg);
}
 75%{
 transform: translateY(-20px) rotate(-5deg);
}
}
 
 /* Bounce Animation */
 @keyframes bounce{
 0%, 20%, 50%, 80%, 100%{
 transform: translateY(0);
}
 40%{
 transform: translateY(-10px);
}
 60%{
 transform: translateY(-5px);
}
}
 
 /* Scroll Animation */
 @keyframes scroll{
 0%{
 opacity: 0;
 transform: translateX(-50%) translateY(0);
}
 50%{
 opacity: 1;
 transform: translateX(-50%) translateY(10px);
}
 100%{
 opacity: 0;
 transform: translateX(-50%) translateY(20px);
}
}
 
 /* Pulse Animation */
 @keyframes pulse{
 0%{
 box-shadow: 0 0 0 0 rgba(255, 0, 110, 0.7);
}
 70%{
 box-shadow: 0 0 0 20px rgba(255, 0, 110, 0);
}
 100%{
 box-shadow: 0 0 0 0 rgba(255, 0, 110, 0);
}
}
 
 /* Rainbow Animation */
 @keyframes rainbow{
 0%{ color: var(--neon-pink);}
 16.666%{ color: var(--radical-orange);}
 33.333%{ color: var(--sunshine-yellow);}
 50%{ color: var(--lime-green);}
 66.666%{ color: var(--electric-blue);}
 83.333%{ color: var(--hot-purple);}
 100%{ color: var(--neon-pink);}
}
 
 /* Wobble Animation */
 @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%);}
}
 
 /* Slide In Animations */
 @keyframes slideInLeft{
 from{
 opacity: 0;
 transform: translateX(-100px);
}
 to{
 opacity: 1;
 transform: translateX(0);
}
}
 
 @keyframes slideInRight{
 from{
 opacity: 0;
 transform: translateX(100px);
}
 to{
 opacity: 1;
 transform: translateX(0);
}
}
 
 @keyframes slideInUp{
 from{
 opacity: 0;
 transform: translateY(100px);
}
 to{
 opacity: 1;
 transform: translateY(0);
}
}
 
 /* Fade In Animation */
 @keyframes fadeIn{
 from{
 opacity: 0;
}
 to{
 opacity: 1;
}
}
 
 /* Scale In Animation */
 @keyframes scaleIn{
 from{
 opacity: 0;
 transform: scale(0.5);
}
 to{
 opacity: 1;
 transform: scale(1);
}
}
 
 /* Utility Classes */
 .animate-pulse{
 animation: pulse 2s infinite;
}
 
 .animate-bounce{
 animation: bounce 1s infinite;
}
 
 .animate-wobble{
 animation: wobble 1s ease-in-out;
}
 
 .animate-rainbow{
 animation: rainbow 3s linear infinite;
}
 
 .animate-slide-in-left{
 animation: slideInLeft 0.8s ease-out;
}
 
 .animate-slide-in-right{
 animation: slideInRight 0.8s ease-out;
}
 
 .animate-slide-in-up{
 animation: slideInUp 0.8s ease-out;
}
 
 .animate-fade-in{
 animation: fadeIn 1s ease-in;
}
 
 .animate-scale-in{
 animation: scaleIn 0.5s ease-out;
}
 
 /* Hover Effects */
 .hover-glow:hover{
 box-shadow: 0 0 20px var(--neon-pink), 0 0 30px var(--neon-pink), 0 0 40px var(--neon-pink);
 transition: all 0.3s ease;
}
 
 .hover-rotate:hover{
 transform: rotate(360deg);
 transition: transform 0.5s ease;
}
 
 .hover-shake:hover{
 animation: wobble 0.5s ease-in-out;
}
 
 /* Text Effects */
 .text-glow{
 text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
}
 
 .text-outline{
 -webkit-text-stroke: 2px var(--hot-purple);
 text-shadow: 3px 3px 0 var(--neon-pink);
}
 
 /* Background Animations */
 @keyframes gradientShift{
 0%{
 background-position: 0% 50%;
}
 50%{
 background-position: 100% 50%;
}
 100%{
 background-position: 0% 50%;
}
}
 
 .animated-gradient{
 background: linear-gradient(-45deg, var(--neon-pink), var(--electric-blue), var(--lime-green), var(--hot-purple));
 background-size: 400% 400%;
 animation: gradientShift 15s ease infinite;
}
 
 /* Loading Spinner */
 @keyframes spin{
 0%{ transform: rotate(0deg);}
 100%{ transform: rotate(360deg);}
}
 
 .spinner{
 width: 40px;
 height: 40px;
 border: 4px solid rgba(255, 255, 255, 0.3);
 border-left: 4px solid var(--neon-pink);
 border-radius: 50%;
 animation: spin 1s linear infinite;
}
 
 /* Particle Effect */
 @keyframes particle-float{
 0%{
 transform: translateY(100vh) scale(0);
 opacity: 0;
}
 10%{
 opacity: 1;
}
 90%{
 opacity: 1;
}
 100%{
 transform: translateY(-100vh) scale(1);
 opacity: 0;
}
}
 
 .particle{
 position: absolute;
 width: 6px;
 height: 6px;
 background: var(--neon-pink);
 border-radius: 50%;
 animation: particle-float 8s linear infinite;
}
 
 /* Neon Glow Effect */
 .neon-glow{
 color: var(--electric-blue);
 text-shadow: 
 0 0 5px var(--electric-blue),
 0 0 10px var(--electric-blue),
 0 0 15px var(--electric-blue),
 0 0 20px var(--electric-blue);
}
 
 /* Typing Animation */
 @keyframes typing{
 from{ width: 0;}
 to{ width: 100%;}
}
 
 @keyframes blink-caret{
 from, to{ border-color: transparent;}
 50%{ border-color: var(--neon-pink);}
}
 
 .typewriter{
 overflow: hidden;
 border-right: .15em solid var(--neon-pink);
 white-space: nowrap;
 margin: 0 auto;
 letter-spacing: .15em;
 animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}