/* ==========================================================================
   Aman Freight Corporation — Route & Ship Animation Styles
   Light & Dark Theme Palette Support (Charcoal, Slate, Copper, Stone)
   Zero CLS, Hardware Accelerated, Fully Reversible
   ========================================================================== */

:root {
    --route: var(--copper, #A27B5C);
    --route-ahead: rgba(162, 123, 92, 0.35);
    --pkg-top: #C79B76;
    --pkg-side: #8C6544;
    --pkg-front: #A27B5C;
    --pkg-tape: #DCD7C9;
    --pkg-label: #F2EFE8;
    --pkg-stroke: #2C3639;
    --road-asphalt: #3F4E4F;
    --road-dash: #DCD7C9;
    --road-kerb: #2C3639;
    --truck-trailer: #DCD7C9;
    --truck-stripe: #A27B5C;
    --truck-cab: #C79B76;
    --truck-chassis: #2C3639;
    --truck-wheel: #2C3639;
    --truck-hub: #DCD7C9;
}

[data-theme="light"] {
    --pkg-stroke: #2C3639;
    --pkg-tape: #FAF8F5;
    --pkg-label: #FFFFFF;
    --road-asphalt: #3F4E4F;
    --road-dash: #DCD7C9;
    --road-kerb: #2C3639;
    --truck-trailer: #DCD7C9;
    --truck-cab: #6F4D33;
}

/* Overlay Canvas Container */
.route-ship-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none !important;
    z-index: 10;
    contain: layout style paint;
}

/* SVG Route Canvas */
.route-svg-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.route-path-ahead {
    fill: none;
    stroke: var(--route-ahead);
    stroke-width: 3px;
    stroke-dasharray: 4 10;
    stroke-linecap: round;
}

.route-path-travelled {
    fill: none;
    stroke: var(--route);
    stroke-width: 3.5px;
    stroke-dasharray: 4 10;
    stroke-linecap: round;
    transition: stroke 0.3s ease;
}

/* Section Marker Rings */
.section-marker {
    fill: transparent;
    stroke: var(--route);
    stroke-width: 2.5px;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), fill 0.3s ease;
    transform-origin: center;
}

.section-marker.stamped {
    fill: var(--route);
    transform: scale(1.25);
    filter: drop-shadow(0 0 6px rgba(162, 123, 92, 0.6));
}

.section-marker-ring {
    fill: none;
    stroke: var(--route);
    stroke-width: 1px;
    stroke-opacity: 0.4;
    transition: stroke-opacity 0.3s ease, transform 0.4s ease;
    transform-origin: center;
}

.section-marker.stamped + .section-marker-ring {
    stroke-opacity: 0.9;
    transform: scale(1.6);
}

/* Cardboard Package */
.route-package {
    position: fixed;
    top: 0;
    left: 0;
    width: 78px;
    height: 78px;
    margin-left: -39px;
    margin-top: -39px;
    pointer-events: none !important;
    z-index: 100;
    will-change: transform;
    transform-origin: center center;
    filter: drop-shadow(0 6px 12px rgba(44, 54, 57, 0.35));
    transition: filter 0.3s ease;
}

@media (min-width: 1440px) {
    .route-package {
        width: 84px;
        height: 84px;
        margin-left: -42px;
        margin-top: -42px;
    }
}

@media (max-width: 1279px) and (min-width: 768px) {
    .route-package {
        width: 52px;
        height: 52px;
        margin-left: -26px;
        margin-top: -26px;
    }
}

@media (max-width: 767px) {
    .route-package {
        width: 38px;
        height: 38px;
        margin-left: -19px;
        margin-top: -19px;
    }
}

/* Road & Truck Dock in Public Footer */
.footer-road-dock {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
}

/* Asphalt Road Strip */
.dock-road-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: var(--road-asphalt);
    border-top: 4px solid var(--road-kerb);
}

.dock-road-centerline {
    position: absolute;
    top: 28px;
    left: 0;
    width: 200%;
    height: 3px;
    background-image: repeating-linear-gradient(90deg, var(--road-dash) 0, var(--road-dash) 24px, transparent 24px, transparent 42px);
    will-change: transform;
}

/* Dock Platform & Ramp */
.dock-ramp {
    position: absolute;
    bottom: 60px;
    left: 20%;
    width: 45px;
    height: 14px;
    background: linear-gradient(135deg, var(--route) 0%, #8C6544 100%);
    clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
    opacity: 0.95;
}

/* Truck Unit */
.route-truck {
    position: absolute;
    bottom: 40px;
    left: 20%;
    width: 280px;
    height: 105px;
    will-change: transform;
    pointer-events: none;
}

@media (max-width: 767px) {
    .footer-road-dock {
        height: 95px;
    }
    .dock-road-strip {
        height: 48px;
    }
    .route-truck {
        width: 210px;
        height: 80px;
        bottom: 30px;
        left: 10%;
    }
}

/* Trailer Door */
.truck-trailer-door {
    transform-origin: top left;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.truck-trailer-door.closed {
    transform: rotate(0deg);
}

.truck-trailer-door.open {
    transform: rotate(-75deg);
}

/* Wheel rotation animation hook */
.truck-wheel {
    transform-origin: center center;
}

/* prefers-reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
    .route-ship-overlay {
        display: none !important;
    }
    .route-package {
        display: none !important;
    }
    .footer-road-dock {
        display: block !important;
    }
    .dock-road-centerline {
        animation: none !important;
    }
}

/* Hide on Print */
@media print {
    .route-ship-overlay,
    .footer-road-dock,
    .route-package {
        display: none !important;
    }
}