/* ===== TITAN LOGISTIX ENHANCED LOADER STYLES ===== */

/* Enhanced Fade Out Animation */
@keyframes loader-fade-out {
    0% {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
        filter: blur(0px);
    }
    30% {
        transform: scale(1.02);
        filter: blur(0.5px);
    }
    70% {
        transform: scale(0.98);
        filter: blur(1px);
    }
    100% {
        opacity: 0;
        visibility: hidden;
        transform: scale(0.95);
        filter: blur(2px);
    }
}

#page-loader.fade-out {
    animation: loader-fade-out 1.2s ease-out forwards;
}

/* Additional Loader Animations */
@keyframes loaderBackgroundShift {
    0%, 100% { background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%); }
    50% { background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%); }
}

/* Enhanced Responsive Adjustments */
@media (max-width: 768px) {
    #page-loader .relative.z-10 {
        padding: 0 1rem;
    }

    /* Mobile large truck size */
    #page-loader .h-28 {
        height: 5rem !important;
    }

    #page-loader .w-40 {
        width: 8rem !important;
    }

    /* Mobile truck animation container */
    #page-loader .h-48 {
        height: 8rem !important;
    }

    /* Mobile loading bar */
    #page-loader .max-w-md {
        max-width: 20rem !important;
    }

    /* Ensure text fits properly on mobile */
    #page-loader h1 {
        word-break: break-word;
        hyphens: auto;
        max-width: 100%;
        padding: 0 0.5rem;
    }
}

@media (max-width: 640px) {
    /* Small screens - ensure text is readable */
    #page-loader .relative.z-10 {
        padding: 0 0.5rem;
    }

    /* Adjust truck for small screens */
    #page-loader .h-28 {
        height: 4rem !important;
    }

    #page-loader .w-40 {
        width: 6rem !important;
    }

    #page-loader .h-48 {
        height: 6rem !important;
    }

    /* Smaller loading bar */
    #page-loader .max-w-md {
        max-width: 18rem !important;
    }
}

@media (max-width: 480px) {
    /* Extra small screens */
    #page-loader .relative.z-10 {
        padding: 0 0.25rem;
    }

    /* Very small truck for tiny screens */
    #page-loader .h-28 {
        height: 3.5rem !important;
    }

    #page-loader .w-40 {
        width: 5rem !important;
    }

    #page-loader .h-48 {
        height: 5rem !important;
    }

    /* Compact loading bar */
    #page-loader .max-w-md {
        max-width: 16rem !important;
    }

    /* Ensure text doesn't overflow */
    #page-loader h1 {
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
        letter-spacing: 0.02em !important;
        margin: 0 auto;
        text-align: center;
        max-width: 95%;
    }

    /* Adjust glow text size */
    #page-loader .blur-lg {
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
        letter-spacing: 0.02em !important;
    }
}

@media (max-width: 360px) {
    /* Very small phones */
    #page-loader h1 {
        font-size: 1rem !important;
        line-height: 1.1 !important;
        letter-spacing: 0.01em !important;
    }

    #page-loader .blur-lg {
        font-size: 1rem !important;
        line-height: 1.1 !important;
        letter-spacing: 0.01em !important;
    }

    #page-loader .max-w-md {
        max-width: 14rem !important;
    }
}

/* Truck Convoy Animations */
.truck-convoy {
    position: absolute;
    bottom: 15%;
    left: 0;
    width: 100%;
    height: 60px;
    overflow: hidden;
}

.truck {
    position: absolute;
    width: 80px;
    height: 40px;
    animation: truck-drive 12s linear infinite;
}

.truck-1 { animation-delay: 0s; }
.truck-2 { animation-delay: 6s; }

@keyframes truck-drive {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 100px));
        opacity: 0;
    }
}

.truck-cab {
    position: absolute;
    left: 0;
    top: 8px;
    width: 25px;
    height: 24px;
    background: linear-gradient(45deg, #991b1b, #dc2626);
    border-radius: 4px 4px 2px 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.truck-trailer {
    position: absolute;
    left: 20px;
    top: 10px;
    width: 50px;
    height: 20px;
    background: linear-gradient(45deg, #dc2626, #ef4444);
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.truck-wheels {
    position: relative;
}

.wheel {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #374151;
    border-radius: 50%;
    bottom: 0;
    animation: wheel-spin 0.5s linear infinite;
}

.wheel-1 { left: 5px; }
.wheel-2 { left: 15px; }
.wheel-3 { left: 60px; }

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

/* Outer Ring Rotations */
@keyframes outer-ring-1 {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.02); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes outer-ring-2 {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(-180deg) scale(0.98); }
    100% { transform: rotate(-360deg) scale(1); }
}

@keyframes outer-ring-3 {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.05); }
    100% { transform: rotate(360deg) scale(1); }
}

.outer-ring-1 { animation: outer-ring-1 10s linear infinite; }
.outer-ring-2 { animation: outer-ring-2 8s linear infinite; }
.outer-ring-3 { animation: outer-ring-3 12s linear infinite; }

/* Logistics Frame Rotations */
@keyframes logistics-frame-1 {
    0% { transform: rotate(45deg) scale(1); }
    50% { transform: rotate(225deg) scale(1.03); }
    100% { transform: rotate(405deg) scale(1); }
}

@keyframes logistics-frame-2 {
    0% { transform: rotate(12deg) scale(1); }
    50% { transform: rotate(-168deg) scale(0.97); }
    100% { transform: rotate(-348deg) scale(1); }
}

.logistics-frame-1 { animation: logistics-frame-1 15s linear infinite; }
.logistics-frame-2 { animation: logistics-frame-2 12s linear infinite; }

/* Progress Animations */
@keyframes progress-main {
    0% {
        stroke-dashoffset: 596.9;
        filter: hue-rotate(0deg);
    }
    25% {
        filter: hue-rotate(15deg);
    }
    50% {
        filter: hue-rotate(30deg);
    }
    75% {
        filter: hue-rotate(15deg);
    }
    100% {
        stroke-dashoffset: 0;
        filter: hue-rotate(0deg);
    }
}

@keyframes progress-secondary {
    0% {
        stroke-dashoffset: 691.15;
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0.6;
    }
}

@keyframes route-indicator-1 {
    0% {
        stroke-dashoffset: 628.32;
        opacity: 0.3;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0.3;
    }
}

@keyframes route-indicator-2 {
    0% {
        stroke-dashoffset: 534.07;
        opacity: 0.3;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0.3;
    }
}

.progress-main { animation: progress-main 4s ease-in-out; }
.progress-secondary { animation: progress-secondary 4s ease-in-out 0.5s; }
.route-indicator-1 { animation: route-indicator-1 4s ease-in-out 1s; }
.route-indicator-2 { animation: route-indicator-2 4s ease-in-out 1.5s; }

/* Logo and Glow Animations */
@keyframes logistics-logo-pulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1.1) saturate(1);
    }
    50% {
        transform: scale(1.05);
        filter: brightness(1.3) saturate(1.2);
    }
}

@keyframes logo-glow-outer {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

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

@keyframes command-frame-pulse {
    0%, 100% {
        border-color: rgba(220, 38, 38, 0.6);
        box-shadow: 0 0 0 rgba(220, 38, 38, 0.3);
    }
    50% {
        border-color: rgba(220, 38, 38, 0.9);
        box-shadow: 0 0 20px rgba(220, 38, 38, 0.6);
    }
}

.logistics-logo { animation: logistics-logo-pulse 4s ease-in-out infinite; }
.logo-glow-outer { animation: logo-glow-outer 3s ease-in-out infinite; }
.logo-glow-inner { animation: logo-glow-inner 3s ease-in-out infinite 0.5s; }
.command-frame { animation: command-frame-pulse 3s ease-in-out infinite; }
.inner-frame { animation: command-frame-pulse 3s ease-in-out infinite 0.3s; }

/* Connection Points */
@keyframes connection-point-pulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
        box-shadow: 0 0 5px rgba(220, 38, 38, 0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
        box-shadow: 0 0 15px rgba(220, 38, 38, 0.8);
    }
}

.connection-point-1 { animation: connection-point-pulse 2s ease-in-out infinite 0s; }
.connection-point-2 { animation: connection-point-pulse 2s ease-in-out infinite 0.5s; }
.connection-point-3 { animation: connection-point-pulse 2s ease-in-out infinite 1s; }
.connection-point-4 { animation: connection-point-pulse 2s ease-in-out infinite 1.5s; }

/* Pulse Rings */
@keyframes pulse-ring-1 {
    0% {
        transform: scale(0.9);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

@keyframes pulse-ring-2 {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.pulse-ring-1 { animation: pulse-ring-1 2s ease-out infinite; }
.pulse-ring-2 { animation: pulse-ring-2 2s ease-out infinite 0.5s; }

/* Text Animations */
@keyframes logistics-title-glow {
    0%, 100% {
        text-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
        transform: scale(1);
    }
    50% {
        text-shadow: 0 0 30px rgba(0, 0, 0, 0.5), 0 0 40px rgba(220, 38, 38, 0.4);
        transform: scale(1.02);
    }
}

@keyframes logistics-subtitle-pulse {
    0%, 100% {
        opacity: 0.8;
        letter-spacing: 0.2em;
    }
    50% {
        opacity: 1;
        letter-spacing: 0.25em;
    }
}

.logistics-title { animation: logistics-title-glow 4s ease-in-out infinite; }
.logistics-subtitle { animation: logistics-subtitle-pulse 3s ease-in-out infinite; }

/* Status Indicators */
@keyframes status-indicator-pulse {
    0%, 80%, 100% {
        transform: scale(0.9);
        opacity: 0.7;
        box-shadow: 0 0 5px rgba(220, 38, 38, 0.3);
    }
    40% {
        transform: scale(1.3);
        opacity: 1;
        box-shadow: 0 0 15px rgba(220, 38, 38, 0.8);
    }
}

.status-1 { animation: status-indicator-pulse 1.8s ease-in-out infinite 0s; }
.status-2 { animation: status-indicator-pulse 1.8s ease-in-out infinite 0.6s; }
.status-3 { animation: status-indicator-pulse 1.8s ease-in-out infinite 1.2s; }

/* Progress Bar */
@keyframes progress-bar-fill {
    0% {
        width: 0%;
        box-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
    }
    25% {
        box-shadow: 0 0 15px rgba(249, 115, 22, 0.7);
    }
    50% {
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.8);
    }
    75% {
        box-shadow: 0 0 15px rgba(249, 115, 22, 0.7);
    }
    100% {
        width: 100%;
        box-shadow: 0 0 25px rgba(34, 197, 94, 1);
    }
}

@keyframes cargo-shine {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

.progress-bar { animation: progress-bar-fill 4s ease-out; }
.cargo-shine { animation: cargo-shine 2s ease-in-out infinite; }

/* Loading Messages */
@keyframes loading-message-fade {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
}

@keyframes sub-message-fade {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.9;
    }
}

.loading-message { animation: loading-message-fade 3s ease-in-out infinite; }
.sub-message { animation: sub-message-fade 3s ease-in-out infinite 0.5s; }

/* Corner Indicators */
@keyframes corner-indicator-glow {
    0%, 100% {
        border-color: rgba(220, 38, 38, 0.6);
        box-shadow: 0 0 0 rgba(220, 38, 38, 0.3);
    }
    50% {
        border-color: rgba(220, 38, 38, 0.9);
        box-shadow: 0 0 15px rgba(220, 38, 38, 0.6);
    }
}

@keyframes network-line-pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

.corner-indicator { animation: corner-indicator-glow 4s ease-in-out infinite; }
.network-line { animation: network-line-pulse 3s ease-in-out infinite; }

/* Fade Out Animation */
@keyframes loader-fade-out {
    0% {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
        filter: blur(0px);
    }
    50% {
        transform: scale(1.02);
        filter: blur(1px);
    }
    100% {
        opacity: 0;
        visibility: hidden;
        transform: scale(0.98);
        filter: blur(3px);
    }
}

#page-loader.fade-out {
    animation: loader-fade-out 1s ease-out forwards;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .outer-ring-1,
    .outer-ring-2,
    .outer-ring-3 {
        width: 200px !important;
        height: 200px !important;
    }

    .logistics-frame-1,
    .logistics-frame-2 {
        width: 160px !important;
        height: 160px !important;
    }

    .logistics-title {
        font-size: 2.5rem !important;
    }

    .logistics-subtitle {
        font-size: 1.2rem !important;
    }

    .progress-bar {
        width: 280px !important;
    }

    .truck {
        width: 60px !important;
        height: 30px !important;
    }

    .cargo-container {
        width: 12px !important;
        height: 8px !important;
    }
}