/* ===== CSS ANIMATIONS & EFFECTS ===== */

/* ===== KEYFRAME ANIMATIONS ===== */

/* Floating Animation for Hero Elements */
@keyframes float {
    0%, 100% { 
        transform: translateY(0) rotate(0deg);
        opacity: 0.7;
    }
    25% { 
        transform: translateY(-20px) rotate(5deg);
        opacity: 0.9;
    }
    50% { 
        transform: translateY(-10px) rotate(-5deg);
        opacity: 1;
    }
    75% { 
        transform: translateY(-15px) rotate(3deg);
        opacity: 0.8;
    }
}

/* Float Animation for SVG Elements */
@keyframes float-animation {
    0%, 100% { 
        transform: translateY(0px);
    }
    50% { 
        transform: translateY(-10px);
    }
}

/* Grain Animation for Hero Background */
@keyframes grain {
    0%, 100% { 
        transform: translate(0, 0);
    }
    25% { 
        transform: translate(-2px, -2px);
    }
    50% { 
        transform: translate(2px, -2px);
    }
    75% { 
        transform: translate(-2px, 2px);
    }
}

/* Client Logos Infinite Slider */
@keyframes slide {
    0% { 
        transform: translateX(0);
    }
    100% { 
        transform: translateX(-50%);
    }
}

/* Fade In Animation */
@keyframes fadeIn {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Up Animation */
@keyframes fadeInUp {
    from { 
        opacity: 0;
        transform: translateY(30px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Left Animation */
@keyframes fadeInLeft {
    from { 
        opacity: 0;
        transform: translateX(-30px);
    }
    to { 
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In Right Animation */
@keyframes fadeInRight {
    from { 
        opacity: 0;
        transform: translateX(30px);
    }
    to { 
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale In Animation */
@keyframes scaleIn {
    from { 
        opacity: 0;
        transform: scale(0.8);
    }
    to { 
        opacity: 1;
        transform: scale(1);
    }
}

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

/* Pulse Animation */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Shake Animation */
@keyframes shake {
    0%, 100% { 
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% { 
        transform: translateX(-2px);
    }
    20%, 40%, 60%, 80% { 
        transform: translateX(2px);
    }
}

/* Glow Animation */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(220, 38, 38, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(220, 38, 38, 0.8), 0 0 30px rgba(220, 38, 38, 0.6);
    }
}

/* Typing Animation */
@keyframes typing {
    from { 
        width: 0;
    }
    to { 
        width: 100%;
    }
}

/* Loading Dots Animation */
@keyframes loadingDots {
    0%, 20% {
        color: transparent;
        text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent;
    }
    40% {
        color: var(--primary-red);
        text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent;
    }
    60% {
        text-shadow: 0.25em 0 0 var(--primary-red), 0.5em 0 0 transparent;
    }
    80%, 100% {
        text-shadow: 0.25em 0 0 var(--primary-red), 0.5em 0 0 var(--primary-red);
    }
}

/* ===== ANIMATION CLASSES ===== */

/* Apply Animations to Elements */
.float-animation {
    animation: float-animation 3s ease-in-out infinite;
}

.float-animation:nth-child(2) {
    animation-delay: 0.5s;
}

.float-animation:nth-child(3) {
    animation-delay: 1s;
}

.float-animation:nth-child(4) {
    animation-delay: 1.5s;
}

/* Hero Floating Icons */
.floating-icon {
    animation: float 6s ease-in-out infinite;
}

/* Scroll Animation Classes */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.animate-on-scroll.animate {
    opacity: 1;
    transform: translateY(0);
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fade-in-left {
    animation: fadeInLeft 0.8s ease-out forwards;
}

.animate-fade-in-right {
    animation: fadeInRight 0.8s ease-out forwards;
}

.animate-scale-in {
    animation: scaleIn 0.6s ease-out forwards;
}

.animate-bounce-in {
    animation: bounceIn 0.8s ease-out forwards;
}

/* ===== HOVER EFFECTS ===== */

/* Button Hover Effects */
.btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn:hover::before {
    left: 100%;
}

.btn:active {
    transform: translateY(1px);
}

/* Enhanced Button Hover Effects */
.btn--primary:hover {
    box-shadow: 0 15px 35px rgba(220, 38, 38, 0.4);
    transform: translateY(-3px);
}

.btn--outline:hover {
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.3);
    transform: translateY(-3px);
}

/* Service Card Hover Effects */
.service-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.service-card:hover .service-card__icon {
    animation: pulse 0.6s ease-in-out;
}

/* Tech Item Hover Effects */
.tech__item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tech__item:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.tech__item:hover i {
    animation: bounceIn 0.6s ease-out;
}

/* Process Step Hover Effects */
.process__step {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.process__step:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.process__step:hover .process__step-icon {
    animation: pulse 0.8s ease-in-out;
    background: var(--gradient-secondary);
}

.process__step:hover .process__step-number {
    animation: glow 1s ease-in-out infinite;
}

/* Stat Card Hover Effects */
.stat-card {
    transition: all 0.3s ease;
}

.stat-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 30px rgba(220, 38, 38, 0.2);
}

.stat-card:hover .stat-number {
    animation: pulse 0.6s ease-in-out;
}

/* Client Logo Hover Effects */
.client-logo {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.client-logo:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.client-logo:hover img {
    filter: grayscale(0%) brightness(1.1);
}

/* Navigation Hover Effects */
.nav__link {
    position: relative;
    transition: all 0.3s ease;
}

.nav__link:hover {
    color: var(--primary-red);
    transform: translateY(-1px);
}

.nav__submenu a {
    transition: all 0.3s ease;
}

.nav__submenu a:hover {
    transform: translateX(5px);
}

/* Footer Social Hover Effects */
.footer__social a {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer__social a:hover {
    background: var(--primary-red);
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.3);
}

/* ===== LOADING ANIMATIONS ===== */

/* Loading Spinner */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(220, 38, 38, 0.1);
    border-left: 4px solid var(--primary-red);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Loading Dots */
.loading-dots::after {
    content: '...';
    animation: loadingDots 1.5s infinite;
}

/* ===== SCROLL ANIMATIONS ===== */

/* Parallax Effect for Hero */
.hero {
    transform: translateZ(0);
}

.hero::before {
    animation: grain 20s linear infinite;
}

/* Stagger Animation for Service Cards */
.service-card:nth-child(1) { animation-delay: 0.1s; }
.service-card:nth-child(2) { animation-delay: 0.2s; }
.service-card:nth-child(3) { animation-delay: 0.3s; }
.service-card:nth-child(4) { animation-delay: 0.4s; }
.service-card:nth-child(5) { animation-delay: 0.5s; }
.service-card:nth-child(6) { animation-delay: 0.6s; }
.service-card:nth-child(7) { animation-delay: 0.7s; }
.service-card:nth-child(8) { animation-delay: 0.8s; }

/* Stagger Animation for Process Steps */
.process__step:nth-child(1) { animation-delay: 0.1s; }
.process__step:nth-child(2) { animation-delay: 0.2s; }
.process__step:nth-child(3) { animation-delay: 0.3s; }
.process__step:nth-child(4) { animation-delay: 0.4s; }

/* Stagger Animation for Tech Categories */
.tech__category:nth-child(1) { animation-delay: 0.1s; }
.tech__category:nth-child(2) { animation-delay: 0.2s; }
.tech__category:nth-child(3) { animation-delay: 0.3s; }
.tech__category:nth-child(4) { animation-delay: 0.4s; }

/* ===== INTERACTIVE ANIMATIONS ===== */

/* Form Input Focus Effects */
.form-input,
.form-select,
.form-textarea {
    transition: all 0.3s ease;
    position: relative;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.2);
}

/* Testimonial Transition Effects */
.testimonial {
    transition: all 0.5s ease;
}

.testimonial.active {
    animation: fadeIn 0.8s ease-in-out;
}

/* Testimonial Dots Animation */
.testimonials__dots .dot {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonials__dots .dot:hover {
    transform: scale(1.3);
    background: var(--secondary-red);
}

.testimonials__dots .dot.active {
    animation: pulse 1s ease-in-out infinite;
}

/* ===== COUNTER ANIMATION ===== */

/* Counter Number Animation */
.stat-number {
    transition: all 0.3s ease;
}

.stat-number.counting {
    color: var(--secondary-red);
    animation: pulse 0.1s ease-in-out;
}

/* ===== MOBILE ANIMATIONS ===== */

/* Mobile Menu Animation */
.nav__menu {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav__toggle span {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile Menu Item Stagger */
.nav__menu.active .nav__link {
    animation: fadeInLeft 0.5s ease-out forwards;
}

.nav__menu.active .nav__link:nth-child(1) { animation-delay: 0.1s; }
.nav__menu.active .nav__link:nth-child(2) { animation-delay: 0.2s; }
.nav__menu.active .nav__link:nth-child(3) { animation-delay: 0.3s; }
.nav__menu.active .nav__link:nth-child(4) { animation-delay: 0.4s; }
.nav__menu.active .nav__link:nth-child(5) { animation-delay: 0.5s; }

/* ===== ERROR ANIMATIONS ===== */

/* Error Shake for Forms */
.form-error {
    animation: shake 0.5s ease-in-out;
    border-color: #ef4444 !important;
}

/* ===== SUCCESS ANIMATIONS ===== */

/* Success Bounce */
.success-message {
    animation: bounceIn 0.6s ease-out;
    color: var(--accent-green);
}

/* ===== ACCESSIBILITY ANIMATIONS ===== */

/* Reduced Motion Overrides */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .floating-icon,
    .float-animation,
    .clients__track,
    .grain {
        animation: none !important;
    }
    
    .service-card:hover,
    .process__step:hover,
    .tech__item:hover,
    .stat-card:hover,
    .btn:hover {
        transform: none !important;
    }
}

/* ===== HIGH CONTRAST MODE ===== */

@media (prefers-contrast: high) {
    .service-card:hover,
    .process__step:hover,
    .tech__item:hover {
        box-shadow: 0 0 0 3px var(--primary-red) !important;
    }
    
    .btn--primary {
        border: 2px solid var(--primary-black);
    }
    
    .btn--outline {
        border-width: 3px;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* GPU Acceleration for Smooth Animations */
.service-card,
.process__step,
.tech__item,
.stat-card,
.client-logo,
.btn,
.floating-icon,
.hero__illustration,
.testimonial {
    will-change: transform;
    transform: translateZ(0);
}

/* Optimize Repaint for Moving Elements */
.clients__track,
.floating-icon,
.hero::before {
    will-change: transform;
    transform: translateZ(0);
}

/* ===== CUSTOM ANIMATION UTILITIES ===== */

/* Delay Classes */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* Duration Classes */
.duration-300 { animation-duration: 0.3s; }
.duration-500 { animation-duration: 0.5s; }
.duration-700 { animation-duration: 0.7s; }
.duration-1000 { animation-duration: 1s; }

/* Easing Classes */
.ease-linear { animation-timing-function: linear; }
.ease-in { animation-timing-function: ease-in; }
.ease-out { animation-timing-function: ease-out; }
.ease-in-out { animation-timing-function: ease-in-out; }

/* ===== NEW HERO ANIMATIONS ===== */

/* Pulse line animation for connection lines */
@keyframes pulse-line {
    0%, 100% { 
        stroke-dasharray: 0, 200;
        opacity: 0.3;
    }
    50% { 
        stroke-dasharray: 100, 200;
        opacity: 0.8;
    }
}

.pulse-line {
    animation: pulse-line 3s ease-in-out infinite;
}

/* Data particle movement */
@keyframes data-particle {
    0%, 100% { 
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }
    50% { 
        transform: translateY(-10px) scale(1.2);
        opacity: 1;
    }
}

.data-particle {
    animation: data-particle 2s ease-in-out infinite;
}

/* WiFi signal animation */
@keyframes wifi-signal {
    0%, 100% { 
        opacity: 0.2;
        stroke-dasharray: 0, 50;
    }
    50% { 
        opacity: 0.8;
        stroke-dasharray: 25, 50;
    }
}

.wifi-signal {
    animation: wifi-signal 2s ease-in-out infinite;
}

/* Enhanced float animation for hero elements */
@keyframes float-animation {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg);
    }
    25% { 
        transform: translateY(-8px) rotate(1deg);
    }
    50% { 
        transform: translateY(-5px) rotate(-1deg);
    }
    75% { 
        transform: translateY(-12px) rotate(0.5deg);
    }
}

.float-animation {
    animation: float-animation 4s ease-in-out infinite;
}

/* Smooth section transitions */
@keyframes sectionFadeIn {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-animate {
    animation: sectionFadeIn 0.8s ease-out;
}

/* ===== PROFESSIONAL ANIMATIONS ===== */

/* Professional floating animation */
@keyframes professional-float {
    0%, 100% { 
        transform: translateY(0px) scale(1);
    }
    25% { 
        transform: translateY(-5px) scale(1.02);
    }
    50% { 
        transform: translateY(-3px) scale(1);
    }
    75% { 
        transform: translateY(-7px) scale(1.01);
    }
}

.professional-float {
    animation: professional-float 4s ease-in-out infinite;
}

/* Server light blinking */
@keyframes server-light {
    0%, 100% { 
        opacity: 0.8;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.2);
    }
}

.server-light {
    animation: server-light 2s ease-in-out infinite;
}

/* Network flow animation */
@keyframes network-flow {
    0%, 100% { 
        stroke-dasharray: 0, 100;
        opacity: 0.4;
    }
    50% { 
        stroke-dasharray: 50, 100;
        opacity: 0.8;
    }
}

.network-flow {
    animation: network-flow 3s ease-in-out infinite;
}

/* Data flow particles */
@keyframes data-flow {
    0%, 100% { 
        transform: translateX(0) scale(1);
        opacity: 0.8;
    }
    25% { 
        transform: translateX(20px) scale(1.2);
        opacity: 1;
    }
    50% { 
        transform: translateX(40px) scale(1);
        opacity: 0.9;
    }
    75% { 
        transform: translateX(60px) scale(1.1);
        opacity: 1;
    }
}

.data-flow {
    animation: data-flow 4s ease-in-out infinite;
}

/* Cloud pulsing */
@keyframes cloud-pulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.7;
    }
    50% { 
        transform: scale(1.05);
        opacity: 0.9;
    }
}

.cloud-pulse {
    animation: cloud-pulse 3s ease-in-out infinite;
}

/* Brand line animation */
@keyframes brand-line {
    0% { 
        transform: scaleX(0);
        opacity: 0;
    }
    50% { 
        transform: scaleX(1);
        opacity: 1;
    }
    100% { 
        transform: scaleX(1);
        opacity: 0.6;
    }
}

.brand-line {
    animation: brand-line 2s ease-out;
}

/* About section team member animation */
@keyframes team-member {
    0%, 100% { 
        transform: translateY(0) scale(1);
    }
    33% { 
        transform: translateY(-8px) scale(1.05);
    }
    66% { 
        transform: translateY(-4px) scale(1.02);
    }
}

.team-member {
    animation: team-member 6s ease-in-out infinite;
}

/* Connection line animation */
@keyframes connection-line {
    0%, 100% { 
        stroke-dasharray: 0, 50;
        opacity: 0.4;
    }
    50% { 
        stroke-dasharray: 25, 50;
        opacity: 0.8;
    }
}

.connection-line {
    animation: connection-line 2s ease-in-out infinite;
}

/* Innovation element animation */
@keyframes innovation-element {
    0%, 100% { 
        transform: rotate(0deg) scale(1);
        opacity: 0.8;
    }
    25% { 
        transform: rotate(5deg) scale(1.05);
        opacity: 0.9;
    }
    50% { 
        transform: rotate(-3deg) scale(1.02);
        opacity: 1;
    }
    75% { 
        transform: rotate(2deg) scale(1.03);
        opacity: 0.9;
    }
}

.innovation-element {
    animation: innovation-element 8s ease-in-out infinite;
}

/* Professional icon animation */
@keyframes professional-icon {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.7;
    }
    50% { 
        transform: scale(1.1);
        opacity: 1;
    }
}

.professional-icon {
    animation: professional-icon 3s ease-in-out infinite;
}
/* ===== HERO TECH ANIMATIONS ===== */

/* Central hub pulsing */
@keyframes central-hub {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.9;
    }
    50% { 
        transform: scale(1.05);
        opacity: 1;
    }
}

.central-hub {
    animation: central-hub 3s ease-in-out infinite;
}

/* Hub core rotating */
@keyframes hub-core {
    0% { 
        transform: rotate(0deg);
    }
    100% { 
        transform: rotate(360deg);
    }
}

.hub-core {
    animation: hub-core 10s linear infinite;
}

/* Orbit group rotation */
@keyframes orbit-rotation {
    0% { 
        transform: rotate(0deg);
    }
    100% { 
        transform: rotate(360deg);
    }
}

.orbit-group {
    animation: orbit-rotation 20s linear infinite;
}

/* Tech elements floating */
@keyframes tech-float {
    0%, 100% { 
        transform: translateY(0px) scale(1);
    }
    25% { 
        transform: translateY(-8px) scale(1.02);
    }
    50% { 
        transform: translateY(-4px) scale(1);
    }
    75% { 
        transform: translateY(-12px) scale(1.01);
    }
}

.tech-float {
    animation: tech-float 4s ease-in-out infinite;
}

/* Cloud floating */
@keyframes cloud-float {
    0%, 100% { 
        transform: translateY(0px) scale(1);
    }
    33% { 
        transform: translateY(-6px) scale(1.03);
    }
    66% { 
        transform: translateY(-3px) scale(1.01);
    }
}

.cloud-float {
    animation: cloud-float 5s ease-in-out infinite;
}

/* AI pulsing */
@keyframes ai-pulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.8;
    }
    50% { 
        transform: scale(1.1);
        opacity: 1;
    }
}

.ai-pulse {
    animation: ai-pulse 2s ease-in-out infinite;
}

/* AI core spinning */
@keyframes ai-core {
    0% { 
        transform: rotate(0deg) scale(1);
    }
    25% { 
        transform: rotate(90deg) scale(1.1);
    }
    50% { 
        transform: rotate(180deg) scale(1);
    }
    75% { 
        transform: rotate(270deg) scale(1.1);
    }
    100% { 
        transform: rotate(360deg) scale(1);
    }
}

.ai-core {
    animation: ai-core 4s ease-in-out infinite;
}

/* Security shield */
@keyframes security-shield {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.9;
    }
    25% { 
        transform: scale(1.05);
        opacity: 1;
    }
    50% { 
        transform: scale(1.02);
        opacity: 0.95;
    }
    75% { 
        transform: scale(1.08);
        opacity: 1;
    }
}

.security-shield {
    animation: security-shield 3s ease-in-out infinite;
}

/* Connection flow */
@keyframes connection-flow {
    0%, 100% { 
        stroke-dasharray: 0, 100;
        opacity: 0.4;
    }
    50% { 
        stroke-dasharray: 50, 100;
        opacity: 0.8;
    }
}

.connection-flow {
    animation: connection-flow 3s ease-in-out infinite;
}

/* Data particles movement */
@keyframes data-particle {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.8;
    }
    25% { 
        transform: scale(1.5);
        opacity: 1;
    }
    50% { 
        transform: scale(1.2);
        opacity: 0.9;
    }
    75% { 
        transform: scale(1.8);
        opacity: 1;
    }
}

.data-particle {
    animation: data-particle 2s ease-in-out infinite;
}
/* ===== NEW HERO MANAGEMENT ANIMATIONS ===== */

/* Laptop shadow breathing */
@keyframes laptop-shadow {
    0%, 100% { 
        opacity: 0.2;
        transform: scale(1);
    }
    50% { 
        opacity: 0.3;
        transform: scale(1.05);
    }
}

.laptop-shadow {
    animation: laptop-shadow 4s ease-in-out infinite;
}

/* Screen glow effect */
@keyframes screen-glow {
    0%, 100% { 
        box-shadow: inset 0 0 0 rgba(220,38,38,0);
    }
    50% { 
        box-shadow: inset 0 0 20px rgba(220,38,38,0.1);
    }
}

.laptop-screen {
    animation: screen-glow 3s ease-in-out infinite;
}

/* Management hands animation */
@keyframes hand-animate {
    0%, 100% { 
        transform: translateY(0) rotate(0deg) scale(1);
    }
    25% { 
        transform: translateY(-3px) rotate(2deg) scale(1.05);
    }
    50% { 
        transform: translateY(-1px) rotate(-1deg) scale(1.02);
    }
    75% { 
        transform: translateY(-4px) rotate(1deg) scale(1.08);
    }
}

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

.hand-1 .hand-animate { animation-delay: 0s; }
.hand-2 .hand-animate { animation-delay: 0.5s; }
.hand-3 .hand-animate { animation-delay: 1s; }
.hand-4 .hand-animate { animation-delay: 1.5s; }
.hand-5 .hand-animate { animation-delay: 2s; }

/* Service icons floating */
@keyframes service-icon {
    0%, 100% { 
        transform: translateY(0) scale(1);
        opacity: 0.9;
    }
    33% { 
        transform: translateY(-5px) scale(1.1);
        opacity: 1;
    }
    66% { 
        transform: translateY(-2px) scale(1.05);
        opacity: 0.95;
    }
}

.service-icon {
    animation: service-icon 4s ease-in-out infinite;
}

.hand-1 .service-icon { animation-delay: 0.2s; }
.hand-2 .service-icon { animation-delay: 0.7s; }
.hand-3 .service-icon { animation-delay: 1.2s; }
.hand-4 .service-icon { animation-delay: 1.7s; }
.hand-5 .service-icon { animation-delay: 2.2s; }

/* Management hub pulsing */
@keyframes management-hub {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.7;
    }
    50% { 
        transform: scale(1.1);
        opacity: 1;
    }
}

.management-hub {
    animation: management-hub 2s ease-in-out infinite;
}

/* Hub core rotation */
@keyframes hub-core {
    0% { 
        transform: rotate(0deg);
    }
    100% { 
        transform: rotate(360deg);
    }
}

.hub-core {
    animation: hub-core 8s linear infinite;
}

/* Connection lines flow */
@keyframes connection-line {
    0%, 100% { 
        stroke-dasharray: 0, 20;
        opacity: 0.4;
    }
    50% { 
        stroke-dasharray: 10, 20;
        opacity: 0.8;
    }
}

.connection-line {
    animation: connection-line 2s ease-in-out infinite;
}

/* Data flow animation */
@keyframes data-flow {
    0%, 100% { 
        stroke-dasharray: 0, 100;
        opacity: 0.4;
    }
    50% { 
        stroke-dasharray: 50, 100;
        opacity: 0.8;
    }
}

.data-flow {
    animation: data-flow 3s ease-in-out infinite;
}

/* Floating particles */
@keyframes floating-particle {
    0%, 100% { 
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }
    25% { 
        transform: translateY(-10px) scale(1.5);
        opacity: 1;
    }
    50% { 
        transform: translateY(-5px) scale(1.2);
        opacity: 0.9;
    }
    75% { 
        transform: translateY(-15px) scale(1.8);
        opacity: 1;
    }
}

.floating-particle {
    animation: floating-particle 4s ease-in-out infinite;
}

/* Timeline path progress */
@keyframes pathProgress {
    0% { 
        transform: scaleX(0);
    }
    100% { 
        transform: scaleX(1);
    }
}

/* Management hands group rotation */
@keyframes management-rotation {
    0% { 
        transform: rotate(0deg);
    }
    100% { 
        transform: rotate(360deg);
    }
}

.management-hand {
    animation: management-rotation 20s linear infinite;
}

.hand-1 { animation-delay: 0s; }
.hand-2 { animation-delay: 4s; }
.hand-3 { animation-delay: 8s; }
.hand-4 { animation-delay: 12s; }
.hand-5 { animation-delay: 16s; }
/* ===== ENHANCED HERO WORKSPACE ANIMATIONS ===== */

/* Office shadow breathing */
@keyframes office-shadow {
    0%, 100% { 
        opacity: 0.1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.2;
        transform: scale(1.02);
    }
}

.office-shadow {
    animation: office-shadow 4s ease-in-out infinite;
}

/* Screen glow effects */
@keyframes screen-glow {
    0%, 100% { 
        filter: brightness(1);
    }
    50% { 
        filter: brightness(1.1);
    }
}

.main-screen, .left-screen, .right-screen {
    animation: screen-glow 3s ease-in-out infinite;
}

/* Screen elements typing effect */
@keyframes screen-element {
    0%, 50% { 
        opacity: 0.6;
        transform: scaleX(0.8);
    }
    100% { 
        opacity: 1;
        transform: scaleX(1);
    }
}

.screen-element {
    animation: screen-element 2s ease-in-out infinite;
}

.screen-element:nth-child(1) { animation-delay: 0s; }
.screen-element:nth-child(2) { animation-delay: 0.3s; }
.screen-element:nth-child(3) { animation-delay: 0.6s; }
.screen-element:nth-child(4) { animation-delay: 0.9s; }

/* Code lines typing */
@keyframes code-line {
    0% { 
        transform: scaleX(0);
        opacity: 0;
    }
    50% { 
        transform: scaleX(1);
        opacity: 1;
    }
    100% { 
        transform: scaleX(1);
        opacity: 0.8;
    }
}

.code-line {
    animation: code-line 3s ease-in-out infinite;
}

.code-line:nth-child(1) { animation-delay: 0s; }
.code-line:nth-child(2) { animation-delay: 0.2s; }
.code-line:nth-child(3) { animation-delay: 0.4s; }
.code-line:nth-child(4) { animation-delay: 0.6s; }
.code-line:nth-child(5) { animation-delay: 0.8s; }
.code-line:nth-child(6) { animation-delay: 1s; }
.code-line:nth-child(7) { animation-delay: 1.2s; }

/* Chart elements growing */
@keyframes chart-element {
    0%, 100% { 
        transform: scaleY(0.5);
        opacity: 0.7;
    }
    50% { 
        transform: scaleY(1);
        opacity: 1;
    }
}

.chart-element {
    animation: chart-element 2s ease-in-out infinite;
}

.chart-element:nth-child(1) { animation-delay: 0s; }
.chart-element:nth-child(2) { animation-delay: 0.3s; }
.chart-element:nth-child(3) { animation-delay: 0.6s; }
.chart-element:nth-child(4) { animation-delay: 0.9s; }

/* Person working animation */
@keyframes person-working {
    0%, 100% { 
        transform: translateY(0);
    }
    25% { 
        transform: translateY(-2px);
    }
    50% { 
        transform: translateY(0);
    }
    75% { 
        transform: translateY(-1px);
    }
}

.person-body, .person-head {
    animation: person-working 4s ease-in-out infinite;
}

/* Arms typing animation */
@keyframes left-arm {
    0%, 100% { 
        transform: rotate(0deg) translateY(0);
    }
    25% { 
        transform: rotate(-5deg) translateY(-2px);
    }
    50% { 
        transform: rotate(0deg) translateY(0);
    }
    75% { 
        transform: rotate(-3deg) translateY(-1px);
    }
}

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

.left-arm {
    animation: left-arm 3s ease-in-out infinite;
}

.right-arm {
    animation: right-arm 3s ease-in-out infinite 0.5s;
}

/* Hands working */
@keyframes left-hand {
    0%, 100% { 
        transform: scale(1) translateY(0);
    }
    50% { 
        transform: scale(1.1) translateY(-1px);
    }
}

@keyframes right-hand {
    0%, 100% { 
        transform: scale(1) translateY(0);
    }
    50% { 
        transform: scale(1.1) translateY(-1px);
    }
}

.left-hand {
    animation: left-hand 2s ease-in-out infinite;
}

.right-hand {
    animation: right-hand 2s ease-in-out infinite 0.3s;
}

/* Tech icons floating */
@keyframes tech-icon {
    0%, 100% { 
        transform: translateY(0) scale(1);
    }
    33% { 
        transform: translateY(-8px) scale(1.05);
    }
    66% { 
        transform: translateY(-4px) scale(1.02);
    }
}

.tech-icon {
    animation: tech-icon 6s ease-in-out infinite;
}

.web-icon { animation-delay: 0s; }
.mobile-icon { animation-delay: 1s; }
.db-icon { animation-delay: 2s; }
.cloud-icon { animation-delay: 3s; }
.ai-icon { animation-delay: 4s; }

/* Icon backgrounds pulsing */
@keyframes icon-bg {
    0%, 100% { 
        opacity: 0.2;
        transform: scale(1);
    }
    50% { 
        opacity: 0.4;
        transform: scale(1.1);
    }
}

.icon-bg {
    animation: icon-bg 3s ease-in-out infinite;
}

/* Connection lines flow */
@keyframes connection-line {
    0%, 100% { 
        stroke-dasharray: 0, 50;
        opacity: 0.4;
    }
    50% { 
        stroke-dasharray: 25, 50;
        opacity: 0.8;
    }
}

.connection-line {
    animation: connection-line 2s ease-in-out infinite;
}

/* Data flow lines */
@keyframes data-flow-line {
    0%, 100% { 
        stroke-dasharray: 0, 100;
        opacity: 0.4;
    }
    50% { 
        stroke-dasharray: 50, 100;
        opacity: 0.8;
    }
}

.data-flow-line {
    animation: data-flow-line 3s ease-in-out infinite;
}

/* Success dots blinking */
@keyframes success-dot {
    0%, 100% { 
        opacity: 0.5;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.5);
    }
}

.success-dot {
    animation: success-dot 2s ease-in-out infinite;
}

/* App elements */
@keyframes app-element {
    0%, 100% { 
        opacity: 0.6;
    }
    50% { 
        opacity: 1;
    }
}

.app-element {
    animation: app-element 2s ease-in-out infinite;
}

.app-element:nth-child(1) { animation-delay: 0s; }
.app-element:nth-child(2) { animation-delay: 0.3s; }
.app-element:nth-child(3) { animation-delay: 0.6s; }
.app-element:nth-child(4) { animation-delay: 0.9s; }

/* ===== DETAILED HERO WORKSPACE ANIMATIONS ===== */

/* Office shadow breathing */
@keyframes office-shadow {
    0%, 100% { 
        opacity: 0.1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.2;
        transform: scale(1.02);
    }
}

.office-shadow {
    animation: office-shadow 4s ease-in-out infinite;
}

/* Screen glow effects */
@keyframes screen-glow {
    0%, 100% { 
        filter: brightness(1);
    }
    50% { 
        filter: brightness(1.1);
    }
}

.coding-screen, .design-screen, .testing-screen {
    animation: screen-glow 3s ease-in-out infinite;
}

/* Code lines typing effect */
@keyframes code-line {
    0% { 
        transform: scaleX(0);
        opacity: 0;
    }
    50% { 
        transform: scaleX(1);
        opacity: 1;
    }
    100% { 
        transform: scaleX(1);
        opacity: 0.8;
    }
}

.code-line {
    animation: code-line 3s ease-in-out infinite;
}

.code-line:nth-child(1) { animation-delay: 0s; }
.code-line:nth-child(2) { animation-delay: 0.2s; }
.code-line:nth-child(3) { animation-delay: 0.4s; }
.code-line:nth-child(4) { animation-delay: 0.6s; }
.code-line:nth-child(5) { animation-delay: 0.8s; }
.code-line:nth-child(6) { animation-delay: 1s; }
.code-line:nth-child(7) { animation-delay: 1.2s; }
.code-line:nth-child(8) { animation-delay: 1.4s; }
.code-line:nth-child(9) { animation-delay: 1.6s; }

/* Cursor blinking */
@keyframes cursor-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.cursor-blink {
    animation: cursor-blink 1s infinite;
}

/* Design tools animation */
@keyframes design-tool {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.8;
    }
    50% { 
        transform: scale(1.2);
        opacity: 1;
    }
}

.design-tool {
    animation: design-tool 4s ease-in-out infinite;
}

.design-tool:nth-child(1) { animation-delay: 0s; }
.design-tool:nth-child(2) { animation-delay: 0.5s; }
.design-tool:nth-child(3) { animation-delay: 1s; }
.design-tool:nth-child(4) { animation-delay: 1.5s; }
.design-tool:nth-child(5) { animation-delay: 2s; }
.design-tool:nth-child(6) { animation-delay: 2.5s; }

/* UI elements animation */
@keyframes ui-element {
    0%, 100% { 
        opacity: 0.8;
    }
    50% { 
        opacity: 1;
        transform: scale(1.02);
    }
}

.ui-element, .ui-button, .ui-text {
    animation: ui-element 3s ease-in-out infinite;
}

.ui-element:nth-child(1) { animation-delay: 0s; }
.ui-button:nth-child(1) { animation-delay: 0.3s; }
.ui-button:nth-child(2) { animation-delay: 0.6s; }

/* Color swatches animation */
@keyframes color-swatch {
    0%, 100% { 
        transform: scale(1);
    }
    25% { 
        transform: scale(1.2);
    }
    50% { 
        transform: scale(1.1);
    }
    75% { 
        transform: scale(1.3);
    }
}

.color-swatch {
    animation: color-swatch 4s ease-in-out infinite;
}

.color-swatch:nth-child(1) { animation-delay: 0s; }
.color-swatch:nth-child(2) { animation-delay: 0.2s; }
.color-swatch:nth-child(3) { animation-delay: 0.4s; }
.color-swatch:nth-child(4) { animation-delay: 0.6s; }

/* Test results animation */
@keyframes test-passed {
    0%, 100% { 
        opacity: 0.8;
        transform: scaleX(1);
    }
    50% { 
        opacity: 1;
        transform: scaleX(1.02);
    }
}

@keyframes test-failed {
    0%, 100% { 
        opacity: 0.8;
    }
    50% { 
        opacity: 1;
        background: #FCA5A5;
    }
}

@keyframes test-warning {
    0%, 100% { 
        opacity: 0.8;
    }
    50% { 
        opacity: 1;
        background: #FDE68A;
    }
}

.test-passed {
    animation: test-passed 2s ease-in-out infinite;
}

.test-failed {
    animation: test-failed 2s ease-in-out infinite;
}

.test-warning {
    animation: test-warning 2s ease-in-out infinite;
}

/* Person working animation */
@keyframes person-working {
    0%, 100% { 
        transform: translateY(0);
    }
    25% { 
        transform: translateY(-2px);
    }
    50% { 
        transform: translateY(0);
    }
    75% { 
        transform: translateY(-1px);
    }
}

.person-body, .person-head {
    animation: person-working 4s ease-in-out infinite;
}

/* Eye blinking */
@keyframes eye-blink {
    0%, 90%, 100% { 
        transform: scaleY(1);
    }
    95% { 
        transform: scaleY(0.1);
    }
}

.person-eye {
    animation: eye-blink 5s ease-in-out infinite;
}

.person-eye:nth-child(1) { animation-delay: 0s; }
.person-eye:nth-child(2) { animation-delay: 0.1s; }

/* Arms working */
@keyframes left-arm {
    0%, 100% { 
        transform: rotate(0deg) translateY(0);
    }
    25% { 
        transform: rotate(-5deg) translateY(-2px);
    }
    50% { 
        transform: rotate(0deg) translateY(0);
    }
    75% { 
        transform: rotate(-3deg) translateY(-1px);
    }
}

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

.left-arm {
    animation: left-arm 3s ease-in-out infinite;
}

.right-arm {
    animation: right-arm 3s ease-in-out infinite 0.5s;
}

/* Hands working */
@keyframes left-hand {
    0%, 100% { 
        transform: scale(1) translateY(0);
    }
    50% { 
        transform: scale(1.1) translateY(-1px);
    }
}

@keyframes right-hand {
    0%, 100% { 
        transform: scale(1) translateY(0);
    }
    50% { 
        transform: scale(1.1) translateY(-1px);
    }
}

.left-hand {
    animation: left-hand 2s ease-in-out infinite;
}

.right-hand {
    animation: right-hand 2s ease-in-out infinite 0.3s;
}

/* Key press animation */
@keyframes key-press {
    0%, 80%, 100% { 
        opacity: 0.8;
        transform: translateY(0);
    }
    10%, 70% { 
        opacity: 1;
        transform: translateY(1px);
    }
}

.key-press {
    animation: key-press 3s ease-in-out infinite;
}

.key-press:nth-child(1) { animation-delay: 0s; }
.key-press:nth-child(2) { animation-delay: 0.5s; }

/* Mouse click */
@keyframes mouse-click {
    0%, 90%, 100% { 
        opacity: 0.8;
        transform: scale(1);
    }
    5%, 85% { 
        opacity: 1;
        transform: scale(1.2);
    }
}

.mouse-click {
    animation: mouse-click 2s ease-in-out infinite;
}

/* Steam animation */
@keyframes steam {
    0% { 
        opacity: 0.6;
        transform: translateY(0) scaleY(1);
    }
    50% { 
        opacity: 0.3;
        transform: translateY(-8px) scaleY(1.2);
    }
    100% { 
        opacity: 0;
        transform: translateY(-15px) scaleY(0.8);
    }
}

.steam {
    animation: steam 3s ease-out infinite;
}

.steam:nth-child(1) { animation-delay: 0s; }
.steam:nth-child(2) { animation-delay: 0.5s; }
.steam:nth-child(3) { animation-delay: 1s; }

/* Success indicators */
@keyframes success-indicator {
    0%, 100% { 
        opacity: 0.8;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.2);
    }
}

.success-indicator {
    animation: success-indicator 3s ease-in-out infinite;
}

.success-indicator:nth-child(1) { animation-delay: 0s; }
.success-indicator:nth-child(2) { animation-delay: 1s; }
.success-indicator:nth-child(3) { animation-delay: 2s; }

/* Process flow arrows */
@keyframes process-flow {
    0%, 100% { 
        stroke-dasharray: 0, 50;
        opacity: 0.4;
    }
    50% { 
        stroke-dasharray: 25, 50;
        opacity: 1;
    }
}

.process-flow {
    animation: process-flow 2s ease-in-out infinite;
}

.process-flow:nth-child(1) { animation-delay: 0s; }
.process-flow:nth-child(2) { animation-delay: 0.5s; }
/* ===== ENHANCED PROCESS TIMELINE ANIMATIONS ===== */

/* Timeline flow animation */
@keyframes timeline-flow {
    0%, 100% { 
        background-position: 0% 50%;
    }
    50% { 
        background-position: 100% 50%;
    }
}

/* Vertical flow animation */
@keyframes vertical-flow {
    0%, 100% { 
        background: linear-gradient(to bottom, var(--primary-blue), var(--light-blue));
    }
    50% { 
        background: linear-gradient(to bottom, var(--light-blue), var(--primary-blue));
    }
}

/* Step appearance animation */
@keyframes step-appear {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Icon floating animation */
@keyframes icon-float {
    0%, 100% { 
        transform: translateY(0) scale(1);
    }
    33% { 
        transform: translateY(-5px) scale(1.1);
    }
    66% { 
        transform: translateY(-2px) scale(1.05);
    }
}

/* Pulse animation for circles */
@keyframes pulse-circle {
    0%, 100% { 
        box-shadow: 0 8px 25px rgba(37, 99, 235, 0.2);
    }
    50% { 
        box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4), 0 0 0 10px rgba(37, 99, 235, 0.1);
    }
}

.process__step-circle {
    animation: pulse-circle 3s ease-in-out infinite;
}

.process__step:nth-child(1) .process__step-circle { animation-delay: 0s; }
.process__step:nth-child(2) .process__step-circle { animation-delay: 0.5s; }
.process__step:nth-child(3) .process__step-circle { animation-delay: 1s; }
.process__step:nth-child(4) .process__step-circle { animation-delay: 1.5s; }
.process__step:nth-child(5) .process__step-circle { animation-delay: 2s; }
.process__step:nth-child(6) .process__step-circle { animation-delay: 2.5s; }

/* Content shimmer effect */
@keyframes content-shimmer {
    0% { 
        transform: translateX(-100%);
    }
    100% { 
        transform: translateX(100%);
    }
}

.process__step-content::before {
    animation: none;
}

.process__step:hover .process__step-content::before {
    animation: content-shimmer 0.6s ease;
}

/* Hero Animations for About Page */
@keyframes float-animation {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}

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

@keyframes slide-in {
    0% { opacity: 0; transform: translateX(-20px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes bounce-in {
    0% { opacity: 0; transform: scale(0.5); }
    60% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes draw-line {
    0% { stroke-dasharray: 0, 200; }
    100% { stroke-dasharray: 200, 0; }
}

.float-animation { animation: float-animation 3s ease-in-out infinite; }
.fade-in-up { animation: fade-in-up 0.8s ease-out forwards; opacity: 0; }
.slide-in { animation: slide-in 0.6s ease-out forwards; opacity: 0; }
.bounce-in { animation: bounce-in 0.8s ease-out forwards; opacity: 0; }
.draw-line { animation: draw-line 2s ease-out forwards; stroke-dasharray: 0, 200; }
/* Enhanced Hero Animations for About Page */
@keyframes float-slow {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

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

@keyframes fade-in-up {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in {
    0% { opacity: 0; transform: translateX(-10px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes bounce-in {
    0% { opacity: 0; transform: scale(0); }
    60% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes search-result {
    0% { opacity: 0; transform: translateX(50px) scale(0.8); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes draw-connection {
    0% { stroke-dasharray: 0, 200; opacity: 0; }
    50% { opacity: 1; }
    100% { stroke-dasharray: 200, 0; opacity: 1; }
}

@keyframes draw-check {
    0% { stroke-dasharray: 0, 20; }
    100% { stroke-dasharray: 20, 0; }
}

@keyframes draw-smile {
    0% { stroke-dasharray: 0, 30; opacity: 0; }
    100% { stroke-dasharray: 30, 0; opacity: 1; }
}

@keyframes star-group {
    0% { opacity: 0; transform: translateY(-20px) rotate(-180deg); }
    100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}

/* Apply Animations */
.float-slow { animation: float-slow 4s ease-in-out infinite; }
.scale-in { animation: scale-in 0.6s ease-out forwards; opacity: 0; }
.fade-in-up { animation: fade-in-up 0.8s ease-out forwards; opacity: 0; }
.slide-in { animation: slide-in 0.5s ease-out forwards; opacity: 0; }
.bounce-in { animation: bounce-in 0.8s ease-out forwards; opacity: 0; }
.search-result { animation: search-result 0.8s ease-out forwards; opacity: 0; }
.draw-connection { animation: draw-connection 1.5s ease-out forwards; stroke-dasharray: 0, 200; }
.draw-check { animation: draw-check 0.5s ease-out forwards; stroke-dasharray: 0, 20; }
.draw-smile { animation: draw-smile 1s ease-out forwards; stroke-dasharray: 0, 30; opacity: 0; }
.star-group { animation: star-group 0.8s ease-out forwards; opacity: 0; }
.thumbs-up { animation: scale-in 0.6s ease-out forwards; opacity: 0; }


/* Enhanced Hero Animations with Finishing Touches */
@keyframes float-particle {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); opacity: 0.8; }
    33% { transform: translateY(-20px) rotate(120deg) scale(1.1); opacity: 1; }
    66% { transform: translateY(-10px) rotate(240deg) scale(0.9); opacity: 0.6; }
}

@keyframes slide-in-title {
    0% { transform: translateY(-30px) scale(0.8); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes scale-bounce {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

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

@keyframes blink-eyes {
    0%, 90%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

@keyframes draw-mouth {
    0% { stroke-dasharray: 0, 20; opacity: 0; }
    100% { stroke-dasharray: 20, 0; opacity: 1; }
}

@keyframes fade-in-up {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes screen-glow {
    0%, 100% { background: #E5E7EB; }
    50% { background: #DBEAFE; }
}

@keyframes thought-bubble {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes bubble-trail {
    0% { transform: scale(0) translateY(10px); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes slide-label {
    0% { transform: translateX(-40px) scale(0.8); opacity: 0; }
    100% { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes expand-search {
    0% { transform: scaleX(0.2); opacity: 0; }
    100% { transform: scaleX(1); opacity: 1; }
}

@keyframes typing-text {
    0% { opacity: 0; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes search-icon {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

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

@keyframes draw-connection {
    0% { stroke-dasharray: 0, 200; opacity: 0; }
    50% { opacity: 0.7; }
    100% { stroke-dasharray: 200, 0; opacity: 0.7; }
}

@keyframes result-slide {
    0% { transform: translateX(50px) scale(0.8); opacity: 0; }
    100% { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes rating-badge {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    70% { transform: scale(1.2) rotate(10deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes info-popup {
    0% { transform: scale(0) translateY(-15px); opacity: 0; }
    60% { transform: scale(1.15) translateY(-5px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

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

@keyframes twinkle-stars {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

@keyframes bounce-happy {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.3); opacity: 1; }
    75% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes happy-eyes {
    0%, 85%, 100% { transform: scaleY(1); }
    90% { transform: scaleY(0.1); }
}

@keyframes draw-big-smile {
    0% { stroke-dasharray: 0, 40; opacity: 0; }
    100% { stroke-dasharray: 40, 0; opacity: 1; }
}

@keyframes thumbs-up {
    0% { transform: scale(0) rotate(-45deg); opacity: 0; }
    70% { transform: scale(1.2) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes celebration-emoji {
    0% { transform: scale(0) translateY(20px) rotate(-180deg); opacity: 0; }
    50% { transform: scale(1.3) translateY(-10px) rotate(0deg); opacity: 1; }
    100% { transform: scale(1) translateY(0) rotate(0deg); opacity: 1; }
}

@keyframes draw-flow-arrow {
    0% { stroke-dasharray: 0, 100; opacity: 0; }
    50% { opacity: 0.8; }
    100% { stroke-dasharray: 100, 0; opacity: 0.8; }
}

/* Apply All Animations */
.float-particle { animation: float-particle 6s ease-in-out infinite; }
.slide-in-title { animation: slide-in-title 1s ease-out forwards; opacity: 0; }
.scale-bounce { animation: scale-bounce 1s ease-out forwards; opacity: 0; }
.scale-in { animation: scale-in 0.6s ease-out forwards; opacity: 0; }
.blink-eyes { animation: blink-eyes 4s ease-in-out infinite; }
.draw-mouth { animation: draw-mouth 0.8s ease-out forwards; stroke-dasharray: 0, 20; opacity: 0; }
.fade-in-up { animation: fade-in-up 0.8s ease-out forwards; opacity: 0; }
.screen-glow { animation: screen-glow 2s ease-in-out infinite; }
.thought-bubble { animation: thought-bubble 1s ease-out forwards; opacity: 0; }
.bubble-trail { animation: bubble-trail 0.6s ease-out forwards; opacity: 0; }
.slide-label { animation: slide-label 0.8s ease-out forwards; opacity: 0; }
.expand-search { animation: expand-search 1s ease-out forwards; opacity: 0; transform-origin: left center; }
.typing-text { animation: typing-text 2s ease-out forwards; opacity: 0; }
.search-icon { animation: search-icon 2s ease-in-out infinite; }
.search-button { animation: search-button 2s ease-in-out infinite; }
.draw-connection { animation: draw-connection 1.5s ease-out forwards; stroke-dasharray: 0, 200; }
.result-slide { animation: result-slide 0.8s ease-out forwards; opacity: 0; }
.rating-badge { animation: rating-badge 1s ease-out forwards; opacity: 0; }
.info-popup { animation: info-popup 0.8s ease-out forwards; opacity: 0; }
.pulse-rating { animation: pulse-rating 2s ease-in-out infinite; }
.twinkle-stars { animation: twinkle-stars 1.5s ease-in-out infinite; }
.bounce-happy { animation: bounce-happy 1.2s ease-out forwards; opacity: 0; }
.happy-eyes { animation: happy-eyes 3s ease-in-out infinite; }
.draw-big-smile { animation: draw-big-smile 1s ease-out forwards; stroke-dasharray: 0, 40; opacity: 0; }
.thumbs-up { animation: thumbs-up 1s ease-out forwards; opacity: 0; }
.celebration-emoji { animation: celebration-emoji 1s ease-out forwards; opacity: 0; }
.draw-flow-arrow { animation: draw-flow-arrow 1.2s ease-out forwards; stroke-dasharray: 0, 100; }
/* Timeline Specific Animations */
@keyframes draw-timeline {
    0% { stroke-dasharray: 0, 800; }
    100% { stroke-dasharray: 800, 0; }
}

@keyframes timeline-dot {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes slide-up {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes result-card {
    0% { transform: translateY(-20px) scale(0.8); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes draw-arrow {
    0% { stroke-dasharray: 0, 50; }
    100% { stroke-dasharray: 50, 0; }
}

@keyframes bounce-happy {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes draw-smile {
    0% { stroke-dasharray: 0, 30; }
    100% { stroke-dasharray: 30, 0; }
}

/* Apply Timeline Animations */
.draw-timeline { animation: draw-timeline 2s ease-out forwards; stroke-dasharray: 0, 800; }
.timeline-dot { animation: timeline-dot 0.8s ease-out forwards; opacity: 0; }
.slide-up { animation: slide-up 0.6s ease-out forwards; opacity: 0; }
.result-card { animation: result-card 0.8s ease-out forwards; opacity: 0; }
.draw-arrow { animation: draw-arrow 1s ease-out forwards; stroke-dasharray: 0, 50; }
.bounce-happy { animation: bounce-happy 1s ease-out forwards; opacity: 0; }
.draw-smile { animation: draw-smile 1s ease-out forwards; stroke-dasharray: 0, 30; }

/* Keep all previous animations */
.float-particle { animation: float-particle 6s ease-in-out infinite; }
.slide-in { animation: slide-in-title 1s ease-out forwards; opacity: 0; }
.bounce-in { animation: scale-bounce 1s ease-out forwards; opacity: 0; }
.scale-in { animation: scale-in 0.6s ease-out forwards; opacity: 0; }
.thought-bubble { animation: thought-bubble 1s ease-out forwards; opacity: 0; }
.expand-search { animation: expand-search 1s ease-out forwards; opacity: 0; transform-origin: left center; }
.celebration-emoji { animation: celebration-emoji 1s ease-out forwards; opacity: 0; }

/* Balanced Hero Animations */
@keyframes float-bg {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes draw-timeline {
    0% { stroke-dasharray: 0, 800; }
    100% { stroke-dasharray: 800, 0; }
}

@keyframes timeline-dot {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

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

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

@keyframes thought-popup {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes expand-in {
    0% { transform: scaleX(0.3); opacity: 0; }
    100% { transform: scaleX(1); opacity: 1; }
}

@keyframes card-appear {
    0% { transform: translateY(-15px) scale(0.9); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

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

@keyframes bounce-happy {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes draw-smile {
    0% { stroke-dasharray: 0, 20; }
    100% { stroke-dasharray: 20, 0; }
}

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

@keyframes draw-arrow {
    0% { stroke-dasharray: 0, 100; }
    100% { stroke-dasharray: 100, 0; }
}

/* Apply Animations */
.float-bg { animation: float-bg 4s ease-in-out infinite; }
.fade-in { animation: fade-in 0.8s ease-out forwards; opacity: 0; }
.draw-timeline { animation: draw-timeline 1.5s ease-out forwards; stroke-dasharray: 0, 800; }
.timeline-dot { animation: timeline-dot 0.5s ease-out forwards; opacity: 0; }
.scale-in { animation: scale-in 0.4s ease-out forwards; opacity: 0; }
.bounce-in { animation: bounce-in 0.6s ease-out forwards; opacity: 0; }
.thought-popup { animation: thought-popup 0.6s ease-out forwards; opacity: 0; }
.expand-in { animation: expand-in 0.6s ease-out forwards; opacity: 0; transform-origin: left center; }
.card-appear { animation: card-appear 0.5s ease-out forwards; opacity: 0; }
.slide-up { animation: slide-up 0.4s ease-out forwards; opacity: 0; }
.bounce-happy { animation: bounce-happy 0.8s ease-out forwards; opacity: 0; }
.draw-smile { animation: draw-smile 0.5s ease-out forwards; stroke-dasharray: 0, 20; }
.celebration { animation: celebration 0.6s ease-out forwards; opacity: 0; }
.draw-arrow { animation: draw-arrow 0.8s ease-out forwards; stroke-dasharray: 0, 100; }
/* ===== WEB DEVELOPMENT HERO ANIMATIONS ===== */

/* Expand loading animation */
@keyframes expand-loading {
    0% { width: 0; }
    100% { width: 75%; }
}

.expand-loading { 
    animation: expand-loading 2s ease-out forwards; 
}