/* === animations.css === */
/* Glow Animations */
@keyframes glow {
0% {
box-shadow: 0 0 5px rgba(0, 233, 255, 0.3);
}
50% {
box-shadow: 0 0 20px rgba(0, 233, 255, 0.6), 0 0 40px rgba(0, 233, 255, 0.3);
}
100% {
box-shadow: 0 0 5px rgba(0, 233, 255, 0.3);
}
}
@keyframes glow-violet {
0% {
box-shadow: 0 0 5px rgba(138, 46, 255, 0.3);
}
50% {
box-shadow: 0 0 20px rgba(138, 46, 255, 0.6), 0 0 40px rgba(138, 46, 255, 0.3);
}
100% {
box-shadow: 0 0 5px rgba(138, 46, 255, 0.3);
}
}
@keyframes glow-magenta {
0% {
box-shadow: 0 0 5px rgba(255, 0, 160, 0.3);
}
50% {
box-shadow: 0 0 20px rgba(255, 0, 160, 0.6), 0 0 40px rgba(255, 0, 160, 0.3);
}
100% {
box-shadow: 0 0 5px rgba(255, 0, 160, 0.3);
}
}
/* Fade Animations */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Slide Animations */
@keyframes slideInLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInUp {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Rotate Animations */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes rotate-reverse {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
/* Tilt Animation */
@keyframes tilt {
0% {
transform: rotateX(0) rotateY(0);
}
25% {
transform: rotateX(10deg) rotateY(-10deg);
}
50% {
transform: rotateX(0) rotateY(0);
}
75% {
transform: rotateX(-10deg) rotateY(10deg);
}
100% {
transform: rotateX(0) rotateY(0);
}
}
/* Neon Text Animation */
@keyframes neon-flicker {
0%, 100% {
text-shadow: 0 0 10px rgba(0, 233, 255, 0.8), 0 0 20px rgba(0, 233, 255, 0.6), 0 0 30px rgba(0, 233, 255, 0.4);
}
50% {
text-shadow: 0 0 5px rgba(0, 233, 255, 0.6), 0 0 10px rgba(0, 233, 255, 0.4), 0 0 15px rgba(0, 233, 255, 0.2);
}
}
@keyframes neon-pulse {
0% {
text-shadow: 0 0 10px rgba(138, 46, 255, 0.8), 0 0 20px rgba(138, 46, 255, 0.6), 0 0 30px rgba(138, 46, 255, 0.4);
}
50% {
text-shadow: 0 0 20px rgba(138, 46, 255, 1), 0 0 40px rgba(138, 46, 255, 0.8), 0 0 60px rgba(138, 46, 255, 0.6);
}
100% {
text-shadow: 0 0 10px rgba(138, 46, 255, 0.8), 0 0 20px rgba(138, 46, 255, 0.6), 0 0 30px rgba(138, 46, 255, 0.4);
}
}
/* Border Animation */
@keyframes border-glow {
0% {
border-color: rgba(0, 233, 255, 0.3);
}
50% {
border-color: rgba(0, 233, 255, 0.8);
}
100% {
border-color: rgba(0, 233, 255, 0.3);
}
}
@keyframes gradient-border {
0% {
border-image: linear-gradient(0deg, #00E9FF, #8A2EFF, #FF00A0) 1;
}
25% {
border-image: linear-gradient(90deg, #00E9FF, #8A2EFF, #FF00A0) 1;
}
50% {
border-image: linear-gradient(180deg, #00E9FF, #8A2EFF, #FF00A0) 1;
}
75% {
border-image: linear-gradient(270deg, #00E9FF, #8A2EFF, #FF00A0) 1;
}
100% {
border-image: linear-gradient(360deg, #00E9FF, #8A2EFF, #FF00A0) 1;
}
}
/* Particle Animation */
@keyframes float {
0% {
transform: translateY(0) translateX(0);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100vh) translateX(100px);
opacity: 0;
}
}
@keyframes float-reverse {
0% {
transform: translateY(0) translateX(0);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100vh) translateX(-100px);
opacity: 0;
}
}
/* Magnetic Cursor Animation */
@keyframes magnetic {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
/* Scroll Reveal Animation */
@keyframes reveal {
from {
opacity: 0;
transform: translateY(50px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Loading Animation */
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Success Animation */
@keyframes success {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Error Animation */
@keyframes error {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}
/* Hover Effects */
@keyframes hover-glow {
0% {
filter: brightness(1);
}
100% {
filter: brightness(1.2);
}
}
/* Card Tilt Effect */
@keyframes card-tilt {
0% {
transform: rotateX(0) rotateY(0);
}
25% {
transform: rotateX(5deg) rotateY(-5deg);
}
50% {
transform: rotateX(0) rotateY(0);
}
75% {
transform: rotateX(-5deg) rotateY(5deg);
}
100% {
transform: rotateX(0) rotateY(0);
}
}
/* Apply animations to elements */
.glow-animation {
animation: glow 2s infinite;
}
.glow-violet-animation {
animation: glow-violet 2s infinite;
}
.glow-magenta-animation {
animation: glow-magenta 2s infinite;
}
.fade-in {
animation: fadeIn 1s ease-out;
}
.fade-in-left {
animation: fadeInLeft 1s ease-out;
}
.fade-in-right {
animation: fadeInRight 1s ease-out;
}
.fade-in-up {
animation: fadeInUp 1s ease-out;
}
.slide-in-left {
animation: slideInLeft 0.8s ease-out;
}
.slide-in-right {
animation: slideInRight 0.8s ease-out;
}
.slide-in-up {
animation: slideInUp 0.8s ease-out;
}
.rotate-animation {
animation: rotate 10s linear infinite;
}
.rotate-reverse-animation {
animation: rotate-reverse 10s linear infinite;
}
.tilt-animation {
animation: tilt 4s ease-in-out infinite;
}
.neon-flicker {
animation: neon-flicker 1.5s infinite alternate;
}
.neon-pulse {
animation: neon-pulse 2s infinite;
}
.border-glow-animation {
animation: border-glow 2s infinite;
}
.gradient-border-animation {
animation: gradient-border 3s linear infinite;
}
.float-animation {
animation: float 10s infinite linear;
}
.float-reverse-animation {
animation: float-reverse 10s infinite linear;
}
.magnetic-animation {
animation: magnetic 0.5s ease-in-out;
}
.reveal-animation {
animation: reveal 0.8s ease-out;
}
.loading-animation {
animation: loading 1s linear infinite;
}
.success-animation {
animation: success 0.5s ease-out;
}
.error-animation {
animation: error 0.5s ease-out;
}
.hover-glow-animation {
animation: hover-glow 0.3s ease-out;
}
.card-tilt-animation {
animation: card-tilt 4s ease-in-out infinite;
}
/* Staggered Animations */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }
.stagger-7 { animation-delay: 0.7s; }
.stagger-8 { animation-delay: 0.8s; }
/* Continuous Animations */
.continuous {
animation-iteration-count: infinite;
}
/* Pause on Hover */
.pause-on-hover:hover {
animation-play-state: paused;
}