/* ================================
   Animation Keyframes
   Direct Connect Mobile Interactive Feature
   ================================ */

/* ================================
   Chaos Scroll Animations
   ================================ */
@keyframes chaos-scroll-horizontal {
    0% {
        transform: translateX(-100px) scale(0.8) rotate(-15deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translateX(50vw) scale(1.2) rotate(5deg);
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(120vw) scale(0.6) rotate(25deg);
        opacity: 0;
    }
}

@keyframes chaos-scroll-vertical {
    0% {
        transform: translateY(-100px) scale(1.1) rotate(10deg);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    50% {
        transform: translateY(50vh) scale(0.9) rotate(-8deg);
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        transform: translateY(120vh) scale(1.3) rotate(18deg);
        opacity: 0;
    }
}

@keyframes chaos-scroll-diagonal {
    0% {
        transform: translate(-80px, -80px) scale(0.7) rotate(-20deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    50% {
        transform: translate(40vw, 30vh) scale(1.1) rotate(2deg);
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translate(110vw, 110vh) scale(0.8) rotate(30deg);
        opacity: 0;
    }
}

@keyframes chaos-zoom-in-out {
    0% {
        transform: scale(0.1) rotate(0deg);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    30% {
        transform: scale(1.5) rotate(180deg);
        opacity: 1;
    }
    70% {
        transform: scale(1.5) rotate(540deg);
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        transform: scale(0.1) rotate(720deg);
        opacity: 0;
    }
}

@keyframes chaos-side-scroll-left {
    0% {
        transform: translateX(120vw) scale(0.9) rotate(12deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translateX(20vw) scale(1.1) rotate(-5deg);
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(-120px) scale(0.7) rotate(-22deg);
        opacity: 0;
    }
}

@keyframes chaos-bounce-scroll {
    0% {
        transform: translate(0, -100px) scale(0.8) rotate(0deg);
        opacity: 0;
    }
    15% {
        transform: translate(10vw, 20vh) scale(1.0) rotate(45deg);
        opacity: 1;
    }
    30% {
        transform: translate(30vw, 5vh) scale(1.2) rotate(90deg);
        opacity: 1;
    }
    45% {
        transform: translate(50vw, 35vh) scale(0.9) rotate(135deg);
        opacity: 1;
    }
    60% {
        transform: translate(70vw, 15vh) scale(1.1) rotate(180deg);
        opacity: 1;
    }
    75% {
        transform: translate(90vw, 40vh) scale(0.8) rotate(225deg);
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(120vw, 60vh) scale(0.6) rotate(270deg);
        opacity: 0;
    }
}

@keyframes chaotic-spin {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
    25% {
        transform: rotate(90deg) scale(1.2);
        opacity: 0.8;
    }
    50% {
        transform: rotate(180deg) scale(0.8);
        opacity: 0.6;
    }
    75% {
        transform: rotate(270deg) scale(1.1);
        opacity: 0.9;
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 1;
    }
}

@keyframes chaos-collision {
    0% {
        transform: translate(0, 0);
        background-color: var(--bg-white);
    }
    20% {
        transform: translate(-5px, -5px);
        background-color: #ffeb3b;
    }
    40% {
        transform: translate(5px, -3px);
        background-color: #ff9800;
    }
    60% {
        transform: translate(-3px, 5px);
        background-color: #f44336;
    }
    80% {
        transform: translate(2px, -2px);
        background-color: #9c27b0;
    }
    100% {
        transform: translate(0, 0);
        background-color: var(--bg-white);
    }
}

/* ================================
   Simplification Animations
   ================================ */
@keyframes word-morph {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        background: linear-gradient(135deg, #dc3545, #c82333);
        color: white;
    }
    25% {
        opacity: 0.7;
        transform: scale(1.2) rotate(5deg);
        background: linear-gradient(135deg, #ffc107, #e0a800);
    }
    50% {
        opacity: 0.3;
        transform: scale(0.8) rotate(-5deg);
        background: linear-gradient(135deg, #17a2b8, #138496);
    }
    75% {
        opacity: 0.6;
        transform: scale(1.1) rotate(2deg);
        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
        color: white;
    }
}

@keyframes simplify-reveal {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.8);
    }
    50% {
        opacity: 0.7;
        transform: translateY(-5px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes approach-highlight {
    0% {
        background-color: var(--bg-white);
        border-color: var(--primary-light);
    }
    50% {
        background-color: var(--primary-light);
        border-color: var(--primary-color);
    }
    100% {
        background-color: var(--bg-white);
        border-color: var(--primary-light);
    }
}

/* ================================
   Results Animations
   ================================ */
@keyframes number-count-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bar-fill {
    0% {
        width: 0%;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        width: var(--target-width, 100%);
        opacity: 1;
    }
}

@keyframes metric-highlight {
    0% {
        background-color: var(--bg-white);
        transform: scale(1);
    }
    50% {
        background-color: var(--primary-light);
        transform: scale(1.02);
    }
    100% {
        background-color: var(--bg-white);
        transform: scale(1);
    }
}

@keyframes comparison-reveal {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    50% {
        opacity: 0.7;
        transform: translateX(5px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ================================
   Industry Selection Animations
   ================================ */
@keyframes industry-select {
    0% {
        transform: scale(1);
        background-color: var(--bg-light);
    }
    25% {
        transform: scale(1.1);
        background-color: var(--primary-light);
    }
    50% {
        transform: scale(1.05);
        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
        color: white;
    }
    100% {
        transform: scale(1.05);
        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
        color: white;
    }
}

@keyframes preview-slide-in {
    0% {
        opacity: 0;
        transform: translateY(50px);
        max-height: 0;
    }
    50% {
        opacity: 0.7;
        transform: translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        max-height: 1000px;
    }
}

@keyframes stat-count {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    70% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ================================
   Button and UI Animations
   ================================ */
@keyframes button-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 125, 192, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(0, 125, 192, 0.3);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 20px rgba(0, 125, 192, 0);
    }
}

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

@keyframes success-bounce {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(0.95);
    }
    75% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* ================================
   Stage Transition Animations
   ================================ */
@keyframes stage-fade-out {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50px);
    }
}

@keyframes stage-fade-in {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

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

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

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

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

/* ================================
   Three.js Canvas Animations
   ================================ */
@keyframes canvas-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes word-cloud-spin {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

/* ================================
   Hover Effects
   ================================ */
@keyframes hover-glow {
    0% {
        box-shadow: 0 0 5px rgba(0, 125, 192, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 125, 192, 0.6);
    }
    100% {
        box-shadow: 0 0 5px rgba(0, 125, 192, 0.3);
    }
}

@keyframes hover-lift {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-5px);
    }
}

/* ================================
   Progress Animations
   ================================ */
@keyframes progress-fill {
    0% {
        width: 0%;
    }
    100% {
        width: var(--progress-width, 100%);
    }
}

@keyframes progress-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* ================================
   Utility Animation Classes
   ================================ */
.animate-chaos {
    animation: chaotic-float 3s ease-in-out infinite;
}

.animate-morph {
    animation: word-morph 2s ease-in-out forwards;
}

.animate-reveal {
    animation: simplify-reveal 1s ease-out forwards;
}

.animate-count {
    animation: number-count-up 2s ease-out forwards;
}

.animate-slide-in {
    animation: slideInUp 0.8s ease-out forwards;
}

.animate-pulse {
    animation: button-pulse 2s infinite;
}

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

.animate-bounce {
    animation: success-bounce 0.6s ease-out;
}

/* ================================
   Staggered Animation Delays
   ================================ */
.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; }
.stagger-9 { animation-delay: 0.9s; }
.stagger-10 { animation-delay: 1.0s; }

/* ================================
   Performance Optimizations
   ================================ */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

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

/* ================================
   Reduced Motion Support
   ================================ */
@media (prefers-reduced-motion: reduce) {
    .animate-chaos,
    .animate-morph,
    .animate-reveal,
    .animate-count,
    .animate-slide-in,
    .animate-pulse,
    .animate-glow,
    .animate-bounce {
        animation: none;
    }
    
    .word-item {
        transition: none;
    }
    
    .complexity-trigger:hover {
        transform: none;
    }
    
    .industry-option:hover {
        transform: none;
    }
}

/* ================================
   Enhanced Chaotic Animations for Background Words
   ================================ */
@keyframes chaos-annoyance {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    10% {
        transform: translate(-40px, 30px) rotate(45deg) scale(1.2);
    }
    20% {
        transform: translate(60px, -25px) rotate(-30deg) scale(0.8);
    }
    30% {
        transform: translate(-35px, -40px) rotate(90deg) scale(1.1);
    }
    40% {
        transform: translate(50px, 35px) rotate(-60deg) scale(0.9);
    }
    50% {
        transform: translate(-45px, 20px) rotate(120deg) scale(1.3);
    }
    60% {
        transform: translate(40px, -50px) rotate(-90deg) scale(0.7);
    }
    70% {
        transform: translate(-55px, -15px) rotate(180deg) scale(1.15);
    }
    80% {
        transform: translate(65px, 45px) rotate(-150deg) scale(0.85);
    }
    90% {
        transform: translate(-25px, -35px) rotate(270deg) scale(1.25);
    }
    100% {
        transform: translate(0, 0) rotate(360deg) scale(1);
    }
}

@keyframes chaos-wild-spin {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    15% {
        transform: translate(80px, -60px) rotate(180deg) scale(1.4);
    }
    30% {
        transform: translate(-70px, 80px) rotate(360deg) scale(0.6);
    }
    45% {
        transform: translate(90px, 50px) rotate(540deg) scale(1.2);
    }
    60% {
        transform: translate(-85px, -70px) rotate(720deg) scale(0.8);
    }
    75% {
        transform: translate(75px, -85px) rotate(900deg) scale(1.3);
    }
    90% {
        transform: translate(-60px, 95px) rotate(1080deg) scale(0.9);
    }
    100% {
        transform: translate(0, 0) rotate(1260deg) scale(1);
    }
}

@keyframes chaos-erratic-bounce {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    8% {
        transform: translate(-30px, 40px) rotate(25deg) scale(1.1);
    }
    16% {
        transform: translate(45px, -30px) rotate(-40deg) scale(0.9);
    }
    24% {
        transform: translate(-55px, -20px) rotate(65deg) scale(1.2);
    }
    32% {
        transform: translate(35px, 55px) rotate(-80deg) scale(0.8);
    }
    40% {
        transform: translate(-40px, 25px) rotate(100deg) scale(1.15);
    }
    48% {
        transform: translate(60px, -45px) rotate(-120deg) scale(0.85);
    }
    56% {
        transform: translate(-65px, -35px) rotate(140deg) scale(1.25);
    }
    64% {
        transform: translate(25px, 65px) rotate(-160deg) scale(0.75);
    }
    72% {
        transform: translate(-50px, 15px) rotate(185deg) scale(1.3);
    }
    80% {
        transform: translate(70px, -55px) rotate(-200deg) scale(0.7);
    }
    88% {
        transform: translate(-35px, -60px) rotate(225deg) scale(1.1);
    }
    96% {
        transform: translate(50px, 30px) rotate(-250deg) scale(0.95);
    }
    100% {
        transform: translate(0, 0) rotate(270deg) scale(1);
    }
}

@keyframes chaos-background-1 {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
    25% {
        transform: translate(-100px, 80px) rotate(90deg);
        opacity: 0.7;
    }
    50% {
        transform: translate(120px, -60px) rotate(180deg);
        opacity: 1;
    }
    75% {
        transform: translate(-80px, -100px) rotate(270deg);
        opacity: 0.8;
    }
    100% {
        transform: translate(0, 0) rotate(360deg);
        opacity: 1;
    }
}

@keyframes chaos-background-2 {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    20% {
        transform: translate(150px, 70px) rotate(-45deg) scale(1.3);
    }
    40% {
        transform: translate(-130px, -90px) rotate(135deg) scale(0.7);
    }
    60% {
        transform: translate(110px, -110px) rotate(-180deg) scale(1.2);
    }
    80% {
        transform: translate(-90px, 130px) rotate(225deg) scale(0.8);
    }
    100% {
        transform: translate(0, 0) rotate(-360deg) scale(1);
    }
}

@keyframes chaos-background-3 {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    10% {
        transform: translate(60px, -40px) rotate(36deg);
    }
    20% {
        transform: translate(-50px, 80px) rotate(72deg);
    }
    30% {
        transform: translate(90px, 30px) rotate(108deg);
    }
    40% {
        transform: translate(-70px, -60px) rotate(144deg);
    }
    50% {
        transform: translate(40px, 100px) rotate(180deg);
    }
    60% {
        transform: translate(-90px, -30px) rotate(216deg);
    }
    70% {
        transform: translate(70px, -80px) rotate(252deg);
    }
    80% {
        transform: translate(-40px, 60px) rotate(288deg);
    }
    90% {
        transform: translate(80px, -100px) rotate(324deg);
    }
    100% {
        transform: translate(0, 0) rotate(360deg);
    }
}

/* New visibility-focused animations with minimal rotation - contained movement */
@keyframes chaos-visible-float {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
        transform: translate(-15px, 20px) rotate(8deg) scale(1.05);
    }
    50% {
        transform: translate(20px, -15px) rotate(-5deg) scale(0.95);
    }
    75% {
        transform: translate(-12px, -18px) rotate(12deg) scale(1.02);
    }
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
}

@keyframes chaos-gentle-drift {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    20% {
        transform: translate(-10px, 15px) rotate(6deg) scale(1.03);
    }
    40% {
        transform: translate(12px, -8px) rotate(-4deg) scale(0.97);
    }
    60% {
        transform: translate(-8px, -12px) rotate(7deg) scale(1.04);
    }
    80% {
        transform: translate(10px, 5px) rotate(-3deg) scale(0.98);
    }
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
}

@keyframes chaos-mild-movement {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    12% {
        transform: translate(-15px, 20px) rotate(4deg) scale(1.02);
        opacity: 0.9;
    }
    25% {
        transform: translate(18px, -12px) rotate(-3deg) scale(0.98);
        opacity: 1;
    }
    37% {
        transform: translate(-12px, -18px) rotate(5deg) scale(1.01);
        opacity: 0.95;
    }
    50% {
        transform: translate(15px, 15px) rotate(-2deg) scale(0.99);
        opacity: 1;
    }
    62% {
        transform: translate(-18px, 5px) rotate(3deg) scale(1.02);
        opacity: 0.92;
    }
    75% {
        transform: translate(12px, -15px) rotate(-4deg) scale(0.97);
        opacity: 1;
    }
    87% {
        transform: translate(-8px, -8px) rotate(2deg) scale(1.01);
        opacity: 0.96;
    }
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* Vibrate/Shake keyframe animations - stationary with rapid micro-movements */
@keyframes chaos-vibrate {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-4px, -3px); }
    20% { transform: translate(3px, -4px); }
    30% { transform: translate(-3px, 4px); }
    40% { transform: translate(4px, 3px); }
    50% { transform: translate(-4px, 0); }
    60% { transform: translate(3px, 0); }
    70% { transform: translate(0, -4px); }
    80% { transform: translate(0, 3px); }
    90% { transform: translate(-3px, -4px); }
    100% { transform: translate(0, 0); }
}

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

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

@keyframes chaos-background-visible-1 {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
    25% {
        transform: translate(-25px, 20px) rotate(15deg);
        opacity: 0.85;
    }
    50% {
        transform: translate(30px, -15px) rotate(-12deg);
        opacity: 1;
    }
    75% {
        transform: translate(-18px, -25px) rotate(18deg);
        opacity: 0.9;
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
}

@keyframes chaos-background-visible-2 {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    20% {
        transform: translate(35px, 18px) rotate(-10deg) scale(1.05);
        opacity: 0.9;
    }
    40% {
        transform: translate(-30px, -22px) rotate(8deg) scale(0.95);
        opacity: 1;
    }
    60% {
        transform: translate(25px, -30px) rotate(-14deg) scale(1.03);
        opacity: 0.85;
    }
    80% {
        transform: translate(-22px, 35px) rotate(12deg) scale(0.98);
        opacity: 0.95;
    }
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* Vibrate/Shake keyframe animations - stationary with rapid micro-movements */
@keyframes chaos-vibrate {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-4px, -3px); }
    20% { transform: translate(3px, -4px); }
    30% { transform: translate(-3px, 4px); }
    40% { transform: translate(4px, 3px); }
    50% { transform: translate(-4px, 0); }
    60% { transform: translate(3px, 0); }
    70% { transform: translate(0, -4px); }
    80% { transform: translate(0, 3px); }
    90% { transform: translate(-3px, -4px); }
    100% { transform: translate(0, 0); }
}

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

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

@keyframes chaos-background-visible-3 {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
    15% {
        transform: translate(18px, -12px) rotate(6deg);
        opacity: 0.95;
    }
    30% {
        transform: translate(-15px, 22px) rotate(-8deg);
        opacity: 1;
    }
    45% {
        transform: translate(28px, 8px) rotate(10deg);
        opacity: 0.9;
    }
    60% {
        transform: translate(-22px, -18px) rotate(-7deg);
        opacity: 1;
    }
    75% {
        transform: translate(12px, 28px) rotate(9deg);
        opacity: 0.85;
    }
    90% {
        transform: translate(-18px, -10px) rotate(-5deg);
        opacity: 0.95;
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
}

/* Enhanced utility animation classes - balanced for visibility */
.animate-chaos {
    animation: chaos-visible-float 5s ease-in-out infinite;
}

.animate-chaos-gentle {
    animation: chaos-gentle-drift 6s ease-in-out infinite;
}

.animate-chaos-mild {
    animation: chaos-mild-movement 4s ease-in-out infinite;
}

.animate-background-chaos-1 {
    animation: chaos-background-visible-1 10s ease-in-out infinite;
}

.animate-background-chaos-2 {
    animation: chaos-background-visible-2 8s ease-in-out infinite;
}

.animate-background-chaos-3 {
    animation: chaos-background-visible-3 12s ease-in-out infinite;
}

/* New directional movement animations */
.animate-chaos-cross-horizontal {
    animation: chaos-cross-horizontal 8s linear infinite;
}

.animate-chaos-cross-vertical {
    animation: chaos-cross-vertical 7s linear infinite;
}

.animate-chaos-diagonal-sweep {
    animation: chaos-diagonal-sweep 9s linear infinite;
}

.animate-chaos-figure-eight {
    animation: chaos-figure-eight 10s ease-in-out infinite;
}

.animate-chaos-bounce-around {
    animation: chaos-bounce-around 6s ease-in-out infinite;
}

/* Vibrate/Shake animations - no movement, just vibration */
.animate-chaos-vibrate {
    animation: chaos-vibrate 0.2s ease-in-out infinite;
}

.animate-chaos-shake {
    animation: chaos-shake 0.15s ease-in-out infinite;
}

.animate-chaos-jitter {
    animation: chaos-jitter 0.1s ease-in-out infinite;
}

/* Vertical scrolling animation for chaos columns */
@keyframes chaos-scroll-up {
    0% {
        transform: translateY(100%);
        opacity: 0.8;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-200%);
        opacity: 0.8;
    }
}

/* Column styling */
.chaos-column {
    pointer-events: none;
    overflow: hidden;
    position: relative;
}

.chaos-scroll-content {
    will-change: transform;
    overflow: visible;
}

.scrolling-word {
    margin: 8px 0 !important;
    padding: 2px 4px;
    display: block !important;
    text-align: center;
    white-space: nowrap;
}

/* Directional movement animations that traverse the full container */
@keyframes chaos-cross-horizontal {
    0% {
        transform: translateX(-40vw) rotate(0deg);
        opacity: 0.8;
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translateX(0) rotate(8deg);
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(40vw) rotate(-5deg);
        opacity: 0.8;
    }
}

@keyframes chaos-cross-vertical {
    0% {
        transform: translateY(-35vh) rotate(0deg);
        opacity: 0.7;
    }
    15% {
        opacity: 1;
    }
    50% {
        transform: translateY(0) rotate(-10deg);
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        transform: translateY(35vh) rotate(6deg);
        opacity: 0.7;
    }
}

@keyframes chaos-diagonal-sweep {
    0% {
        transform: translate(-35vw, -30vh) rotate(0deg) scale(0.8);
        opacity: 0.6;
    }
    20% {
        opacity: 1;
        transform: translate(-20vw, -15vh) rotate(15deg) scale(1.1);
    }
    50% {
        transform: translate(0, 0) rotate(-8deg) scale(1);
        opacity: 1;
    }
    80% {
        opacity: 1;
        transform: translate(20vw, 15vh) rotate(20deg) scale(0.9);
    }
    100% {
        transform: translate(35vw, 30vh) rotate(-12deg) scale(0.8);
        opacity: 0.6;
    }
}

@keyframes chaos-figure-eight {
    0% {
        transform: translate(0, -20vh) rotate(0deg);
        opacity: 1;
    }
    12.5% {
        transform: translate(15vw, -10vh) rotate(45deg);
        opacity: 0.9;
    }
    25% {
        transform: translate(20vw, 0) rotate(90deg);
        opacity: 1;
    }
    37.5% {
        transform: translate(15vw, 10vh) rotate(135deg);
        opacity: 0.9;
    }
    50% {
        transform: translate(0, 0) rotate(180deg);
        opacity: 1;
    }
    62.5% {
        transform: translate(-15vw, -10vh) rotate(225deg);
        opacity: 0.9;
    }
    75% {
        transform: translate(-20vw, 0) rotate(270deg);
        opacity: 1;
    }
    87.5% {
        transform: translate(-15vw, 10vh) rotate(315deg);
        opacity: 0.9;
    }
    100% {
        transform: translate(0, -20vh) rotate(360deg);
        opacity: 1;
    }
}

@keyframes chaos-bounce-around {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    10% {
        transform: translate(-25vw, -20vh) rotate(30deg) scale(1.1);
        opacity: 0.9;
    }
    25% {
        transform: translate(30vw, -15vh) rotate(-45deg) scale(0.8);
        opacity: 1;
    }
    40% {
        transform: translate(-20vw, 25vh) rotate(60deg) scale(1.2);
        opacity: 0.8;
    }
    55% {
        transform: translate(25vw, 20vh) rotate(-30deg) scale(0.9);
        opacity: 1;
    }
    70% {
        transform: translate(-30vw, -10vh) rotate(90deg) scale(1.1);
        opacity: 0.9;
    }
    85% {
        transform: translate(15vw, -25vh) rotate(-60deg) scale(0.8);
        opacity: 1;
    }
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* Vibrate/Shake keyframe animations - stationary with rapid micro-movements */
@keyframes chaos-vibrate {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-4px, -3px); }
    20% { transform: translate(3px, -4px); }
    30% { transform: translate(-3px, 4px); }
    40% { transform: translate(4px, 3px); }
    50% { transform: translate(-4px, 0); }
    60% { transform: translate(3px, 0); }
    70% { transform: translate(0, -4px); }
    80% { transform: translate(0, 3px); }
    90% { transform: translate(-3px, -4px); }
    100% { transform: translate(0, 0); }
}

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

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