/* Orbital movements */
@keyframes orbital-slow {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(30px, -20px) rotate(90deg); }
    50% { transform: translate(-10px, -40px) rotate(180deg); }
    75% { transform: translate(-30px, 10px) rotate(270deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes orbital-medium {
    0% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(-25px, -15px) rotate(120deg); }
    66% { transform: translate(20px, -30px) rotate(240deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes orbital-fast {
    0% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(15px, -25px) rotate(180deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

/* Flow path animations */
@keyframes flow-path-1 {
    0% { stroke-dashoffset: 0; opacity: 0.3; }
    50% { opacity: 0.8; }
    100% { stroke-dashoffset: -60; opacity: 0.3; }
}

@keyframes flow-path-2 {
    0% { stroke-dashoffset: 0; opacity: 0.4; }
    50% { opacity: 0.9; }
    100% { stroke-dashoffset: -46; opacity: 0.4; }
}

@keyframes flow-path-3 {
    0% { stroke-dashoffset: 0; opacity: 0.2; }
    50% { opacity: 0.7; }
    100% { stroke-dashoffset: -36; opacity: 0.2; }
}

/* Mesh grid animations */
@keyframes mesh-flow {
    0% { transform: translateX(0) scaleX(1); opacity: 0.05; }
    50% { transform: translateX(5px) scaleX(1.02); opacity: 0.15; }
    100% { transform: translateX(0) scaleX(1); opacity: 0.05; }
}

@keyframes mesh-flow-vertical {
    0% { transform: translateY(0) scaleY(1); opacity: 0.05; }
    50% { transform: translateY(5px) scaleY(1.02); opacity: 0.15; }
    100% { transform: translateY(0) scaleY(1); opacity: 0.05; }
}

@keyframes grid-pulse {
    0%, 100% { opacity: 0.05; border-color: rgb(147 197 253 / 0.3); }
    50% { opacity: 0.2; border-color: rgb(59 130 246 / 0.5); }
}

/* Particle float animations */
@keyframes particle-float-1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
    25% { transform: translate(20px, -15px) scale(1.2); opacity: 0.8; }
    50% { transform: translate(-10px, -30px) scale(0.8); opacity: 0.6; }
    75% { transform: translate(-25px, 10px) scale(1.1); opacity: 0.7; }
}

@keyframes particle-float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    33% { transform: translate(-18px, -20px) scale(1.3); opacity: 0.9; }
    66% { transform: translate(15px, -10px) scale(0.7); opacity: 0.6; }
}

@keyframes particle-float-3 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    40% { transform: translate(25px, -25px) scale(1.4); opacity: 0.8; }
    80% { transform: translate(-20px, 5px) scale(0.9); opacity: 0.5; }
}

@keyframes particle-float-4 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.45; }
    30% { transform: translate(-15px, -18px) scale(1.1); opacity: 0.9; }
    60% { transform: translate(22px, -8px) scale(0.8); opacity: 0.6; }
    90% { transform: translate(-8px, 12px) scale(1.2); opacity: 0.7; }
}

@keyframes particle-float-5 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.35; }
    50% { transform: translate(-12px, -22px) scale(1.5); opacity: 0.85; }
}

/* Geometric shape animations */
@keyframes geometric-rotate {
    0% { transform: rotate(45deg) scale(1); opacity: 0.6; }
    50% { transform: rotate(225deg) scale(1.1); opacity: 0.9; }
    100% { transform: rotate(405deg) scale(1); opacity: 0.6; }
}

@keyframes geometric-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; border-width: 2px; }
    50% { transform: scale(1.15); opacity: 0.8; border-width: 3px; }
}

@keyframes geometric-float {
    0%, 100% { transform: rotate(12deg) translateY(0) scale(1); opacity: 0.7; }
    25% { transform: rotate(15deg) translateY(-8px) scale(1.05); opacity: 0.9; }
    50% { transform: rotate(9deg) translateY(-12px) scale(0.95); opacity: 0.8; }
    75% { transform: rotate(18deg) translateY(-4px) scale(1.02); opacity: 0.85; }
}

/* Enhanced shimmer effect */
@keyframes shimmer {
    0% { transform: translateX(-100%) skewX(-15deg); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(200%) skewX(-15deg); opacity: 0; }
}

/* Apply animations */
.animate-orbital-slow { animation: orbital-slow 20s ease-in-out infinite; }
.animate-orbital-medium { animation: orbital-medium 15s ease-in-out infinite; }
.animate-orbital-fast { animation: orbital-fast 12s ease-in-out infinite; }

.animate-flow-path-1 { animation: flow-path-1 8s linear infinite; }
.animate-flow-path-2 { animation: flow-path-2 10s linear infinite; }
.animate-flow-path-3 { animation: flow-path-3 12s linear infinite; }

.animate-mesh-flow { animation: mesh-flow 15s ease-in-out infinite; }
.animate-mesh-flow-vertical { animation: mesh-flow-vertical 18s ease-in-out infinite; }
.animate-grid-pulse { animation: grid-pulse 4s ease-in-out infinite; }

.animate-particle-float-1 { animation: particle-float-1 18s ease-in-out infinite; }
.animate-particle-float-2 { animation: particle-float-2 14s ease-in-out infinite; }
.animate-particle-float-3 { animation: particle-float-3 22s ease-in-out infinite; }
.animate-particle-float-4 { animation: particle-float-4 16s ease-in-out infinite; }
.animate-particle-float-5 { animation: particle-float-5 20s ease-in-out infinite; }

.animate-geometric-rotate { animation: geometric-rotate 25s linear infinite; }
.animate-geometric-pulse { animation: geometric-pulse 6s ease-in-out infinite; }
.animate-geometric-float { animation: geometric-float 14s ease-in-out infinite; }

.animate-shimmer { animation: shimmer 3s ease-in-out infinite; }

/* Glass morphism effects */
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Enhanced hover states */
.group:hover .animate-shimmer {
    animation-duration: 1.5s;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .animate-orbital-slow { animation-duration: 25s; }
    .animate-orbital-medium { animation-duration: 18s; }
    .animate-orbital-fast { animation-duration: 15s; }
}

/* Performance optimizations */
.animate-orbital-slow,
.animate-orbital-medium, 
.animate-orbital-fast,
.animate-flow-path-1,
.animate-flow-path-2,
.animate-flow-path-3,
.animate-mesh-flow,
.animate-mesh-flow-vertical,
.animate-particle-float-1,
.animate-particle-float-2,
.animate-particle-float-3,
.animate-particle-float-4,
.animate-particle-float-5,
.animate-geometric-rotate,
.animate-geometric-pulse,
.animate-geometric-float {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Asteroid/Meteor animations */
.asteroid {
    position: absolute;
    width: 4px;
    height: 4px;
    background: linear-gradient(45deg, #fbbf24, #f59e0b, #d97706);
    border-radius: 50%;
    box-shadow: 0 0 10px #fbbf24, 0 0 20px #f59e0b, 0 0 30px #d97706;
    opacity: 0;
}

.asteroid-1 {
    top: 10%;
    left: -5%;
    animation: asteroid-1-path 8s linear infinite;
}

.asteroid-2 {
    top: 30%;
    right: -5%;
    animation: asteroid-2-path 12s linear infinite;
    animation-delay: 2s;
}

.asteroid-3 {
    top: 60%;
    left: -5%;
    animation: asteroid-3-path 10s linear infinite;
    animation-delay: 4s;
}

.asteroid-4 {
    top: 80%;
    right: -5%;
    animation: asteroid-4-path 15s linear infinite;
    animation-delay: 6s;
}

.asteroid-5 {
    top: 45%;
    left: -5%;
    animation: asteroid-5-path 7s linear infinite;
    animation-delay: 1s;
}

@keyframes asteroid-1-path {
    0% { transform: translate(0, 0) scale(0); opacity: 0; }
    10% { opacity: 1; transform: scale(1); }
    90% { opacity: 1; }
    100% { transform: translate(120vw, 60vh) scale(0); opacity: 0; }
}

@keyframes asteroid-2-path {
    0% { transform: translate(0, 0) scale(0); opacity: 0; }
    15% { opacity: 1; transform: scale(1.2); }
    85% { opacity: 1; }
    100% { transform: translate(-120vw, 50vh) scale(0); opacity: 0; }
}

@keyframes asteroid-3-path {
    0% { transform: translate(0, 0) scale(0); opacity: 0; }
    12% { opacity: 1; transform: scale(0.8); }
    88% { opacity: 1; }
    100% { transform: translate(110vw, -30vh) scale(0); opacity: 0; }
}

@keyframes asteroid-4-path {
    0% { transform: translate(0, 0) scale(0); opacity: 0; }
    8% { opacity: 1; transform: scale(1.5); }
    92% { opacity: 1; }
    100% { transform: translate(-130vw, -40vh) scale(0); opacity: 0; }
}

@keyframes asteroid-5-path {
    0% { transform: translate(0, 0) scale(0); opacity: 0; }
    14% { opacity: 1; transform: scale(0.6); }
    86% { opacity: 1; }
    100% { transform: translate(125vw, 20vh) scale(0); opacity: 0; }
}

/* Cosmic dust particles */
.cosmic-dust {
    position: absolute;
    width: 2px;
    height: 2px;
    background: radial-gradient(circle, #e0f2fe, #b3e5fc, transparent);
    border-radius: 50%;
    opacity: 0.4;
}

.dust-1 { top: 15%; left: 20%; animation: cosmic-drift-1 20s ease-in-out infinite; }
.dust-2 { top: 40%; left: 60%; animation: cosmic-drift-2 25s ease-in-out infinite; }
.dust-3 { top: 70%; left: 30%; animation: cosmic-drift-3 18s ease-in-out infinite; }
.dust-4 { top: 25%; left: 80%; animation: cosmic-drift-4 22s ease-in-out infinite; }
.dust-5 { top: 85%; left: 15%; animation: cosmic-drift-5 30s ease-in-out infinite; }
.dust-6 { top: 55%; left: 90%; animation: cosmic-drift-6 16s ease-in-out infinite; }

@keyframes cosmic-drift-1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
    25% { transform: translate(30px, -20px) scale(1.5); opacity: 0.8; }
    50% { transform: translate(-15px, -40px) scale(0.8); opacity: 0.6; }
    75% { transform: translate(-40px, 10px) scale(1.2); opacity: 0.7; }
}

@keyframes cosmic-drift-2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    33% { transform: translate(-25px, -30px) scale(1.3); opacity: 0.9; }
    66% { transform: translate(20px, -15px) scale(0.7); opacity: 0.5; }
}

@keyframes cosmic-drift-3 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    50% { transform: translate(35px, -35px) scale(1.4); opacity: 1; }
}

@keyframes cosmic-drift-4 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    40% { transform: translate(-30px, -25px) scale(1.1); opacity: 0.8; }
    80% { transform: translate(10px, -45px) scale(0.9); opacity: 0.6; }
}

@keyframes cosmic-drift-5 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
    20% { transform: translate(25px, -15px) scale(1.6); opacity: 0.9; }
    60% { transform: translate(-20px, -35px) scale(0.6); opacity: 0.4; }
    80% { transform: translate(15px, 5px) scale(1.3); opacity: 0.7; }
}

@keyframes cosmic-drift-6 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    30% { transform: translate(-35px, -20px) scale(1.2); opacity: 0.8; }
    70% { transform: translate(40px, -30px) scale(0.8); opacity: 0.6; }
}

/* Nebula animations */
@keyframes nebula-drift-1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.1; }
    25% { transform: translate(50px, -30px) rotate(90deg) scale(1.1); opacity: 0.15; }
    50% { transform: translate(-20px, -60px) rotate(180deg) scale(0.9); opacity: 0.12; }
    75% { transform: translate(-60px, 20px) rotate(270deg) scale(1.05); opacity: 0.14; }
}

@keyframes nebula-drift-2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.08; }
    33% { transform: translate(-40px, -40px) rotate(120deg) scale(1.2); opacity: 0.12; }
    66% { transform: translate(30px, -20px) rotate(240deg) scale(0.8); opacity: 0.1; }
}

@keyframes nebula-drift-3 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.06; }
    50% { transform: translate(25px, -50px) rotate(180deg) scale(1.3); opacity: 0.1; }
}

/* Cosmic title animations */
@keyframes cosmic-pulse {
    0%, 100% { text-shadow: 0 0 10px rgba(34, 211, 238, 0.5), 0 0 20px rgba(59, 130, 246, 0.3); }
    50% { text-shadow: 0 0 20px rgba(34, 211, 238, 0.8), 0 0 40px rgba(59, 130, 246, 0.6), 0 0 60px rgba(147, 51, 234, 0.4); }
}

@keyframes stellar-glow {
    0%, 100% { text-shadow: 0 0 15px rgba(59, 130, 246, 0.6), 0 0 30px rgba(34, 211, 238, 0.4); }
    50% { text-shadow: 0 0 25px rgba(59, 130, 246, 0.9), 0 0 50px rgba(34, 211, 238, 0.7), 0 0 75px rgba(168, 85, 247, 0.5); }
}

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

@keyframes shooting-star {
    0% { transform: translateX(-100px) scaleX(0); opacity: 0; }
    50% { opacity: 1; transform: scaleX(1); }
    100% { transform: translateX(300px) scaleX(0); opacity: 0; }
}

@keyframes orbit-title {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes orbit-title-reverse {
    0% { transform: translate(0, 0) rotate(360deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes twinkle-cosmic {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(1.5); }
}

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

/* Hanging thread animations */
@keyframes thread-sway {
    0%, 100% { transform: rotate(0deg); opacity: 0.6; }
    25% { transform: rotate(2deg); opacity: 0.8; }
    50% { transform: rotate(0deg); opacity: 1; }
    75% { transform: rotate(-2deg); opacity: 0.8; }
}

@keyframes thread-sway-reverse {
    0%, 100% { transform: rotate(0deg); opacity: 0.6; }
    25% { transform: rotate(-2deg); opacity: 0.8; }
    50% { transform: rotate(0deg); opacity: 1; }
    75% { transform: rotate(2deg); opacity: 0.8; }
}

@keyframes thread-connect {
    0%, 100% { transform: scaleY(1); opacity: 0.8; }
    50% { transform: scaleY(1.1); opacity: 1; }
}

@keyframes connection-point {
    0%, 100% { transform: scale(1); box-shadow: 0 0 5px currentColor; }
    50% { transform: scale(1.3); box-shadow: 0 0 15px currentColor, 0 0 25px currentColor; }
}

/* Card hanging animations */
@keyframes card-sway {
    0%, 100% { transform: rotate(-1deg) translateY(0); }
    25% { transform: rotate(1deg) translateY(-3px); }
    50% { transform: rotate(-0.5deg) translateY(-5px); }
    75% { transform: rotate(0.5deg) translateY(-2px); }
}

@keyframes card-sway-reverse {
    0%, 100% { transform: rotate(1deg) translateY(0); }
    25% { transform: rotate(-1deg) translateY(-3px); }
    50% { transform: rotate(0.5deg) translateY(-5px); }
    75% { transform: rotate(-0.5deg) translateY(-2px); }
}

/* Cosmic grid animation */
@keyframes cosmic-grid-flow {
    0% { transform: translateX(0) scaleX(1); opacity: 0.15; }
    50% { transform: translateX(10px) scaleX(1.02); opacity: 0.25; }
    100% { transform: translateX(0) scaleX(1); opacity: 0.15; }
}

/* Globe orbital elements */
@keyframes orbit-globe {
    0% { transform: rotate(0deg) translateX(500px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(500px) rotate(-360deg); }
}

@keyframes orbit-globe-reverse {
    0% { transform: rotate(360deg) translateX(400px) rotate(360deg); }
    100% { transform: rotate(0deg) translateX(400px) rotate(0deg); }
}

@keyframes orbit-globe-slow {
    0% { transform: rotate(0deg) translateX(450px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(450px) rotate(-360deg); }
}

@keyframes cosmic-aura {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.1; }
    25% { transform: scale(1.05) rotate(90deg); opacity: 0.15; }
    50% { transform: scale(0.95) rotate(180deg); opacity: 0.12; }
    75% { transform: scale(1.02) rotate(270deg); opacity: 0.18; }
}

@keyframes cosmic-drift {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(30px, -20px) rotate(120deg) scale(1.1); }
    66% { transform: translate(-20px, -30px) rotate(240deg) scale(0.9); }
}

/* Twinkle effect for stars */
@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); }
}

/* Apply all animations */
.animate-nebula-drift-1 { animation: nebula-drift-1 40s ease-in-out infinite; }
.animate-nebula-drift-2 { animation: nebula-drift-2 35s ease-in-out infinite; }
.animate-nebula-drift-3 { animation: nebula-drift-3 45s ease-in-out infinite; }

.animate-cosmic-pulse { animation: cosmic-pulse 4s ease-in-out infinite; }
.animate-stellar-glow { animation: stellar-glow 3s ease-in-out infinite; }
.animate-fade-in-cosmic { animation: fade-in-cosmic 1s ease-out forwards; }
.animate-shooting-star { animation: shooting-star 6s ease-out infinite; }
.animate-orbit-title { animation: orbit-title 20s linear infinite; }
.animate-orbit-title-reverse { animation: orbit-title-reverse 25s linear infinite; }
.animate-twinkle-cosmic { animation: twinkle-cosmic 2s ease-in-out infinite; }
.animate-text-float { animation: text-float 3s ease-in-out infinite; }

.animate-thread-sway { animation: thread-sway 8s ease-in-out infinite; }
.animate-thread-sway-reverse { animation: thread-sway-reverse 9s ease-in-out infinite; }
.animate-thread-connect { animation: thread-connect 4s ease-in-out infinite; }
.animate-connection-point { animation: connection-point 3s ease-in-out infinite; }

.animate-card-sway { animation: card-sway 6s ease-in-out infinite; }
.animate-card-sway-reverse { animation: card-sway-reverse 7s ease-in-out infinite; }

.animate-cosmic-grid-flow { animation: cosmic-grid-flow 20s ease-in-out infinite; }

.animate-orbit-globe { animation: orbit-globe 30s linear infinite; }
.animate-orbit-globe-reverse { animation: orbit-globe-reverse 25s linear infinite; }
.animate-orbit-globe-slow { animation: orbit-globe-slow 40s linear infinite; }
.animate-cosmic-aura { animation: cosmic-aura 15s ease-in-out infinite; }
.animate-cosmic-drift { animation: cosmic-drift 25s ease-in-out infinite; }

.animate-twinkle { animation: twinkle 2s ease-in-out infinite; }

/* Enhanced starfield */
.stars-container {
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #ffffff, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(34, 211, 238, 0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(59, 130, 246, 0.6), transparent),
        radial-gradient(1px 1px at 130px 80px, #ffffff, transparent),
        radial-gradient(2px 2px at 160px 30px, rgba(147, 51, 234, 0.7), transparent),
        radial-gradient(1px 1px at 200px 60px, rgba(34, 211, 238, 0.5), transparent),
        radial-gradient(2px 2px at 240px 90px, #ffffff, transparent),
        radial-gradient(1px 1px at 280px 20px, rgba(59, 130, 246, 0.8), transparent),
        radial-gradient(1px 1px at 320px 70px, rgba(147, 51, 234, 0.6), transparent),
        radial-gradient(2px 2px at 360px 50px, #ffffff, transparent);
    background-repeat: repeat;
    background-size: 400px 200px;
    animation: stars-move 120s linear infinite;
}

@keyframes stars-move {
    0% { background-position: 0 0; }
    100% { background-position: 400px 200px; }
}

/* Performance optimizations */
.asteroid,
.cosmic-dust,
.animate-nebula-drift-1,
.animate-nebula-drift-2,
.animate-nebula-drift-3,
.animate-cosmic-pulse,
.animate-stellar-glow,
.animate-orbit-title,
.animate-orbit-title-reverse,
.animate-twinkle-cosmic,
.animate-text-float,
.animate-thread-sway,
.animate-thread-sway-reverse,
.animate-card-sway,
.animate-card-sway-reverse,
.animate-orbit-globe,
.animate-orbit-globe-reverse,
.animate-orbit-globe-slow,
.animate-cosmic-aura,
.animate-cosmic-drift {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .asteroid { width: 3px; height: 3px; }
    .cosmic-dust { width: 1px; height: 1px; }
    
    .animate-orbit-globe { animation-duration: 35s; }
    .animate-orbit-globe-reverse { animation-duration: 30s; }
    .animate-orbit-globe-slow { animation-duration: 45s; }
    
    .animate-card-sway { animation-duration: 8s; }
    .animate-card-sway-reverse { animation-duration: 9s; }
}

/* Enhanced backdrop blur */
.backdrop-blur-lg {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Perspective for 3D effects */
.perspective-1000 {
    perspective: 1000px;
}

 /* Floating code animations */
@keyframes float-code-1 {
    0%, 100% { transform: translateY(0px) rotate(12deg); }
    50% { transform: translateY(-20px) rotate(18deg); }
}

@keyframes float-code-2 {
    0%, 100% { transform: translateY(0px) rotate(-6deg); }
    50% { transform: translateY(-15px) rotate(-12deg); }
}

@keyframes float-code-3 {
    0%, 100% { transform: translateY(0px) rotate(45deg); }
    50% { transform: translateY(-25px) rotate(50deg); }
}

@keyframes float-code-4 {
    0%, 100% { transform: translateY(0px) rotate(-12deg); }
    50% { transform: translateY(-18px) rotate(-18deg); }
}

/* Grid and line animations */
@keyframes grid-pulse-services {
    0%, 100% { opacity: 0.1; transform: scaleX(1); }
    50% { opacity: 0.2; transform: scaleX(1.02); }
}

@keyframes line-glow {
    0%, 100% { border-color: rgba(6, 182, 212, 0.2); box-shadow: none; }
    50% { border-color: rgba(6, 182, 212, 0.6); box-shadow: 0 0 10px rgba(6, 182, 212, 0.3); }
}

/* Geometric shape animations */
@keyframes orbit-service {
    0% { transform: rotate(0deg) translateX(40px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(40px) rotate(-360deg); }
}

@keyframes geometric-float-service {
    0%, 100% { transform: rotate(45deg) translateY(0) scale(1); }
    50% { transform: rotate(50deg) translateY(-10px) scale(1.1); }
}

/* Circuit animations */
@keyframes circuit-flow {
    0% { stroke-dashoffset: 0; opacity: 0.3; }
    50% { opacity: 0.8; }
    100% { stroke-dashoffset: -30; opacity: 0.3; }
}

@keyframes circuit-flow-2 {
    0% { stroke-dashoffset: 0; opacity: 0.4; }
    50% { opacity: 0.9; }
    100% { stroke-dashoffset: -24; opacity: 0.4; }
}

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

/* Enhanced button animations */
@keyframes pulse-glow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

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

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

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

@keyframes scale-in-delayed {
    0% { transform: scaleX(0); }
    60% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

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

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

/* Apply animations */
.animate-float-code-1 { animation: float-code-1 6s ease-in-out infinite; }
.animate-float-code-2 { animation: float-code-2 8s ease-in-out infinite; }
.animate-float-code-3 { animation: float-code-3 7s ease-in-out infinite; }
.animate-float-code-4 { animation: float-code-4 9s ease-in-out infinite; }

.animate-grid-pulse-services { animation: grid-pulse-services 4s ease-in-out infinite; }
.animate-line-glow { animation: line-glow 3s ease-in-out infinite; }

.animate-orbit-service { animation: orbit-service 20s linear infinite; }
.animate-geometric-float-service { animation: geometric-float-service 8s ease-in-out infinite; }

.animate-circuit-flow { animation: circuit-flow 4s linear infinite; }
.animate-circuit-flow-2 { animation: circuit-flow-2 5s linear infinite; }
.animate-pulse-node { animation: pulse-node 2s ease-in-out infinite; }

.animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
.animate-rotate-border { animation: rotate-border 8s linear infinite; }
.animate-spin-slow { animation: spin-slow 8s linear infinite; }
.animate-spin-reverse { animation: spin-reverse 6s linear infinite; }
.animate-scale-in-delayed { animation: scale-in-delayed 2s ease-out forwards; }
.animate-gradient-x { animation: gradient-x 3s ease infinite; }
.animate-shimmer { animation: shimmer 2s infinite; }
.animate-twinkle { animation: twinkle 2s ease-in-out infinite; }

/* Performance optimizations */
.floating-code-element,
.animate-orbit-service,
.animate-geometric-float-service,
.animate-pulse-glow,
.animate-rotate-border {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

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

@keyframes float-medium {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(-3deg); }
}

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

@keyframes float-particle {
    0%, 100% { 
        transform: translateY(0px) translateX(0px) rotate(0deg); 
        opacity: 0.3;
    }
    25% { 
        transform: translateY(-30px) translateX(10px) rotate(90deg); 
        opacity: 0.7;
    }
    50% { 
        transform: translateY(-20px) translateX(-5px) rotate(180deg); 
        opacity: 1;
    }
    75% { 
        transform: translateY(-35px) translateX(15px) rotate(270deg); 
        opacity: 0.5;
    }
}

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

@keyframes pulse-slow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes pulse-medium {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.03); }
}

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

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

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes star-twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

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

@keyframes dash-flow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 40; }
}

@keyframes grid-flow {
    0% { transform: translateX(0); opacity: 0.05; }
    50% { opacity: 0.1; }
    100% { transform: translateX(10px); opacity: 0.05; }
}

@keyframes grid-flow-vertical {
    0% { transform: translateY(0); opacity: 0.05; }
    50% { opacity: 0.1; }
    100% { transform: translateY(10px); opacity: 0.05; }
}

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

@keyframes slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-in-up {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scaleX(0);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

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

@keyframes bar-grow {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@keyframes scroll-indicator {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(10px); opacity: 0.5; }
}

@keyframes slide-left {
    0% { transform: translateX(0); }
    50% { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}

@keyframes slide-right {
    0% { transform: translateX(0); }
    50% { transform: translateX(3px); }
    100% { transform: translateX(0); }
}

@keyframes tetris-1 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-5px) rotate(90deg); }
    50% { transform: translateY(0) rotate(180deg); }
    75% { transform: translateY(-3px) rotate(270deg); }
}

@keyframes tetris-2 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-8px) rotate(120deg); }
    66% { transform: translateY(-2px) rotate(240deg); }
}

@keyframes tetris-3 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    40% { transform: translateY(-6px) rotate(144deg); }
    80% { transform: translateY(-1px) rotate(288deg); }
}

@keyframes tetris-4 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    20% { transform: translateY(-4px) rotate(72deg); }
    40% { transform: translateY(-7px) rotate(144deg); }
    60% { transform: translateY(-3px) rotate(216deg); }
    80% { transform: translateY(-5px) rotate(288deg); }
}

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

.animate-float-slow { animation: float-slow 6s ease-in-out infinite; }
.animate-float-medium { animation: float-medium 4s ease-in-out infinite; }
.animate-float-fast { animation: float-fast 3s ease-in-out infinite; }
.animate-float-particle { animation: float-particle 5s ease-in-out infinite; }
.animate-gradient-x { animation: gradient-x 3s ease infinite; }
.animate-shimmer { animation: shimmer 2s infinite; }
.animate-pulse-slow { animation: pulse-slow 4s ease-in-out infinite; }
.animate-pulse-medium { animation: pulse-medium 3s ease-in-out infinite; }
.animate-bounce-slow { animation: bounce-slow 3s ease-in-out infinite; }
.animate-bounce-medium { animation: bounce-medium 2s ease-in-out infinite; }
.animate-spin-slow { animation: spin-slow 20s linear infinite; }
.animate-star-twinkle { animation: star-twinkle 2s ease-in-out infinite; }
.animate-twinkle { animation: twinkle 1.5s ease-in-out infinite; }
.animate-dash-flow { animation: dash-flow 3s linear infinite; }
.animate-grid-flow { animation: grid-flow 10s ease-in-out infinite; }
.animate-grid-flow-vertical { animation: grid-flow-vertical 12s ease-in-out infinite; }
.animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; }
.animate-slide-in-left { animation: slide-in-left 0.8s ease-out forwards; }
.animate-slide-in-right { animation: slide-in-right 0.8s ease-out forwards; }
.animate-slide-in-up { animation: slide-in-up 0.8s ease-out forwards; }
.animate-scale-in { animation: scale-in 0.8s ease-out forwards; }
.animate-heart-beat { animation: heart-beat 1.5s ease-in-out infinite; }
.animate-bar-grow { animation: bar-grow 1s ease-out forwards; }
.animate-typing { animation: typing 0.5s ease-out forwards; }
.animate-scroll-indicator { animation: scroll-indicator 2s ease-in-out infinite; }
.animate-slide-left { animation: slide-left 0.3s ease-in-out; }
.animate-slide-right { animation: slide-right 0.3s ease-in-out; }
.animate-tetris-1 { animation: tetris-1 4s ease-in-out infinite; }
.animate-tetris-2 { animation: tetris-2 3s ease-in-out infinite; }
.animate-tetris-3 { animation: tetris-3 5s ease-in-out infinite; }
.animate-tetris-4 { animation: tetris-4 3.5s ease-in-out infinite; }
.animate-blink { animation: blink 1s infinite; }

.card-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.perspective-1000 {
    perspective: 1000px;
}

.transform-gpu {
    transform: translateZ(0);
    backface-visibility: hidden;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Custom color definitions */
.bg-navy-900 { background-color: #0c1929; }
.from-navy-900 { --tw-gradient-from: #0c1929; }
.to-cyan-950 { --tw-gradient-to: #083344; }