:root {
    --logi-ink: #ecf8ff;
    --logi-muted: #9cc6d9;
    --logi-soft: #c5e6f4;
    --logi-line: rgba(150, 228, 255, 0.24);
    --logi-panel: rgba(4, 20, 38, 0.58);
    --logi-panel-strong: rgba(4, 20, 38, 0.76);
    --logi-cyan: #7ee4ff;
    --logi-gold: #ffd24a;
    --logi-green: #9dffcf;
    --track-y: 66%;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 24px;
    overflow-x: hidden;
}

body.logistics-site {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body.logistics-site::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0, 184, 232, 0.08), transparent 30%, rgba(255, 210, 74, 0.05)),
        linear-gradient(180deg, rgba(2, 10, 23, 0.18), rgba(2, 10, 23, 0.76));
}

.logistics-site .logistics-hero {
    min-height: 100svh;
}

.logistics-site .landing::before {
    opacity: 0.8;
}

.logistics-site .title-main {
    font-size: clamp(48px, 7.2vw, 96px);
}

.logistics-site .title-dynamic {
    background: linear-gradient(90deg, #7ee4ff 0%, #ffffff 28%, #ffd24a 62%, #9dffcf 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.logistics-site .action-btn {
    min-height: 76px;
    background: rgba(4, 20, 38, 0.6);
}

.logistics-strip,
.logistics-section,
.logistics-footer {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

.logistics-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 0 0 62px;
}

.logistics-strip article {
    min-height: 116px;
    padding: 18px;
    border: 1px solid var(--logi-line);
    border-radius: 8px;
    background: var(--logi-panel);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
}

.logistics-strip strong,
.logistics-strip span {
    display: block;
}

.logistics-strip strong {
    margin-bottom: 10px;
    color: var(--logi-ink);
    font-size: 18px;
}

.logistics-strip span {
    color: var(--logi-muted);
    line-height: 1.38;
}

.logistics-section {
    padding: 72px 0;
}

.route-section {
    padding-top: 48px;
}

.section-head {
    display: grid;
    max-width: 760px;
    gap: 12px;
    margin-bottom: 26px;
}

.section-head p,
.route-copy p,
.contact-copy p {
    margin: 0;
    color: var(--logi-cyan);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.section-head h2,
.route-copy h2,
.contact-copy h2 {
    margin: 0;
    color: var(--logi-ink);
    font-size: clamp(34px, 4.5vw, 62px);
    line-height: 0.96;
    text-shadow: 0 16px 34px rgba(3, 7, 17, 0.62);
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.service-tile {
    display: grid;
    min-height: 440px;
    align-content: end;
    overflow: hidden;
    border: 1px solid var(--logi-line);
    border-radius: 8px;
    background: rgba(4, 20, 38, 0.62);
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.24);
}

.service-media {
    min-height: 236px;
    background-position: center;
    background-size: cover;
    filter: saturate(1.08) contrast(1.04);
}

.service-media--sea {
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0), rgba(4, 20, 38, 0.24)), url("../media/flux/international-freight.webp");
}

.service-media--port {
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0), rgba(4, 20, 38, 0.24)), url("../media/sliders/port.webp");
}

.service-media--auto {
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0), rgba(4, 20, 38, 0.24)), url("../media/sliders/fura.jpg");
}

.service-media--customs {
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0), rgba(4, 20, 38, 0.24)), url("../media/flux/customs-clearance.webp");
}

.service-media--terminal {
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0), rgba(4, 20, 38, 0.24)), url("../media/flux/main-services-1.webp");
}

.service-media--project {
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0), rgba(4, 20, 38, 0.24)), url("../media/flux/multimodal-freight.webp");
}

.service-tile div:last-child {
    display: grid;
    gap: 10px;
    padding: 20px;
}

.service-tile span,
.process-grid span {
    color: var(--logi-gold);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.service-tile h3,
.process-grid h3 {
    margin: 0;
    color: var(--logi-ink);
    font-size: 24px;
}

.service-tile p,
.process-grid p {
    margin: 0;
    color: var(--logi-muted);
    line-height: 1.45;
}

.route-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
}

.route-copy {
    display: grid;
    max-width: 1180px;
    gap: 12px;
}

.route-copy span,
.contact-copy span {
    color: var(--logi-soft);
    font-size: 19px;
    line-height: 1.44;
}

.route-copy h2 {
    max-width: 1180px;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1;
}

.route-copy span {
    max-width: 960px;
}

.route-board {
    position: relative;
    min-height: 660px;
    overflow: hidden;
    border: 1px solid var(--logi-line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(4, 20, 38, 0.86), rgba(4, 42, 62, 0.42)),
        url("../media/sliders/ship_which_better.webp") center / cover;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.route-board::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    background:
        linear-gradient(120deg, rgba(4, 20, 38, 0.94), rgba(4, 20, 38, 0.34) 46%, rgba(4, 20, 38, 0.88)),
        repeating-linear-gradient(90deg, transparent 0 52px, rgba(126, 228, 255, 0.12) 53px 54px, transparent 55px 116px);
}

.route-board::after {
    position: absolute;
    inset: 18px;
    z-index: 1;
    content: "";
    border: 1px solid rgba(126, 228, 255, 0.1);
    border-radius: 8px;
    pointer-events: none;
    background:
        radial-gradient(circle at 16% 70%, rgba(126, 228, 255, 0.12), transparent 16%),
        radial-gradient(circle at 91% 48%, rgba(157, 255, 207, 0.1), transparent 18%);
}

.route-scene--modern {
    position: absolute;
    inset: 16px 16px 12px;
    z-index: 2;
    --track-y: 25%;
    --row-quarry: 25%;
    --row-prep: 47%;
    --row-sea: 70%;
    --row-arrival: 92%;
    --row-final: 92%;
    --vehicle-scale: 0.98;
    --cargo-scale: 0.98;
    overflow: hidden;
    border: 1px solid rgba(126, 228, 255, 0.22);
    border-radius: 14px;
    background:
        radial-gradient(circle at 20% 30%, rgba(126, 228, 255, 0.1), transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(157, 255, 207, 0.07), transparent 32%),
        linear-gradient(180deg, rgba(6, 28, 46, 0.96), rgba(2, 10, 20, 0.98));
    box-shadow: inset 0 0 70px rgba(126, 228, 255, 0.05), 0 24px 60px rgba(0, 0, 0, 0.28);
}

.route-scene--extended:not(.is-route-running) *,
.route-scene--extended:not(.is-route-running)::before,
.route-scene--extended:not(.is-route-running)::after {
    animation-play-state: paused !important;
}

.modern-grid {
    position: absolute;
    inset: -20%;
    opacity: 0.28;
    background:
        linear-gradient(rgba(126, 228, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(126, 228, 255, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at 50% 52%, #000 46%, transparent 82%);
    animation: route-grid-drift 18s linear infinite;
}

.route-ambient,
.route-terrain,
.route-detail-layer,
.mod-quarry,
.mod-excavator,
.mod-factory,
.mod-bigbags,
.mod-port,
.mod-warehouse,
.mod-customs,
.mod-recipient {
    position: absolute;
    pointer-events: none;
}

.route-ambient {
    width: 36%;
    height: 44%;
    border-radius: 50%;
    filter: blur(24px);
    opacity: 0.36;
}

.route-ambient--left {
    left: -12%;
    top: 7%;
    background: rgba(126, 228, 255, 0.2);
}

.route-ambient--right {
    right: -10%;
    bottom: 10%;
    background: rgba(255, 210, 74, 0.16);
}

.route-terrain--origin,
.route-terrain--destination {
    bottom: 0;
    width: 54%;
    height: 26%;
    background:
        repeating-linear-gradient(96deg, transparent 0 34px, rgba(126, 228, 255, 0.1) 35px 36px),
        linear-gradient(180deg, rgba(15, 71, 82, 0.44), rgba(4, 19, 35, 0.82));
    clip-path: polygon(0 28%, 100% 4%, 100% 100%, 0 100%);
}

.route-terrain--quarry {
    left: 0;
    top: 6%;
    bottom: auto;
    width: 58%;
    height: 23%;
    border-top: 1px solid rgba(255, 210, 74, 0.15);
    background:
        repeating-linear-gradient(165deg, rgba(255, 210, 74, 0.14) 0 2px, transparent 3px 24px),
        linear-gradient(135deg, rgba(97, 73, 39, 0.54), rgba(4, 20, 35, 0.8));
    clip-path: polygon(0 30%, 22% 16%, 42% 29%, 58% 12%, 74% 27%, 100% 18%, 100% 100%, 0 100%);
}

.route-terrain--origin {
    bottom: 43%;
    left: 9%;
    width: 58%;
    height: 19%;
}

.route-terrain--destination {
    right: 0;
    bottom: 0;
    transform: scaleX(-1);
}

.route-terrain--sea {
    top: 46%;
    bottom: auto;
    left: 9%;
    width: 72%;
    height: 22%;
    border: 1px solid rgba(126, 228, 255, 0.14);
    border-radius: 48% 52% 0 0;
    background:
        repeating-linear-gradient(174deg, rgba(126, 228, 255, 0.2) 0 2px, transparent 3px 21px),
        linear-gradient(135deg, rgba(16, 130, 165, 0.46), rgba(4, 33, 54, 0.7));
    animation: sea-shimmer 9s linear infinite;
}

.route-detail-layer {
    inset: 0;
    z-index: 6;
}

.route-detail-layer span,
.route-detail-layer i {
    position: absolute;
    display: block;
    box-sizing: border-box;
}

.route-row-badge {
    display: none; /* removed: duplicated station labels and cluttered the scene */
    left: 18px;
    min-width: 92px;
    padding: 5px 8px;
    border: 1px solid rgba(126, 228, 255, 0.16);
    border-radius: 6px;
    color: rgba(236, 250, 255, 0.64);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    background: rgba(2, 12, 24, 0.46);
}

.route-row-badge--quarry { top: calc(var(--row-quarry) - 9px); }
.route-row-badge--prep { top: calc(var(--row-prep) - 9px); }
.route-row-badge--sea { top: calc(var(--row-sea) - 9px); }
.route-row-badge--arrival { top: calc(var(--row-arrival) - 9px); }
.route-row-badge--final { top: calc(var(--row-final) - 9px); }

.detail-road {
    height: 26px;
    border: 1px solid rgba(126, 228, 255, 0.1);
    border-radius: 99px;
    opacity: 0.24;
    background:
        linear-gradient(90deg, rgba(126, 228, 255, 0.08), rgba(255, 210, 74, 0.12), rgba(157, 255, 207, 0.08)),
        linear-gradient(180deg, rgba(7, 25, 39, 0.62), rgba(2, 12, 24, 0.76));
    box-shadow: inset 0 0 0 1px rgba(236, 250, 255, 0.04);
}

.detail-road--quarry {
    top: calc(var(--row-quarry) + 12px);
    left: 10%;
    width: 80%;
}

.detail-road--factory {
    top: calc(var(--row-prep) + 12px);
    left: 10%;
    width: 80%;
}

.detail-road--final {
    top: calc(var(--row-final) + 12px);
    left: 10%;
    width: 80%;
}

.detail-conveyor {
    top: calc(var(--row-prep) + 16px);
    left: 58%;
    width: 32%;
    height: 11px;
    opacity: 0;
    border: 1px solid rgba(236, 250, 255, 0.32);
    border-radius: 99px;
    background:
        linear-gradient(180deg, rgba(236, 250, 255, 0.38), rgba(236, 250, 255, 0.08) 42%, rgba(2, 11, 23, 0.86) 43% 100%),
        repeating-linear-gradient(90deg, rgba(126, 228, 255, 0.34) 0 3px, transparent 4px 14px),
        #061421;
    background-size: 40px 100%;
    box-shadow: 0 0 10px rgba(126, 228, 255, 0.12);
    transform: none;
    transition: opacity 0.34s ease, filter 0.34s ease;
    animation: conveyor-move 2.8s linear infinite;
    animation-play-state: paused;
}

.detail-scale {
    top: calc(var(--row-quarry) + 8px);
    left: 78%;
    width: 74px;
    height: 19px;
    opacity: 0;
    border: 1px solid rgba(157, 255, 207, 0.24);
    border-radius: 4px;
    background:
        linear-gradient(90deg, transparent 48%, rgba(157, 255, 207, 0.42) 49% 51%, transparent 52%),
        rgba(2, 12, 24, 0.72);
    transition: opacity 0.34s ease, filter 0.34s ease;
}

.detail-quarry-stakes {
    top: calc(var(--row-quarry) - 77px);
    left: 9%;
    width: 318px;
    height: 74px;
    pointer-events: none;
}

.detail-quarry-stakes i {
    bottom: 0;
    width: 3px;
    height: 32px;
    border-radius: 99px;
    background: rgba(236, 250, 255, 0.46);
    box-shadow: 0 0 0 1px rgba(4, 20, 38, 0.28);
}

.detail-quarry-stakes i::before,
.detail-quarry-stakes i::after,
.detail-rock-fractions i::before,
.detail-factory-gauges::before,
.detail-factory-gauges::after,
.detail-forklift::before,
.detail-forklift::after,
.detail-container-seal::before,
.detail-container-seal::after,
.detail-crane-spreader::before,
.detail-crane-spreader::after,
.detail-tugboat::before,
.detail-tugboat::after,
.detail-weighbridge::before,
.detail-weighbridge::after,
.detail-final-forklift::before,
.detail-final-forklift::after {
    position: absolute;
    content: "";
}

.detail-quarry-stakes i::before {
    top: 3px;
    left: 3px;
    width: 18px;
    height: 9px;
    background: linear-gradient(90deg, #ffd24a, #cb312e);
    clip-path: polygon(0 0, 100% 24%, 100% 78%, 0 100%);
}

.detail-quarry-stakes i::after {
    right: -4px;
    bottom: -7px;
    left: -4px;
    height: 2px;
    border-radius: 99px;
    background: rgba(255, 210, 74, 0.22);
}

.detail-quarry-stakes i:nth-child(1) { left: 3px; height: 27px; }
.detail-quarry-stakes i:nth-child(2) { left: 86px; bottom: 18px; height: 30px; }
.detail-quarry-stakes i:nth-child(3) { left: 184px; bottom: 8px; height: 34px; }
.detail-quarry-stakes i:nth-child(4) { right: 4px; bottom: 22px; height: 28px; }

.detail-rock-fractions {
    top: calc(var(--row-quarry) - 18px);
    left: 43%;
    width: 96px;
    height: 34px;
    pointer-events: none;
}

.detail-rock-fractions i {
    bottom: 3px;
    width: var(--rock-size, 9px);
    height: var(--rock-size, 9px);
    border: 1px solid rgba(255, 210, 74, 0.14);
    border-radius: 42% 58% 48% 52%;
    background: linear-gradient(135deg, rgba(134, 96, 50, 0.92), rgba(48, 59, 55, 0.88));
    transform: rotate(var(--rock-rot, 0deg));
}

.detail-rock-fractions i::before {
    inset: 2px 3px auto auto;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(236, 250, 255, 0.18);
}

.detail-rock-fractions i:nth-child(1) { left: 1px; --rock-size: 12px; --rock-rot: -9deg; }
.detail-rock-fractions i:nth-child(2) { left: 21px; bottom: 13px; --rock-size: 7px; --rock-rot: 12deg; }
.detail-rock-fractions i:nth-child(3) { left: 40px; --rock-size: 10px; --rock-rot: 28deg; }
.detail-rock-fractions i:nth-child(4) { left: 63px; bottom: 9px; --rock-size: 8px; --rock-rot: -18deg; }
.detail-rock-fractions i:nth-child(5) { right: 6px; --rock-size: 13px; --rock-rot: 15deg; }

.detail-bench-markers {
    top: calc(var(--row-quarry) - 42px);
    left: 19%;
    width: 270px;
    height: 55px;
    pointer-events: none;
}

.detail-bench-markers i {
    width: 72px;
    height: 1px;
    border-radius: 99px;
    background: rgba(255, 210, 74, 0.34);
    transform: rotate(var(--bench-rot, -7deg));
}

.detail-bench-markers i::before,
.detail-bench-markers i::after,
.detail-material-fall i,
.detail-haul-dust i,
.detail-processing-flow i,
.detail-bag-station::before,
.detail-bag-station::after,
.detail-bag-station i,
.detail-container-lashing i,
.detail-berth-fenders i,
.detail-radar::before,
.detail-radar::after,
.detail-inspection-light::before,
.detail-inspection-light::after,
.detail-dock-guides i {
    position: absolute;
    content: "";
}

.detail-bench-markers i::before {
    top: -3px;
    left: -5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(126, 228, 255, 0.58);
}

.detail-bench-markers i::after {
    right: -4px;
    top: -2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 210, 74, 0.5);
}

.detail-bench-markers i:nth-child(1) { left: 0; top: 9px; --bench-rot: -6deg; }
.detail-bench-markers i:nth-child(2) { left: 88px; top: 24px; --bench-rot: -4deg; }
.detail-bench-markers i:nth-child(3) { left: 178px; top: 39px; --bench-rot: -8deg; }

.route-scene--extended[data-stage="quarry"] .detail-bench-markers i {
    animation: bench-shock 3.1s ease-out both;
}

.route-scene--extended[data-stage="quarry"] .detail-bench-markers i:nth-child(2) {
    animation-delay: 0.05s;
}

.route-scene--extended[data-stage="quarry"] .detail-bench-markers i:nth-child(3) {
    animation-delay: 0.1s;
}

.detail-material-fall--bucket {
    top: calc(var(--row-quarry) - 91px);
    left: 58.9%;
    z-index: 24;
    width: 112px;
    height: 86px;
    pointer-events: none;
}

.detail-material-fall::before,
.detail-material-fall::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.detail-material-fall::before {
    top: 8px;
    left: 44px;
    width: 24px;
    height: 64px;
    border-radius: 52% 48% 44% 46%;
    background:
        radial-gradient(circle at 28% 15%, rgba(209, 143, 61, 0.94) 0 12%, transparent 13%),
        radial-gradient(circle at 68% 30%, rgba(76, 61, 42, 0.94) 0 10%, transparent 11%),
        radial-gradient(circle at 44% 52%, rgba(157, 103, 47, 0.94) 0 13%, transparent 14%),
        linear-gradient(180deg, rgba(187, 116, 44, 0.82), rgba(80, 62, 42, 0.58));
    clip-path: polygon(35% 0, 75% 2%, 93% 100%, 11% 100%);
    opacity: calc(var(--excavator-dump-fall, 0) * 0.78);
    transform: rotate(6deg) scaleY(calc(0.42 + var(--excavator-dump-fall, 0) * 0.62));
    transform-origin: 50% 0;
    animation: material-stream 0.5s linear infinite;
}

.detail-material-fall::after {
    right: 14px;
    bottom: 1px;
    width: 62px;
    height: 20px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 26% 52%, rgba(255, 210, 74, 0.2), transparent 18%),
        radial-gradient(circle at 58% 38%, rgba(236, 250, 255, 0.1), transparent 15%),
        rgba(91, 64, 36, 0.58);
    opacity: calc(var(--excavator-dump-fall, 0) * 0.66);
    filter: blur(0.4px);
    transform: scaleX(calc(0.52 + var(--excavator-dump-fall, 0) * 0.48));
    transform-origin: right center;
}

.detail-material-fall i {
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 45% 55% 48% 52%;
    background: linear-gradient(135deg, rgba(196, 130, 58, 0.96), rgba(58, 50, 36, 0.9));
    opacity: 0;
    animation: material-fall 0.84s linear infinite;
}

.detail-material-fall i:nth-child(1) { left: 46px; animation-delay: -0.28s; }
.detail-material-fall i:nth-child(2) { left: 58px; width: 6px; height: 6px; animation-delay: -0.62s; }
.detail-material-fall i:nth-child(3) { left: 40px; width: 10px; height: 7px; animation-delay: -0.08s; }

.detail-haul-dust {
    top: calc(var(--row-quarry) + 2px);
    left: 57%;
    width: 210px;
    height: 36px;
    pointer-events: none;
}

.detail-haul-dust i {
    bottom: 5px;
    width: 36px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 210, 74, 0.22), transparent 70%);
    animation: haul-dust 2.8s ease-in-out infinite;
}

.detail-haul-dust i:nth-child(1) { left: 4px; animation-delay: -1.2s; }
.detail-haul-dust i:nth-child(2) { left: 58px; width: 54px; animation-delay: -0.6s; }
.detail-haul-dust i:nth-child(3) { left: 128px; width: 64px; animation-delay: -1.9s; }

.detail-drill,
.detail-crusher,
.detail-quarry-stakes,
.detail-rock-fractions,
.detail-bench-markers,
.detail-material-fall,
.detail-haul-dust,
.detail-hopper,
.detail-dump-discharge,
.detail-silo,
.detail-factory-gauges,
.detail-processing-flow,
.detail-bag-station,
.detail-quality-panel,
.detail-forklift,
.detail-pallets,
.detail-container-gate,
.detail-container-locks,
.detail-container-seal,
.detail-mooring,
.detail-port-lights,
.detail-crane-spreader,
.detail-tugboat,
.detail-berth-fenders,
.detail-docs,
.detail-customs-camera,
.detail-weighbridge,
.detail-inspection-light,
.detail-loading-dock,
.detail-final-forklift,
.detail-dock-guides,
.detail-final-pallets {
    opacity: 0.16;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.26));
    transition: opacity 0.34s ease, filter 0.34s ease, transform 0.34s ease;
}

.route-scene--extended[data-stage="factory"] .detail-conveyor,
.route-scene--extended[data-stage="bigbags"] .detail-conveyor,
.route-scene--extended[data-stage="container"] .detail-conveyor,
.route-scene--extended.is-source-factory .detail-conveyor,
.route-scene--extended.active-stage-factory .detail-conveyor,
.route-scene--extended.active-stage-bigbags .detail-conveyor,
.route-scene--extended.active-stage-container .detail-conveyor {
    opacity: 0.7;
    animation-play-state: running;
}

.detail-material-fall,
.detail-haul-dust,
.detail-dump-discharge,
.detail-processing-flow,
.detail-bag-station,
.detail-forklift,
.detail-container-gate,
.detail-container-seal,
.detail-quality-panel,
.detail-scale,
.detail-mooring,
.detail-port-lights,
.detail-crane-spreader,
.detail-tugboat,
.detail-berth-fenders,
.detail-docs,
.detail-customs-booth,
.detail-barrier,
.detail-customs-camera,
.detail-weighbridge,
.detail-inspection-light,
.detail-receiver-ramp,
.detail-loading-dock,
.detail-final-forklift,
.detail-dock-guides,
.detail-final-pallets {
    opacity: 0.65;
}

.route-scene--extended[data-stage="quarry"] .detail-drill,
.route-scene--extended.active-stage-quarry .detail-drill,
.route-scene--extended[data-stage="quarry"] .detail-crusher,
.route-scene--extended.active-stage-quarry .detail-crusher,
.route-scene--extended[data-stage="quarry"] .detail-quarry-stakes,
.route-scene--extended.active-stage-quarry .detail-quarry-stakes,
.route-scene--extended[data-stage="quarry"] .detail-rock-fractions,
.route-scene--extended.active-stage-quarry .detail-rock-fractions,
.route-scene--extended[data-stage="quarry"] .detail-bench-markers,
.route-scene--extended.active-stage-quarry .detail-bench-markers,
.route-scene--extended[data-stage="excavator"] .detail-drill,
.route-scene--extended.active-stage-excavator .detail-drill,
.route-scene--extended[data-stage="excavator"] .detail-quarry-stakes,
.route-scene--extended.active-stage-excavator .detail-quarry-stakes,
.route-scene--extended[data-stage="excavator"] .detail-rock-fractions,
.route-scene--extended.active-stage-excavator .detail-rock-fractions,
.route-scene--extended[data-stage="excavator"] .detail-bench-markers,
.route-scene--extended.active-stage-excavator .detail-bench-markers,
.route-scene--extended[data-stage="excavator"] .detail-material-fall--bucket,
.route-scene--extended[data-stage="dump"] .detail-quarry-stakes,
.route-scene--extended.active-stage-dump .detail-quarry-stakes,
.route-scene--extended[data-stage="dump"] .detail-haul-dust,
.route-scene--extended.active-stage-dump .detail-haul-dust,
.route-scene--extended[data-stage="dump"] .detail-scale,
.route-scene--extended.active-stage-dump .detail-scale,
.route-scene--extended[data-stage="factory"] .detail-hopper,
.route-scene--extended.active-stage-factory .detail-hopper,
.route-scene--extended[data-stage="factory"] .detail-dump-discharge,
.route-scene--extended[data-stage="factory"] .detail-silo,
.route-scene--extended.active-stage-factory .detail-silo,
.route-scene--extended[data-stage="factory"] .detail-factory-gauges,
.route-scene--extended.active-stage-factory .detail-factory-gauges,
.route-scene--extended[data-stage="factory"] .detail-processing-flow,
.route-scene--extended.active-stage-factory .detail-processing-flow,
.route-scene--extended[data-stage="factory"] .detail-quality-panel,
.route-scene--extended.active-stage-factory .detail-quality-panel,
.route-scene--extended[data-stage="bigbags"] .detail-hopper,
.route-scene--extended.active-stage-bigbags .detail-hopper,
.route-scene--extended[data-stage="bigbags"] .detail-silo,
.route-scene--extended.active-stage-bigbags .detail-silo,
.route-scene--extended[data-stage="bigbags"] .detail-factory-gauges,
.route-scene--extended.active-stage-bigbags .detail-factory-gauges,
.route-scene--extended[data-stage="bigbags"] .detail-processing-flow,
.route-scene--extended.active-stage-bigbags .detail-processing-flow,
.route-scene--extended[data-stage="bigbags"] .detail-bag-station,
.route-scene--extended.active-stage-bigbags .detail-bag-station,
.route-scene--extended[data-stage="bigbags"] .detail-quality-panel,
.route-scene--extended.active-stage-bigbags .detail-quality-panel,
.route-scene--extended[data-stage="bigbags"] .detail-pallets--bags,
.route-scene--extended.active-stage-bigbags .detail-pallets--bags,
.route-scene--extended[data-stage="container"] .detail-pallets--bags,
.route-scene--extended.active-stage-container .detail-pallets--bags,
.route-scene--extended[data-stage="bigbags"] .detail-conveyor,
.route-scene--extended.active-stage-bigbags .detail-conveyor,
.route-scene--extended[data-stage="factory"] .detail-conveyor,
.route-scene--extended.active-stage-factory .detail-conveyor,
.route-scene--extended[data-stage="container"] .detail-container-gate,
.route-scene--extended.active-stage-container .detail-container-gate,
.route-scene--extended[data-stage="barge"] .detail-container-gate,
.route-scene--extended.active-stage-barge .detail-container-gate,
.route-scene--extended[data-stage="container"] .detail-container-locks,
.route-scene--extended.active-stage-container .detail-container-locks,
.route-scene--extended[data-stage="barge"] .detail-container-locks,
.route-scene--extended.active-stage-barge .detail-container-locks,
.route-scene--extended[data-stage="container"] .detail-container-seal,
.route-scene--extended.active-stage-container .detail-container-seal,
.route-scene--extended[data-stage="barge"] .detail-container-seal,
.route-scene--extended.active-stage-barge .detail-container-seal,
.route-scene--extended[data-stage="barge"] .detail-mooring--origin,
.route-scene--extended.active-stage-barge .detail-mooring--origin,
.route-scene--extended[data-stage="barge"] .detail-berth-fenders--origin,
.route-scene--extended.active-stage-barge .detail-berth-fenders--origin,
.route-scene--extended[data-stage="port"] .detail-mooring--origin,
.route-scene--extended.active-stage-port .detail-mooring--origin,
.route-scene--extended[data-stage="port"] .detail-port-lights--origin,
.route-scene--extended.active-stage-port .detail-port-lights--origin,
.route-scene--extended[data-stage="container"] .detail-crane-spreader--river,
.route-scene--extended.active-stage-container .detail-crane-spreader--river,
.route-scene--extended[data-stage="barge"] .detail-crane-spreader--river,
.route-scene--extended.active-stage-barge .detail-crane-spreader--river,
.route-scene--extended[data-stage="port"] .detail-crane-spreader--origin,
.route-scene--extended.active-stage-port .detail-crane-spreader--origin,
.route-scene--extended[data-stage="unload"] .detail-crane-spreader--destination,
.route-scene--extended.active-stage-unload .detail-crane-spreader--destination,
.route-scene--extended[data-stage="port"] .detail-berth-fenders--origin,
.route-scene--extended.active-stage-port .detail-berth-fenders--origin,
.route-scene--extended[data-stage="unload"] .detail-mooring--destination,
.route-scene--extended.active-stage-unload .detail-mooring--destination,
.route-scene--extended[data-stage="unload"] .detail-port-lights--destination,
.route-scene--extended.active-stage-unload .detail-port-lights--destination,
.route-scene--extended[data-stage="unload"] .detail-berth-fenders--destination,
.route-scene--extended.active-stage-unload .detail-berth-fenders--destination,
.route-scene--extended[data-stage="customs"] .detail-docs,
.route-scene--extended.active-stage-customs .detail-docs,
.route-scene--extended[data-stage="customs"] .detail-customs-booth,
.route-scene--extended.active-stage-customs .detail-customs-booth,
.route-scene--extended[data-stage="customs"] .detail-barrier,
.route-scene--extended.active-stage-customs .detail-barrier,
.route-scene--extended[data-stage="customs"] .detail-customs-camera,
.route-scene--extended.active-stage-customs .detail-customs-camera,
.route-scene--extended[data-stage="customs"] .detail-weighbridge,
.route-scene--extended.active-stage-customs .detail-weighbridge,
.route-scene--extended[data-stage="customs"] .detail-inspection-light,
.route-scene--extended.active-stage-customs .detail-inspection-light,
.route-scene--extended[data-stage="final"] .detail-receiver-ramp,
.route-scene--extended.active-stage-final .detail-receiver-ramp,
.route-scene--extended[data-stage="receiver"] .detail-receiver-ramp,
.route-scene--extended.active-stage-receiver .detail-receiver-ramp,
.route-scene--extended[data-stage="final"] .detail-loading-dock,
.route-scene--extended.active-stage-final .detail-loading-dock,
.route-scene--extended[data-stage="receiver"] .detail-loading-dock,
.route-scene--extended.active-stage-receiver .detail-loading-dock,
.route-scene--extended[data-stage="final"] .detail-final-forklift,
.route-scene--extended.active-stage-final .detail-final-forklift,
.route-scene--extended[data-stage="receiver"] .detail-final-forklift,
.route-scene--extended.active-stage-receiver .detail-final-forklift,
.route-scene--extended[data-stage="final"] .detail-dock-guides,
.route-scene--extended.active-stage-final .detail-dock-guides,
.route-scene--extended[data-stage="receiver"] .detail-dock-guides,
.route-scene--extended.active-stage-receiver .detail-dock-guides,
.route-scene--extended[data-stage="final"] .detail-final-pallets,
.route-scene--extended.active-stage-final .detail-final-pallets,
.route-scene--extended[data-stage="receiver"] .detail-final-pallets,
.route-scene--extended.active-stage-receiver .detail-final-pallets {
    opacity: 0.94;
    filter: drop-shadow(0 0 12px rgba(255, 210, 74, 0.22));
}

.route-scene--extended.is-source-quarry .detail-drill,
.route-scene--extended.is-source-quarry .detail-crusher,
.route-scene--extended.is-source-quarry .detail-quarry-stakes,
.route-scene--extended.is-source-quarry .detail-rock-fractions,
.route-scene--extended.is-source-quarry .detail-bench-markers,
.route-scene--extended.is-source-excavator .detail-drill,
.route-scene--extended.is-source-excavator .detail-quarry-stakes,
.route-scene--extended.is-source-excavator .detail-rock-fractions,
.route-scene--extended.is-source-excavator .detail-bench-markers,
.route-scene--extended.is-source-dump .detail-quarry-stakes,
.route-scene--extended.is-source-dump .detail-haul-dust,
.route-scene--extended.is-source-dump .detail-scale,
.route-scene--extended.is-source-factory .detail-hopper,
.route-scene--extended.is-source-factory .detail-dump-discharge,
.route-scene--extended.is-source-factory .detail-silo,
.route-scene--extended.is-source-factory .detail-factory-gauges,
.route-scene--extended.is-source-factory .detail-processing-flow,
.route-scene--extended.is-source-factory .detail-quality-panel {
    opacity: 0.94;
    filter: drop-shadow(0 0 12px rgba(255, 210, 74, 0.22));
}

.route-scene--extended[data-stage="excavator"] .detail-material-fall--bucket,
.route-scene--extended.active-stage-excavator .detail-material-fall--bucket,
.route-scene--extended.is-source-excavator .detail-material-fall--bucket {
    opacity: var(--excavator-dump-fall, 0);
}

.route-scene--extended.is-source-factory .detail-dump-discharge,
.route-scene--extended.active-stage-factory .detail-dump-discharge {
    opacity: var(--factory-dump-discharge, 0);
}

.route-scene--extended[data-stage="container"] .detail-yard--origin,
.route-scene--extended[data-stage="barge"] .detail-yard--origin,
.route-scene--extended[data-stage="port"] .detail-yard--origin,
.route-scene--extended[data-stage="sea"] .detail-yard--origin,
.route-scene--extended.active-stage-container .detail-yard--origin,
.route-scene--extended.active-stage-barge .detail-yard--origin,
.route-scene--extended.active-stage-port .detail-yard--origin,
.route-scene--extended.active-stage-sea .detail-yard--origin,
.route-scene--extended[data-stage="unload"] .detail-yard--destination,
.route-scene--extended[data-stage="customs"] .detail-yard--destination,
.route-scene--extended[data-stage="final"] .detail-yard--destination,
.route-scene--extended.active-stage-unload .detail-yard--destination,
.route-scene--extended.active-stage-customs .detail-yard--destination,
.route-scene--extended.active-stage-final .detail-yard--destination {
    opacity: 0.68;
}

.route-scene--extended[data-stage="quarry"] .detail-tire-tracks--quarry,
.route-scene--extended[data-stage="excavator"] .detail-tire-tracks--quarry,
.route-scene--extended[data-stage="dump"] .detail-tire-tracks--quarry,
.route-scene--extended.is-source-quarry .detail-tire-tracks--quarry,
.route-scene--extended.is-source-excavator .detail-tire-tracks--quarry,
.route-scene--extended.is-source-dump .detail-tire-tracks--quarry,
.route-scene--extended.active-stage-quarry .detail-tire-tracks--quarry,
.route-scene--extended.active-stage-excavator .detail-tire-tracks--quarry,
.route-scene--extended.active-stage-dump .detail-tire-tracks--quarry,
.route-scene--extended[data-stage="final"] .detail-tire-tracks--final,
.route-scene--extended[data-stage="receiver"] .detail-tire-tracks--final,
.route-scene--extended.active-stage-final .detail-tire-tracks--final,
.route-scene--extended.active-stage-receiver .detail-tire-tracks--final {
    opacity: 0.56;
}

.detail-tire-tracks {
    height: 18px;
    opacity: 0.2;
    pointer-events: none;
}

.detail-tire-tracks--quarry {
    top: calc(var(--row-quarry) + 26px);
    left: 44%;
    width: 230px;
}

.detail-tire-tracks--final {
    top: calc(var(--row-final) + 27px);
    left: 68%;
    width: 220px;
}

.detail-tire-tracks i {
    top: 0;
    width: 24px;
    height: 5px;
    border-radius: 99px;
    background: rgba(236, 250, 255, 0.12);
    box-shadow: 0 10px 0 rgba(236, 250, 255, 0.1);
    transform: skewX(-14deg);
}

.detail-tire-tracks i:nth-child(1) { left: 0; }
.detail-tire-tracks i:nth-child(2) { left: 58px; }
.detail-tire-tracks i:nth-child(3) { left: 116px; }
.detail-tire-tracks i:nth-child(4) { left: 174px; }

.detail-loader {
    top: calc(var(--row-quarry) - 33px);
    left: 14%;
    width: 68px;
    height: 36px;
}

.detail-loader::before,
.detail-loader::after,
.loader-bucket::before,
.detail-hopper::before,
.detail-hopper::after,
.detail-silo::before,
.detail-silo::after,
.detail-container-locks::before,
.detail-port-lights::before,
.detail-port-lights::after,
.detail-customs-camera::before,
.detail-loading-dock::before,
.detail-loading-dock::after {
    position: absolute;
    content: "";
}

.detail-loader::before {
    left: 14px;
    bottom: 10px;
    width: 36px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 7px 8px 3px 3px;
    background: linear-gradient(135deg, #ffd24a, #9b7427);
}

.detail-loader::after {
    left: 42px;
    bottom: 18px;
    width: 22px;
    height: 5px;
    border-radius: 99px;
    background: linear-gradient(90deg, #ffd24a, #e3aa26);
    transform: rotate(-12deg);
}

.loader-bucket {
    right: 0;
    bottom: 12px;
    width: 19px;
    height: 12px;
    border-radius: 2px 2px 8px 8px;
    background: linear-gradient(180deg, #7e8990, #394750);
    clip-path: polygon(0 0, 100% 20%, 84% 100%, 12% 100%);
}

.loader-wheel {
    bottom: 4px;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(126, 228, 255, 0.42);
    border-radius: 50%;
    background: #061421;
}

.loader-wheel--a { left: 18px; }
.loader-wheel--b { left: 43px; }

.detail-drill {
    top: calc(var(--row-quarry) - 58px);
    left: 35%;
    width: 40px;
    height: 46px;
    border: 1px solid rgba(255, 210, 74, 0.3);
    border-radius: 5px;
    background:
        linear-gradient(90deg, transparent 42%, rgba(4, 20, 38, 0.34) 43% 57%, transparent 58%),
        linear-gradient(180deg, #ffd24a, #85672c);
    transform: skewX(-7deg);
}

.detail-drill::before,
.detail-drill::after,
.detail-crusher::before,
.detail-crusher::after,
.detail-pallets::before,
.detail-container-gate::before,
.detail-container-gate::after,
.detail-mooring::before,
.detail-mooring::after,
.detail-docs::before,
.detail-docs::after,
.detail-final-pallets::before {
    position: absolute;
    content: "";
}

.detail-drill::before {
    left: 17px;
    bottom: -22px;
    width: 5px;
    height: 29px;
    border-radius: 99px;
    background: repeating-linear-gradient(180deg, #e9f8ff 0 4px, #7c8790 5px 8px);
}

.detail-drill::after {
    right: 7px;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: rgba(126, 228, 255, 0.54);
    box-shadow: -14px 11px 0 rgba(4, 20, 38, 0.22);
}

.detail-drill i {
    left: 8px;
    bottom: 4px;
    width: 24px;
    height: 5px;
    border-radius: 99px;
    background: rgba(4, 20, 38, 0.54);
}

.detail-crusher {
    top: calc(var(--row-quarry) - 26px);
    left: 24%;
    width: 70px;
    height: 36px;
    border: 1px solid rgba(236, 250, 255, 0.22);
    border-radius: 4px;
    background:
        linear-gradient(90deg, transparent 30%, rgba(126, 228, 255, 0.22) 31% 34%, transparent 35%),
        linear-gradient(180deg, rgba(91, 116, 119, 0.84), rgba(33, 45, 48, 0.9));
}

.detail-crusher::before {
    left: -14px;
    top: 8px;
    width: 20px;
    height: 12px;
    background: linear-gradient(135deg, #8a643a, #39423d);
    clip-path: polygon(0 100%, 100% 38%, 100% 100%);
}

.detail-crusher::after {
    right: -20px;
    top: 15px;
    width: 28px;
    height: 4px;
    border-radius: 99px;
    background: repeating-linear-gradient(90deg, #ffd24a 0 5px, #7ee4ff 6px 10px);
}

.detail-crusher i {
    top: 8px;
    width: 9px;
    height: 9px;
    border: 2px solid rgba(4, 20, 38, 0.54);
    border-radius: 50%;
    background: rgba(236, 250, 255, 0.36);
}

.detail-crusher i:first-child { left: 19px; }
.detail-crusher i:last-child { left: 39px; }

.detail-hopper {
    top: calc(var(--row-prep) - 77px);
    left: 76%;
    width: 52px;
    height: 48px;
    border: 1px solid rgba(255, 210, 74, 0.28);
    border-radius: 4px 4px 10px 10px;
    background:
        linear-gradient(90deg, transparent 46%, rgba(4, 20, 38, 0.3) 47% 53%, transparent 54%),
        linear-gradient(180deg, rgba(236, 250, 255, 0.5), rgba(106, 129, 130, 0.82));
    clip-path: polygon(0 0, 100% 0, 72% 100%, 28% 100%);
}

.detail-hopper::before {
    left: 18px;
    bottom: -16px;
    width: 16px;
    height: 18px;
    border-radius: 0 0 4px 4px;
    background: rgba(255, 210, 74, 0.58);
}

.detail-hopper::after {
    left: 6px;
    top: 8px;
    width: 40px;
    height: 3px;
    border-radius: 99px;
    background: rgba(4, 20, 38, 0.24);
    box-shadow:
        0 11px 0 rgba(4, 20, 38, 0.18),
        0 22px 0 rgba(4, 20, 38, 0.14);
}

.detail-hopper i {
    left: 12px;
    bottom: -22px;
    width: 28px;
    height: 5px;
    border-radius: 99px;
    background: repeating-linear-gradient(90deg, #ffd24a 0 6px, #7ee4ff 7px 12px);
}

.detail-dump-discharge {
    top: calc(var(--row-quarry) - 79px);
    bottom: calc(100% - var(--row-prep) + 78px);
    height: auto;
    left: 76%;
    z-index: 23;
    width: 132px;
    pointer-events: none;
    opacity: var(--factory-dump-discharge, 0);
    transform: translate3d(-42px, 0, 0);
    filter: drop-shadow(0 9px 14px rgba(0, 0, 0, 0.35));
}

.detail-dump-discharge::before {
    position: absolute;
    top: 24px;
    bottom: 12px;
    height: auto;
    left: 58px;
    width: 20px;
    content: "";
    border-radius: 48% 52% 44% 46%;
    background:
        radial-gradient(circle at 22% 16%, rgba(206, 142, 63, 0.96) 0 9%, transparent 10%),
        radial-gradient(circle at 70% 25%, rgba(88, 69, 45, 0.94) 0 8%, transparent 9%),
        radial-gradient(circle at 42% 39%, rgba(156, 101, 48, 0.98) 0 11%, transparent 12%),
        radial-gradient(circle at 76% 55%, rgba(227, 165, 73, 0.92) 0 8%, transparent 9%),
        radial-gradient(circle at 30% 70%, rgba(80, 66, 45, 0.94) 0 10%, transparent 11%),
        linear-gradient(180deg, rgba(190, 119, 48, 0.86), rgba(83, 66, 42, 0.74));
    opacity: calc(var(--factory-dump-discharge, 0) * 0.84);
    clip-path: polygon(38% 0, 76% 4%, 92% 100%, 9% 100%);
    transform: rotate(-7deg) scaleY(calc(0.34 + var(--factory-dump-discharge, 0) * 0.7));
    transform-origin: 50% 0;
    animation: factory-dump-stream 0.46s linear infinite;
}

.detail-dump-discharge::after {
    position: absolute;
    right: 38px;
    bottom: 8px;
    width: 62px;
    height: 21px;
    content: "";
    border-radius: 50% 50% 12px 12px;
    background:
        radial-gradient(circle at 18% 58%, rgba(255, 210, 74, 0.26), transparent 16%),
        radial-gradient(circle at 46% 38%, rgba(236, 250, 255, 0.12), transparent 14%),
        radial-gradient(circle at 78% 54%, rgba(255, 210, 74, 0.2), transparent 15%),
        linear-gradient(140deg, rgba(112, 72, 35, 0.96), rgba(49, 47, 39, 0.94));
    opacity: calc(var(--factory-dump-discharge, 0) * 0.72);
    transform: scaleX(calc(0.46 + var(--factory-dump-discharge, 0) * 0.54));
    transform-origin: right center;
    animation: factory-dump-pile 1.2s ease-in-out infinite;
}

.detail-dump-discharge i {
    position: absolute;
    top: 26px;
    left: 64px;
    width: 8px;
    height: 8px;
    border-radius: 45% 55% 48% 52%;
    background: linear-gradient(135deg, #b8843a, #40372c);
    opacity: calc(var(--factory-dump-discharge, 0) * 0.9);
    animation: factory-dump-rock 0.9s linear infinite;
}

.detail-dump-discharge i:nth-child(2) {
    left: 70px;
    width: 6px;
    height: 6px;
    animation-delay: -0.22s;
}

.detail-dump-discharge i:nth-child(3) {
    left: 56px;
    width: 10px;
    height: 7px;
    animation-delay: -0.45s;
}

.detail-dump-discharge i:nth-child(4) {
    left: 75px;
    width: 5px;
    height: 5px;
    animation-delay: -0.66s;
}

.detail-silo {
    top: calc(var(--row-prep) - 78px);
    left: 84%;
    width: 58px;
    height: 72px;
}

.detail-silo::before {
    left: 8px;
    bottom: 0;
    width: 30px;
    height: 62px;
    border: 1px solid rgba(236, 250, 255, 0.4);
    border-radius: 14px 14px 4px 4px;
    background:
        linear-gradient(90deg, transparent 46%, rgba(4, 20, 38, 0.24) 47% 54%, transparent 55%),
        linear-gradient(180deg, rgba(236, 250, 255, 0.78), rgba(91, 120, 132, 0.9));
}

.detail-silo::after {
    left: 2px;
    bottom: -2px;
    width: 44px;
    height: 6px;
    border-radius: 99px;
    background: rgba(126, 228, 255, 0.2);
}

.detail-silo i {
    top: 15px;
    width: 6px;
    height: 48px;
    border-radius: 99px;
    background: rgba(236, 250, 255, 0.4);
}

.detail-silo i:first-child { left: 0; }
.detail-silo i:last-child { right: 8px; }

.detail-quality-panel {
    top: calc(var(--row-prep) - 58px);
    left: 69%;
    width: 58px;
    height: 42px;
    border: 1px solid rgba(126, 228, 255, 0.28);
    border-radius: 5px;
    background:
        linear-gradient(90deg, rgba(157, 255, 207, 0.18) 0 4px, transparent 5px),
        rgba(2, 12, 24, 0.62);
}

.detail-quality-panel::before,
.detail-quality-panel::after {
    position: absolute;
    content: "";
}

.detail-quality-panel::before {
    top: 8px;
    left: 11px;
    width: 30px;
    height: 2px;
    border-radius: 99px;
    background: rgba(236, 250, 255, 0.46);
    box-shadow:
        0 8px 0 rgba(236, 250, 255, 0.28),
        0 16px 0 rgba(236, 250, 255, 0.2);
}

.detail-quality-panel::after {
    right: 7px;
    bottom: 7px;
    width: 9px;
    height: 9px;
    border: 2px solid rgba(157, 255, 207, 0.58);
    border-radius: 50%;
}

.detail-quality-panel i {
    bottom: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--qc-color, #9dffcf);
    box-shadow: 0 0 8px var(--qc-color, #9dffcf);
    animation: qc-blink 1.8s infinite ease-in-out;
}

.detail-quality-panel i:nth-child(1) { left: 11px; --qc-color: #9dffcf; animation-delay: 0s; }
.detail-quality-panel i:nth-child(2) { left: 21px; --qc-color: #ffd24a; animation-delay: -0.6s; }
.detail-quality-panel i:nth-child(3) { left: 31px; --qc-color: #7ee4ff; animation-delay: -1.2s; }

@keyframes qc-blink {
    0%, 100% {
        opacity: 0.28;
        box-shadow: 0 0 1px var(--qc-color, #9dffcf);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 10px var(--qc-color, #9dffcf), 0 0 4px var(--qc-color, #9dffcf);
    }
}

.detail-factory-gauges {
    top: calc(var(--row-prep) - 33px);
    left: 79%;
    width: 54px;
    height: 32px;
    border: 1px solid rgba(126, 228, 255, 0.18);
    border-radius: 5px;
    background: rgba(2, 12, 24, 0.64);
}

.detail-factory-gauges::before {
    right: 5px;
    bottom: 6px;
    left: 5px;
    height: 2px;
    border-radius: 99px;
    background: rgba(236, 250, 255, 0.24);
    box-shadow: 0 -8px 0 rgba(236, 250, 255, 0.18);
}

.detail-factory-gauges::after {
    right: 7px;
    top: 6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #9dffcf;
    box-shadow:
        -10px 0 0 #ffd24a,
        -20px 0 0 #7ee4ff;
    animation: gauge-blink 2.8s ease-in-out infinite;
}

.detail-factory-gauges i {
    bottom: 8px;
    width: 7px;
    border-radius: 99px 99px 2px 2px;
    background: linear-gradient(180deg, rgba(126, 228, 255, 0.78), rgba(255, 210, 74, 0.74));
}

.detail-factory-gauges i:nth-child(1) { left: 8px; height: 9px; }
.detail-factory-gauges i:nth-child(2) { left: 22px; height: 15px; }
.detail-factory-gauges i:nth-child(3) { left: 36px; height: 12px; }

.detail-processing-flow {
    top: calc(var(--row-prep) - 18px);
    left: 70%;
    width: 142px;
    height: 24px;
    pointer-events: none;
}

.detail-processing-flow::before {
    position: absolute;
    right: 0;
    left: 0;
    top: 11px;
    height: 3px;
    content: "";
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(255, 210, 74, 0.1), rgba(255, 210, 74, 0.48), rgba(126, 228, 255, 0.1));
}

.detail-processing-flow i {
    top: 7px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffd24a 0 36%, rgba(255, 210, 74, 0.12) 68%);
    animation: process-pellet 2.4s linear infinite;
}

.detail-processing-flow i:nth-child(1) { left: 0; animation-delay: -0.1s; }
.detail-processing-flow i:nth-child(2) { left: 0; animation-delay: -0.9s; }
.detail-processing-flow i:nth-child(3) { left: 0; animation-delay: -1.7s; }

.detail-bag-station {
    top: calc(var(--row-prep) - 17px);
    left: 43.5%;
    width: 108px;
    height: 58px;
}

.detail-bag-station::before {
    left: 18px;
    top: 0;
    width: 70px;
    height: 7px;
    border-radius: 99px;
    background: rgba(236, 250, 255, 0.5);
    box-shadow: 0 15px 0 rgba(236, 250, 255, 0.28);
}

.detail-bag-station::after {
    top: 6px;
    left: 51px;
    width: 6px;
    height: 40px;
    border-radius: 99px;
    background: linear-gradient(180deg, rgba(255, 210, 74, 0.9), rgba(255, 210, 74, 0.06));
    animation: bag-fill-stream 1.8s ease-in-out infinite;
}

.detail-bag-station i {
    bottom: 0;
    width: 16px;
    height: 11px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 3px;
    background: linear-gradient(180deg, #f3f2dc, #d7c991);
}

.detail-bag-station i:first-child { left: 18px; }
.detail-bag-station i:last-child { right: 18px; }

.detail-forklift,
.detail-final-forklift {
    width: 58px;
    height: 34px;
}

.detail-forklift--bags {
    top: calc(var(--row-prep) - 6px);
    left: 58%;
}

.detail-final-forklift {
    top: calc(var(--row-arrival) - 4px);
    left: -10%;
}

.detail-forklift::before,
.detail-final-forklift::before {
    left: 15px;
    bottom: 9px;
    width: 27px;
    height: 17px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 5px 7px 3px 3px;
    background: linear-gradient(135deg, #ffd24a, #b98121);
}

.detail-forklift::after,
.detail-final-forklift::after {
    left: 30px;
    bottom: 21px;
    width: 15px;
    height: 9px;
    border-radius: 4px 4px 1px 1px;
    background: linear-gradient(135deg, #effcff, #58c4e4);
}

.forklift-mast {
    left: 7px;
    bottom: 6px;
    width: 4px;
    height: 30px;
    border-radius: 99px;
    background: rgba(236, 250, 255, 0.7);
}

.forklift-fork {
    left: 0;
    bottom: 5px;
    width: 21px;
    height: 5px;
    border-bottom: 2px solid rgba(236, 250, 255, 0.74);
    border-left: 2px solid rgba(236, 250, 255, 0.74);
}

.forklift-wheel {
    bottom: 3px;
    width: 9px;
    height: 9px;
    border: 2px solid rgba(126, 228, 255, 0.42);
    border-radius: 50%;
    background: conic-gradient(from 0deg, #020a14 0 90deg, #11283c 90deg 180deg, #020a14 180deg 270deg, #11283c 270deg 360deg);
    transform: rotate(var(--forklift-wheel-turn, 0deg));
}

.forklift-wheel--a { left: 17px; }
.forklift-wheel--b { right: 11px; }

.detail-pallets--bags {
    top: calc(var(--row-prep) + 22px);
    left: 45%;
    width: 92px;
    height: 24px;
}

.detail-pallets::before {
    right: 0;
    bottom: 0;
    left: 0;
    height: 6px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, #80613a 0 14px, #50371f 15px 21px);
}

.detail-pallets i {
    bottom: 6px;
    width: 22px;
    height: 17px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 6px 6px 4px 4px;
    background: linear-gradient(180deg, #f3f2dc, #d7c991);
}

.detail-pallets i:nth-child(1) { left: 4px; }
.detail-pallets i:nth-child(2) { left: 34px; }
.detail-pallets i:nth-child(3) { left: 64px; }

.detail-container-gate {
    top: calc(var(--row-prep) - 18px);
    left: 13%;
    width: 86px;
    height: 50px;
    border: 2px solid rgba(126, 228, 255, 0.28);
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
}

.detail-container-gate::before {
    left: 10px;
    right: 10px;
    bottom: 8px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 3px;
    background:
        repeating-linear-gradient(90deg, rgba(4, 20, 38, 0.28) 0 1px, transparent 1px 8px),
        linear-gradient(90deg, #ffd24a, #7ee4ff);
}

.detail-container-gate::after {
    top: 7px;
    left: 50%;
    width: 2px;
    height: 28px;
    background: rgba(126, 228, 255, 0.44);
}

.detail-container-gate i {
    top: -8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffd24a;
    box-shadow: 0 0 10px rgba(255, 210, 74, 0.42);
}

.detail-container-gate i:first-child { left: 16px; }
.detail-container-gate i:last-child { right: 16px; }

.detail-container-locks {
    top: calc(var(--row-prep) + 24px);
    left: 16%;
    width: 64px;
    height: 18px;
}

.detail-container-locks::before {
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 99px;
    background: rgba(126, 228, 255, 0.2);
}

.detail-container-locks i {
    bottom: 3px;
    width: 8px;
    height: 8px;
    border: 2px solid rgba(255, 210, 74, 0.48);
    border-radius: 50%;
    background: rgba(2, 12, 24, 0.64);
}

.detail-container-locks i:nth-child(1) { left: 3px; }
.detail-container-locks i:nth-child(2) { left: 19px; }
.detail-container-locks i:nth-child(3) { left: 35px; }
.detail-container-locks i:nth-child(4) { left: 51px; }

.detail-container-seal {
    top: calc(var(--row-prep) - 3px);
    left: 20%;
    width: 30px;
    height: 28px;
}

.detail-container-seal::before {
    left: 9px;
    top: 1px;
    width: 12px;
    height: 13px;
    border: 2px solid rgba(255, 210, 74, 0.72);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.detail-container-seal::after {
    left: 6px;
    top: 12px;
    width: 18px;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(135deg, #ffd24a, #9dffcf);
    box-shadow: 0 0 12px rgba(255, 210, 74, 0.28);
}

.detail-container-seal i {
    left: 13px;
    top: 16px;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    background: rgba(4, 20, 38, 0.58);
    z-index: 1;
}

.detail-container-lashing {
    top: calc(var(--row-prep) - 19px);
    left: 10.4%;
    width: 104px;
    height: 42px;
    pointer-events: none;
}

.detail-container-lashing i {
    top: var(--lash-top, 3px);
    left: var(--lash-left, 10px);
    width: 2px;
    height: 44px;
    border-radius: 99px;
    background: rgba(236, 250, 255, 0.58);
    box-shadow: 0 0 8px rgba(126, 228, 255, 0.22);
    transform: rotate(var(--lash-rot, 18deg));
}

.detail-container-lashing i:nth-child(1) { --lash-left: 11px; --lash-rot: 18deg; }
.detail-container-lashing i:nth-child(2) { --lash-left: 28px; --lash-rot: -16deg; }
.detail-container-lashing i:nth-child(3) { --lash-left: 72px; --lash-rot: 16deg; }
.detail-container-lashing i:nth-child(4) { --lash-left: 89px; --lash-rot: -18deg; }

.detail-mooring {
    width: 88px;
    height: 20px;
}

.detail-mooring--origin {
    top: calc(var(--row-sea) + 28px);
    left: 43%;
}

.detail-mooring--destination {
    top: calc(var(--row-sea) + 28px);
    left: 80%;
}

.detail-mooring::before {
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 99px;
    background: rgba(236, 250, 255, 0.22);
}

.detail-mooring::after {
    left: 9px;
    right: 9px;
    bottom: 8px;
    height: 2px;
    border-radius: 99px;
    background: repeating-linear-gradient(90deg, #ffd24a 0 7px, #7ee4ff 8px 14px);
    transform: rotate(-5deg);
}

.detail-mooring i {
    bottom: 2px;
    width: 7px;
    height: 14px;
    border-radius: 99px 99px 0 0;
    background: rgba(236, 250, 255, 0.62);
}

.detail-mooring i:nth-child(1) { left: 3px; }
.detail-mooring i:nth-child(2) { left: 41px; }
.detail-mooring i:nth-child(3) { right: 3px; }

.detail-port-lights {
    width: 48px;
    height: 58px;
}

.detail-port-lights--origin {
    top: calc(var(--row-sea) - 50px);
    left: 39%;
}

.detail-port-lights--destination {
    top: calc(var(--row-sea) + 18px);
    left: 76%;
}

.detail-port-lights::before {
    left: 22px;
    bottom: 0;
    width: 3px;
    height: 54px;
    border-radius: 99px;
    background: rgba(236, 250, 255, 0.46);
}

.detail-port-lights::after {
    left: 7px;
    top: 6px;
    width: 34px;
    height: 3px;
    border-radius: 99px;
    background: rgba(236, 250, 255, 0.4);
}

.detail-port-lights i {
    top: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffd24a;
    box-shadow: 0 0 13px rgba(255, 210, 74, 0.42);
}

.detail-port-lights i:first-child { left: 4px; }
.detail-port-lights i:last-child { right: 4px; }

.detail-crane-spreader {
    width: 56px;
    height: 46px;
    animation: spreader-sway 5s ease-in-out infinite;
}

.detail-crane-spreader--river {
    top: calc(var(--row-sea) - 71px);
    left: 10%;
    margin-left: -28px;
    animation-delay: -0.9s;
}

.detail-crane-spreader--origin {
    top: calc(var(--row-sea) - 71px);
    left: 50%;
    margin-left: -28px;
}

.detail-crane-spreader--destination {
    top: calc(var(--row-sea) - 36px);
    left: 90%;
    margin-left: -28px;
    animation-delay: -1.8s;
}

.detail-crane-spreader::before {
    top: 0;
    left: 27px;
    width: 2px;
    height: 34px;
    border-radius: 99px;
    background: linear-gradient(180deg, rgba(236, 250, 255, 0.14), rgba(255, 210, 74, 0.84));
}

.detail-crane-spreader::after {
    left: 7px;
    bottom: 7px;
    width: 42px;
    height: 9px;
    border: 1px solid rgba(255, 210, 74, 0.58);
    border-radius: 2px;
    background:
        repeating-linear-gradient(90deg, rgba(4, 20, 38, 0.3) 0 1px, transparent 1px 9px),
        rgba(255, 210, 74, 0.34);
}

.detail-crane-spreader i {
    left: 10px;
    bottom: 0;
    width: 4px;
    height: 9px;
    border-radius: 0 0 99px 99px;
    background: rgba(236, 250, 255, 0.64);
    box-shadow:
        30px 0 0 rgba(236, 250, 255, 0.64),
        15px -7px 0 -1px rgba(255, 210, 74, 0.62);
}

.detail-tugboat {
    top: calc(var(--row-sea) + 9px);
    left: 34%;
    width: 66px;
    height: 29px;
    animation: tug-drift 6.4s ease-in-out infinite;
}

.detail-tugboat::before {
    right: 0;
    bottom: 4px;
    left: 0;
    height: 14px;
    border: 1px solid rgba(236, 250, 255, 0.42);
    border-radius: 3px 12px 10px 10px;
    background: linear-gradient(180deg, #f1fbff 0 40%, #cb312e 41% 100%);
    clip-path: polygon(0 0, 86% 0, 100% 58%, 90% 100%, 12% 100%);
}

.detail-tugboat::after {
    right: 16px;
    bottom: 18px;
    width: 20px;
    height: 10px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(135deg, #effcff, #65cbe8);
}

.detail-tugboat i {
    left: -14px;
    bottom: 6px;
    width: 18px;
    height: 4px;
    border-radius: 50%;
    border-top: 2px solid rgba(126, 228, 255, 0.24);
}

.detail-berth-fenders {
    width: 82px;
    height: 18px;
}

.detail-berth-fenders--origin {
    top: calc(var(--row-sea) + 37px);
    left: 44%;
}

.detail-berth-fenders--destination {
    top: calc(var(--row-sea) + 37px);
    left: 81%;
}

.detail-berth-fenders i {
    bottom: 0;
    width: 12px;
    height: 17px;
    border-radius: 99px;
    background: linear-gradient(180deg, rgba(236, 250, 255, 0.72), rgba(4, 20, 38, 0.72));
    box-shadow: inset 0 -4px 0 rgba(126, 228, 255, 0.16);
}

.detail-berth-fenders i:nth-child(1) { left: 4px; }
.detail-berth-fenders i:nth-child(2) { left: 34px; }
.detail-berth-fenders i:nth-child(3) { right: 4px; }

.detail-radar {
    top: calc(var(--row-sea) - 92px);
    left: 62%;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid rgba(126, 228, 255, 0.2);
}

.detail-radar::before {
    inset: 9px;
    border-radius: 50%;
    border: 1px solid rgba(126, 228, 255, 0.18);
}

.detail-radar::after {
    left: 50%;
    top: 50%;
    width: 27px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(126, 228, 255, 0.86), transparent);
    transform-origin: left center;
    animation: radar-sweep 3.2s linear infinite;
}

.detail-radar i {
    left: 24px;
    top: 24px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7ee4ff;
    box-shadow: 0 0 13px rgba(126, 228, 255, 0.48);
}

.detail-docs {
    top: calc(var(--row-arrival) - 49px);
    left: 57%;
    width: 48px;
    height: 34px;
    border: 1px solid rgba(157, 255, 207, 0.32);
    border-radius: 4px;
    background:
        linear-gradient(90deg, rgba(157, 255, 207, 0.18) 0 4px, transparent 5px),
        rgba(2, 12, 24, 0.62);
}

.detail-docs::before {
    left: 8px;
    top: 7px;
    width: 24px;
    height: 2px;
    background: rgba(236, 250, 255, 0.42);
    box-shadow:
        0 7px 0 rgba(236, 250, 255, 0.3),
        0 14px 0 rgba(236, 250, 255, 0.22);
}

.detail-docs::after {
    right: 6px;
    bottom: 6px;
    width: 8px;
    height: 8px;
    border: 2px solid rgba(157, 255, 207, 0.56);
    border-radius: 50%;
}

.detail-docs i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.detail-docs i:first-child {
    right: -10px;
    top: 7px;
    background: #ffd24a;
}

.detail-docs i:last-child {
    right: -10px;
    top: 20px;
    background: #9dffcf;
}

.detail-customs-camera {
    top: calc(var(--row-arrival) - 72px);
    left: 52%;
    width: 34px;
    height: 28px;
}

.detail-customs-camera::before {
    left: 12px;
    top: 0;
    width: 4px;
    height: 28px;
    border-radius: 99px;
    background: rgba(236, 250, 255, 0.42);
}

.detail-customs-camera::after {
    right: 0;
    top: 4px;
    width: 21px;
    height: 12px;
    border: 1px solid rgba(157, 255, 207, 0.44);
    border-radius: 3px;
    background: linear-gradient(135deg, rgba(236, 250, 255, 0.7), rgba(65, 99, 110, 0.92));
}

.detail-customs-camera i {
    right: 3px;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #9dffcf;
    box-shadow: 0 0 12px rgba(157, 255, 207, 0.54);
}

.detail-weighbridge {
    top: calc(var(--row-arrival) + 13px);
    left: 63%;
    width: 92px;
    height: 21px;
    border: 1px solid rgba(157, 255, 207, 0.22);
    border-radius: 5px;
    background:
        repeating-linear-gradient(90deg, rgba(236, 250, 255, 0.22) 0 1px, transparent 1px 10px),
        linear-gradient(180deg, rgba(5, 29, 42, 0.72), rgba(2, 12, 24, 0.84));
}

.detail-weighbridge::before {
    top: -22px;
    right: 10px;
    width: 24px;
    height: 18px;
    border: 1px solid rgba(157, 255, 207, 0.38);
    border-radius: 3px;
    background: rgba(2, 12, 24, 0.7);
}

.detail-weighbridge::after {
    top: -17px;
    right: 15px;
    width: 14px;
    height: 2px;
    border-radius: 99px;
    background: rgba(157, 255, 207, 0.74);
    box-shadow:
        0 5px 0 rgba(126, 228, 255, 0.44),
        0 10px 0 rgba(255, 210, 74, 0.44);
}

.detail-weighbridge i {
    top: -5px;
    width: 4px;
    height: 11px;
    border-radius: 99px;
    background: rgba(255, 210, 74, 0.62);
}

.detail-weighbridge i:first-child { left: 8px; }
.detail-weighbridge i:last-child { right: 8px; }

.detail-inspection-light {
    top: calc(var(--row-arrival) - 64px);
    left: 30%;
    width: 76px;
    height: 62px;
}

.detail-inspection-light::before {
    left: 8px;
    top: 0;
    width: 5px;
    height: 58px;
    border-radius: 99px;
    background: rgba(236, 250, 255, 0.46);
}

.detail-inspection-light::after {
    left: 18px;
    top: 6px;
    width: 54px;
    height: 34px;
    background: linear-gradient(90deg, rgba(157, 255, 207, 0.24), transparent);
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
    animation: inspection-pulse 2.6s ease-in-out infinite;
}

.detail-inspection-light i {
    left: 9px;
    top: 7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #9dffcf;
    box-shadow: 0 0 14px rgba(157, 255, 207, 0.6);
}

.detail-loading-dock {
    top: calc(var(--row-arrival) - 28px);
    left: 6%;
    width: 96px;
    height: 38px;
    border: 1px solid rgba(126, 228, 255, 0.18);
    border-radius: 6px;
    background:
        linear-gradient(90deg, transparent 48%, rgba(126, 228, 255, 0.18) 49% 51%, transparent 52%),
        rgba(2, 12, 24, 0.42);
}

.detail-loading-dock::before {
    left: 8px;
    right: 8px;
    bottom: 8px;
    height: 5px;
    border-radius: 99px;
    background: repeating-linear-gradient(90deg, #ffd24a 0 10px, rgba(236, 250, 255, 0.4) 11px 16px);
}

.detail-loading-dock::after {
    right: 11px;
    bottom: 13px;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(126, 228, 255, 0.3);
    border-radius: 50%;
}

.detail-loading-dock i {
    bottom: 14px;
    width: 4px;
    height: 14px;
    border-radius: 99px;
    background: rgba(255, 210, 74, 0.7);
}

.detail-loading-dock i:first-child { left: 13px; }
.detail-loading-dock i:last-child { left: 31px; }

.detail-dock-guides {
    top: calc(var(--row-arrival) + 6px);
    left: 0%;
    width: 134px;
    height: 28px;
}

.detail-dock-guides i {
    bottom: 0;
    width: 30px;
    height: 5px;
    border-radius: 99px;
    background: repeating-linear-gradient(90deg, #ffd24a 0 8px, #061421 9px 14px);
    transform: skewX(-15deg);
}

.detail-dock-guides i:nth-child(1) { left: 0; }
.detail-dock-guides i:nth-child(2) { left: 48px; }
.detail-dock-guides i:nth-child(3) { right: 0; }

.detail-final-pallets {
    top: calc(var(--row-arrival) - 38px);
    left: -2%;
    width: 62px;
    height: 32px;
}

.detail-final-pallets::before {
    left: 4px;
    right: 4px;
    bottom: 0;
    height: 6px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, #80613a 0 10px, #50371f 11px 16px);
}

.detail-final-pallets i {
    bottom: 6px;
    width: 24px;
    height: 20px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 3px;
    background:
        repeating-linear-gradient(90deg, rgba(4, 20, 38, 0.24) 0 1px, transparent 1px 7px),
        linear-gradient(180deg, #ffd24a, #d8a12a);
}

.detail-final-pallets i:first-child { left: 5px; }
.detail-final-pallets i:last-child { left: 32px; }

.detail-yard {
    width: 116px;
    height: 54px;
    border: 1px solid rgba(126, 228, 255, 0.12);
    border-radius: 6px;
    opacity: 0.32;
    background:
        repeating-linear-gradient(90deg, transparent 0 15px, rgba(126, 228, 255, 0.09) 16px 17px),
        rgba(2, 12, 24, 0.28);
    transition: opacity 0.34s ease, filter 0.34s ease;
}

.detail-yard--origin {
    top: calc(var(--row-sea) - 54px);
    left: 44%;
}

.detail-yard--destination {
    top: calc(var(--row-arrival) - 54px);
    left: 80%;
}

.detail-yard i {
    width: 34px;
    height: 13px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 2px;
    background:
        repeating-linear-gradient(90deg, rgba(4, 20, 38, 0.24) 0 1px, transparent 1px 7px),
        var(--yard-color, #7ee4ff);
}

.detail-yard i:nth-child(1) { left: 12px; bottom: 9px; --yard-color: #7ee4ff; }
.detail-yard i:nth-child(2) { left: 49px; bottom: 9px; --yard-color: #ffd24a; }
.detail-yard i:nth-child(3) { left: 30px; bottom: 25px; --yard-color: #9dffcf; }

.detail-wave {
    left: 14%;
    width: 62%;
    height: 18px;
    border-top: 2px solid rgba(126, 228, 255, 0.2);
    border-radius: 50%;
    opacity: 0.6;
    animation: wave-drift 6.2s ease-in-out infinite;
}

.detail-wave--one {
    top: calc(var(--row-sea) + 20px);
}

.detail-wave--two {
    top: calc(var(--row-sea) + 48px);
    animation-delay: -2.4s;
}

.detail-buoy {
    width: 8px;
    height: 18px;
    border-radius: 99px 99px 3px 3px;
    background: linear-gradient(180deg, #ffd24a 0 48%, #cb312e 49% 100%);
    box-shadow: 0 0 12px rgba(255, 210, 74, 0.22);
    animation: buoy-bob 3.8s ease-in-out infinite;
}

.route-detail-layer .detail-buoy {
    display: none;
}

.detail-buoy--one {
    top: calc(var(--row-sea) + 24px);
    left: 28%;
}

.detail-buoy--two {
    top: calc(var(--row-sea) + 42px);
    left: 70%;
    animation-delay: -1.4s;
}

.detail-customs-booth {
    top: calc(var(--row-arrival) - 64px);
    left: 46%;
    width: 46px;
    height: 36px;
    border: 1px solid rgba(157, 255, 207, 0.34);
    border-radius: 6px 6px 2px 2px;
    background:
        linear-gradient(90deg, transparent 45%, rgba(2, 12, 24, 0.42) 46% 56%, transparent 57%),
        linear-gradient(180deg, rgba(236, 250, 255, 0.84), rgba(72, 122, 132, 0.9));
}

.detail-barrier {
    top: calc(var(--row-arrival) - 24px);
    left: 36.5%;
    width: 66px;
    height: 5px;
    border-radius: 99px;
    background: repeating-linear-gradient(90deg, #ffd24a 0 10px, #cb312e 11px 20px);
    box-shadow: 0 0 12px rgba(255, 210, 74, 0.18);
    transform: rotate(-7deg);
    transform-origin: left center;
}

.detail-receiver-ramp {
    top: calc(var(--row-arrival) - 14px);
    left: 2%;
    width: 88px;
    height: 18px;
    border: 1px solid rgba(126, 228, 255, 0.14);
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(126, 228, 255, 0.2), rgba(255, 210, 74, 0.16));
    transform: skewX(18deg);
}

.mod-quarry {
    left: 31%;
    top: 5%;
    z-index: 7;
    width: 180px;
    height: 126px;
    opacity: 0.64;
}

.quarry-cut,
.quarry-blast,
.quarry-dust-front,
.quarry-heap {
    position: absolute;
    display: block;
}

.quarry-cut {
    left: 0;
    width: 150px;
    height: 28px;
    border: 1px solid rgba(255, 210, 74, 0.16);
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(127, 91, 47, 0.86), rgba(36, 48, 49, 0.82));
    clip-path: polygon(0 22%, 100% 0, 92% 100%, 6% 100%);
}

.quarry-cut::before,
.quarry-cut::after,
.quarry-heap::before,
.quarry-heap::after {
    position: absolute;
    content: "";
}

.quarry-cut::before {
    right: 10px;
    bottom: 8px;
    left: 12px;
    height: 2px;
    border-radius: 99px;
    background: rgba(255, 210, 74, 0.2);
    box-shadow: 0 -8px 0 rgba(236, 250, 255, 0.08);
}

.quarry-cut::after {
    inset: 4px 18px auto auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 210, 74, 0.26);
    box-shadow:
        -42px 10px 0 rgba(236, 250, 255, 0.1),
        -74px 5px 0 rgba(255, 210, 74, 0.14);
}

.quarry-cut--one {
    bottom: 54px;
}

.quarry-cut--two {
    bottom: 28px;
    left: 14px;
    width: 128px;
}

.quarry-heap {
    bottom: 0;
    left: 34px;
    width: 82px;
    height: 36px;
    border: 1px solid rgba(255, 210, 74, 0.12);
    border-radius: 50% 50% 4px 4px;
    background:
        radial-gradient(circle at 30% 46%, rgba(255, 210, 74, 0.2), transparent 20%),
        linear-gradient(135deg, rgba(139, 103, 54, 0.9), rgba(39, 49, 46, 0.88));
}

.quarry-heap::before {
    left: 16px;
    bottom: 8px;
    width: 9px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 210, 74, 0.26);
    box-shadow:
        24px -4px 0 rgba(236, 250, 255, 0.12),
        43px 5px 0 rgba(255, 210, 74, 0.18);
}

.quarry-blast {
    left: 46px;
    bottom: 24px;
    z-index: 8;
    width: 92px;
    height: 86px;
    pointer-events: none;
    opacity: 0;
}

.quarry-blast::before,
.quarry-blast::after,
.quarry-dust-front::before,
.quarry-dust-front::after {
    position: absolute;
    content: "";
}

.quarry-blast::before {
    left: 32px;
    bottom: 18px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 12%, rgba(255, 210, 74, 0.9) 13% 38%, rgba(165, 91, 38, 0.5) 39% 62%, transparent 63%);
    box-shadow:
        0 0 24px rgba(255, 210, 74, 0.64),
        0 0 56px rgba(255, 118, 42, 0.34);
    transform: scale(0.4);
}

.quarry-blast::after {
    left: 16px;
    bottom: 10px;
    width: 58px;
    height: 32px;
    border-radius: 50% 50% 18% 18%;
    background:
        radial-gradient(circle at 35% 62%, rgba(255, 210, 74, 0.28), transparent 24%),
        linear-gradient(180deg, rgba(156, 111, 62, 0.72), rgba(62, 56, 45, 0.08));
    filter: blur(1px);
    transform: translateY(24px) scale(0.42);
}

.quarry-blast i {
    position: absolute;
    display: block;
    left: 42px;
    bottom: 28px;
    width: var(--blast-rock, 7px);
    height: var(--blast-rock, 7px);
    border-radius: 42% 58% 48% 52%;
    background: linear-gradient(135deg, #b7864b, #35423e);
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--blast-rot, 0deg));
}

.quarry-blast i:nth-child(1) { --blast-x: -46px; --blast-y: -42px; --blast-rock: 8px; --blast-rot: 22deg; }
.quarry-blast i:nth-child(2) { --blast-x: -24px; --blast-y: -66px; --blast-rock: 6px; --blast-rot: -18deg; }
.quarry-blast i:nth-child(3) { --blast-x: 4px; --blast-y: -78px; --blast-rock: 9px; --blast-rot: 34deg; }
.quarry-blast i:nth-child(4) { --blast-x: 35px; --blast-y: -58px; --blast-rock: 7px; --blast-rot: -27deg; }
.quarry-blast i:nth-child(5) { --blast-x: 52px; --blast-y: -28px; --blast-rock: 10px; --blast-rot: 13deg; }
.quarry-blast i:nth-child(6) { --blast-x: -62px; --blast-y: -16px; --blast-rock: 5px; --blast-rot: -42deg; }

.quarry-dust-front {
    left: 26px;
    bottom: 4px;
    z-index: 9;
    width: 124px;
    height: 42px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(ellipse at 24% 68%, rgba(151, 107, 60, 0.44), transparent 42%),
        radial-gradient(ellipse at 68% 62%, rgba(217, 169, 82, 0.28), transparent 46%);
    filter: blur(2px);
}

.quarry-dust-front::before {
    left: -16px;
    bottom: 12px;
    width: 52px;
    height: 20px;
    border-radius: 50%;
    background: rgba(151, 107, 60, 0.26);
}

.quarry-dust-front::after {
    right: -8px;
    bottom: 8px;
    width: 62px;
    height: 22px;
    border-radius: 50%;
    background: rgba(217, 169, 82, 0.2);
}

.route-scene--extended[data-stage="quarry"] .quarry-blast {
    opacity: 1;
}

.route-scene--extended.is-source-quarry .quarry-blast {
    opacity: 1;
}

.route-scene--extended[data-stage="quarry"] .quarry-blast::before,
.route-scene--extended.is-source-quarry .quarry-blast::before {
    animation: quarry-blast-flash 1.9s ease-out infinite;
}

.route-scene--extended[data-stage="quarry"] .quarry-blast::after,
.route-scene--extended.is-source-quarry .quarry-blast::after {
    animation: quarry-blast-plume 2.4s ease-out infinite;
}

.route-scene--extended[data-stage="quarry"] .quarry-blast i,
.route-scene--extended.is-source-quarry .quarry-blast i {
    animation: quarry-rock-throw 2.4s cubic-bezier(0.15, 0.65, 0.28, 1) infinite;
}

.route-scene--extended[data-stage="quarry"] .quarry-blast i:nth-child(2) { animation-delay: 0.03s; }
.route-scene--extended[data-stage="quarry"] .quarry-blast i:nth-child(3) { animation-delay: 0.05s; }
.route-scene--extended[data-stage="quarry"] .quarry-blast i:nth-child(4) { animation-delay: 0.02s; }
.route-scene--extended[data-stage="quarry"] .quarry-blast i:nth-child(5) { animation-delay: 0.08s; }
.route-scene--extended[data-stage="quarry"] .quarry-blast i:nth-child(6) { animation-delay: 0.04s; }

.route-scene--extended[data-stage="quarry"] .quarry-dust-front {
    animation: quarry-dust-roll 2.4s ease-out infinite;
}

.route-scene--extended.is-source-quarry .quarry-dust-front {
    animation: quarry-dust-roll 2.4s ease-out infinite;
}

.route-scene--extended[data-stage="quarry"] .quarry-heap,
.route-scene--extended.is-source-quarry .quarry-heap {
    animation: quarry-heap-settle 2.4s ease-out infinite;
}

.mod-excavator {
    left: 49.2%;
    top: var(--row-quarry);
    z-index: 18;
    width: 260px;
    height: 124px;
    opacity: 0.92;
    transform: translate(-50%, -100%) scale(0.88);
    transform-origin: bottom center;
    will-change: left, opacity, transform;
    --excavator-drive-dust: 0;
    --excavator-track-roll: 0px;
}

.mod-excavator::after {
    position: absolute;
    left: 42px;
    bottom: 0;
    z-index: 2;
    width: 92px;
    height: 24px;
    border-radius: 50%;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(circle at 28% 54%, rgba(255, 210, 74, 0.2), transparent 42%),
        radial-gradient(circle at 62% 48%, rgba(236, 250, 255, 0.09), transparent 38%);
    filter: blur(1px);
    opacity: calc(var(--excavator-drive-dust, 0) * 0.58);
    transform: translate3d(-22px, 2px, 0) scaleX(1.25);
}

.excavator-track,
.excavator-body,
.excavator-cabin,
.excavator-arm,
.excavator-stick,
.excavator-hydraulic,
.excavator-bucket {
    position: absolute;
    display: block;
}

.excavator-track {
    left: 42px;
    bottom: 8px;
    z-index: 3;
    width: 124px;
    height: 28px;
    border: 2px solid rgba(3, 13, 24, 0.92);
    border-radius: 99px;
    background:
        repeating-linear-gradient(90deg, rgba(236, 250, 255, 0.28) 0 4px, transparent 4px 11px),
        #061421;
    background-position: var(--excavator-track-roll, 0px) 0, 0 0;
    box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.36), 0 8px 18px rgba(0, 0, 0, 0.24);
}

.excavator-track::before,
.excavator-track::after,
.excavator-body::before,
.excavator-body::after,
.excavator-cabin::before,
.excavator-cabin::after,
.excavator-arm::before,
.excavator-arm::after,
.excavator-stick::before,
.excavator-stick::after,
.excavator-bucket::before,
.excavator-bucket::after {
    position: absolute;
    content: "";
}

.excavator-track::before {
    inset: 4px 8px;
    border: 1px solid rgba(126, 228, 255, 0.18);
    border-radius: 99px;
    background: linear-gradient(180deg, rgba(236, 250, 255, 0.08), rgba(2, 10, 20, 0.28));
}

.excavator-track::after {
    left: 14px;
    bottom: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #020a14;
    box-shadow:
        18px 0 0 #020a14,
        36px 0 0 #020a14,
        54px 0 0 #020a14,
        72px 0 0 #020a14,
        90px 0 0 #020a14;
}

.excavator-body {
    left: 68px;
    bottom: 36px;
    z-index: 4;
    width: 98px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 22px 12px 8px 10px;
    background:
        linear-gradient(100deg, rgba(73, 49, 12, 0.36) 0 28%, transparent 29%),
        linear-gradient(135deg, #ffe170 0%, #efb327 44%, #b77616 100%);
    box-shadow: inset -12px -8px 0 rgba(4, 20, 38, 0.2), 0 8px 16px rgba(0, 0, 0, 0.2);
}

.excavator-body::before {
    left: 14px;
    top: 10px;
    width: 30px;
    height: 4px;
    border-radius: 99px;
    background: rgba(4, 20, 38, 0.3);
    box-shadow:
        0 8px 0 rgba(4, 20, 38, 0.2),
        0 16px 0 rgba(4, 20, 38, 0.15);
}

.excavator-body::after {
    right: 14px;
    bottom: 9px;
    width: 16px;
    height: 16px;
    border: 3px solid rgba(4, 20, 38, 0.46);
    border-radius: 50%;
    background: rgba(255, 210, 74, 0.28);
}

.excavator-cabin {
    left: 137px;
    bottom: 52px;
    z-index: 5;
    width: 42px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px 10px 4px 5px;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.94) 0 38%, rgba(90, 205, 234, 0.9) 39% 100%);
    clip-path: polygon(0 36%, 18% 0, 100% 0, 88% 100%, 0 100%);
    box-shadow: inset -5px -5px 0 rgba(4, 20, 38, 0.14);
}

.excavator-cabin::before {
    top: 7px;
    right: 8px;
    width: 18px;
    height: 13px;
    border-radius: 2px 5px 2px 2px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(8, 96, 126, 0.9));
}

.excavator-cabin::after {
    left: -5px;
    bottom: 4px;
    width: 4px;
    height: 25px;
    border-radius: 99px;
    background: rgba(4, 20, 38, 0.44);
}

.excavator-arm {
    left: 116px;
    bottom: 70px;
    z-index: 7;
    width: var(--excavator-arm-width, 70px);
    height: 13px;
    border: 1px solid rgba(4, 20, 38, 0.22);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255, 223, 116, 0.24), transparent 46%),
        linear-gradient(90deg, #ffd24a, #d6911a);
    transform: rotate(var(--excavator-arm, -24deg));
    transform-origin: left center;
    transition: none;
    box-shadow: inset 0 -3px 0 rgba(4, 20, 38, 0.18);
}

.excavator-arm::before {
    left: 12px;
    right: 16px;
    top: 5px;
    height: 2px;
    border-radius: 99px;
    background: rgba(79, 48, 10, 0.34);
    box-shadow: none;
}

.excavator-arm::after {
    right: -8px;
    top: -5px;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(4, 20, 38, 0.46);
    border-radius: 50%;
    background: #ffd24a;
}

.excavator-stick {
    left: var(--excavator-stick-x, 160px);
    bottom: var(--excavator-stick-y, 76px);
    z-index: 8;
    width: var(--excavator-stick-width, 64px);
    height: 11px;
    border: 1px solid rgba(4, 20, 38, 0.24);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 223, 116, 0.2), transparent 48%),
        linear-gradient(90deg, #e9aa25, #c98517);
    transform: rotate(var(--excavator-stick, 76deg));
    transform-origin: left center;
    box-shadow: inset 0 -3px 0 rgba(4, 20, 38, 0.18);
}

.excavator-stick::before {
    left: 10px;
    right: 13px;
    top: 4px;
    height: 2px;
    border-radius: 99px;
    background: rgba(74, 45, 10, 0.32);
}

.excavator-stick::after {
    right: -7px;
    top: -5px;
    width: 16px;
    height: 16px;
    border: 3px solid rgba(4, 20, 38, 0.42);
    border-radius: 50%;
    background: #d99a1f;
}

.excavator-hydraulic {
    display: none;
    z-index: 5;
    height: 3px;
    border-radius: 99px;
    background:
        linear-gradient(90deg, #1a2328 0 24%, #6e7b80 25% 48%, #2d3940 49% 100%);
    box-shadow: 0 1px 0 rgba(4, 20, 38, 0.32);
    opacity: 0.72;
    transform-origin: left center;
}

.excavator-hydraulic--boom {
    left: 108px;
    bottom: 58px;
    width: calc(var(--excavator-arm-width, 70px) - 20px);
    transform: rotate(calc(var(--excavator-arm, -24deg) + 12deg));
}

.excavator-hydraulic--bucket {
    left: calc(var(--excavator-stick-x, 160px) + 14px);
    bottom: calc(var(--excavator-stick-y, 76px) - 7px);
    width: calc(var(--excavator-stick-width, 64px) - 22px);
    transform: rotate(calc(var(--excavator-stick, 76deg) + 7deg));
}

.excavator-bucket {
    left: var(--excavator-bucket-x, 178px);
    bottom: var(--excavator-bucket-y, 24px);
    z-index: 9;
    width: 56px;
    height: 36px;
    border: 1px solid rgba(7, 18, 28, 0.7);
    border-radius: 9px 8px 15px 10px;
    background:
        linear-gradient(232deg, rgba(235, 246, 249, 0.62) 0 14%, transparent 15%),
        radial-gradient(ellipse at 36% 58%, rgba(2, 8, 12, 0.5) 0 30%, transparent 32%),
        linear-gradient(180deg, #8d9ba1 0%, #526068 45%, #1b262d 100%);
    clip-path: polygon(0 42%, 18% 13%, 72% 0, 100% 18%, 86% 78%, 46% 100%, 10% 84%);
    transform: rotate(var(--excavator-bucket, -28deg));
    transform-origin: 48px 11px;
    transition: none;
    box-shadow:
        inset 7px -6px 0 rgba(0, 0, 0, 0.26),
        inset -5px 4px 0 rgba(255, 255, 255, 0.13),
        0 5px 10px rgba(0, 0, 0, 0.18);
}

.excavator-bucket::before {
    left: -9px;
    bottom: 1px;
    width: 24px;
    height: 18px;
    background:
        linear-gradient(90deg, #e1edf1 0 20%, #8f9aa0 21% 27%, #dce8ec 28% 49%, #8f9aa0 50% 56%, #dce8ec 57% 78%, #8f9aa0 79% 84%, #d5e0e4 85% 100%);
    clip-path: polygon(0 100%, 14% 18%, 38% 100%, 55% 18%, 76% 100%, 100% 22%, 86% 4%, 0 24%);
    transform: rotate(7deg);
    transform-origin: right center;
}

.excavator-bucket::after {
    right: 15px;
    bottom: 7px;
    left: 8px;
    height: 12px;
    border-radius: 50% 50% 5px 5px;
    background:
        radial-gradient(circle at 40% 40%, rgba(255, 210, 74, 0.28), transparent 40%),
        rgba(92, 58, 22, 0.84);
    opacity: var(--excavator-bucket-fill, 0);
}

.excavator-bucket i {
    position: absolute;
    right: 2px;
    top: 4px;
    z-index: 2;
    width: 15px;
    height: 15px;
    border: 3px solid rgba(7, 18, 28, 0.62);
    border-radius: 50%;
    background: linear-gradient(135deg, #dce8ec, #65727a);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24);
}

.mod-dumptruck {
    z-index: 20;
    width: 178px;
    height: 78px;
    transform-origin: 50% 100%;
    --dump-bed-tip: 0deg;
    --dump-tailgate-open: 0deg;
    --dump-wheel-turn: 0deg;
    --dump-suspension: 0px;
    --dump-motion-dust: 0;
}

.dump-shadow,
.dump-frame,
.dump-bed,
.dump-tailgate,
.dump-hood,
.dump-cab,
.dump-grille,
.dump-exhaust,
.dump-ladder,
.dump-light,
.dump-wheel {
    position: absolute;
    display: block;
}

.dump-shadow::before,
.dump-shadow::after,
.dump-frame::before,
.dump-frame::after,
.dump-bed::before,
.dump-bed::after,
.dump-hood::before,
.dump-hood::after,
.dump-cab::before,
.dump-cab::after,
.dump-grille::before,
.dump-grille::after,
.dump-exhaust::before,
.dump-exhaust::after,
.dump-ladder::before,
.dump-ladder::after,
.dump-light::before,
.dump-light::after,
.dump-wheel::before,
.dump-wheel::after {
    position: absolute;
    content: "";
}

.dump-shadow {
    right: 8px;
    bottom: -1px;
    left: 10px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.36), transparent 68%);
    filter: blur(3px);
    opacity: 0.82;
}

.dump-shadow::before {
    right: 28px;
    bottom: 4px;
    width: 128px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(185, 130, 64, 0.24), transparent 70%);
    opacity: var(--dump-motion-dust, 0);
    transform: translateX(-18px);
}

.dump-frame {
    right: 14px;
    bottom: calc(18px - var(--dump-suspension, 0px));
    left: 20px;
    z-index: 2;
    height: 14px;
    border-radius: 4px;
    background:
        linear-gradient(180deg, #1d2c34, #07111a);
    box-shadow:
        inset 0 3px 0 rgba(236, 250, 255, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.28);
}

.dump-frame::before {
    right: 22px;
    bottom: 10px;
    left: 16px;
    height: 3px;
    border-radius: 99px;
    background: rgba(236, 250, 255, 0.25);
    box-shadow: 0 8px 0 rgba(255, 210, 74, 0.18);
}

.dump-frame::after {
    left: 34px;
    bottom: 2px;
    width: 58px;
    height: 5px;
    border-radius: 99px;
    background: rgba(126, 228, 255, 0.2);
    transform: rotate(-5deg);
}

.dump-bed {
    left: 9px;
    bottom: calc(31px - var(--dump-suspension, 0px));
    z-index: 4;
    width: 112px;
    height: 41px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 6px 5px 5px 7px;
    background:
        linear-gradient(155deg, transparent 0 14%, rgba(255, 210, 74, 0.9) 15%),
        linear-gradient(180deg, #f3c544 0%, #b37d24 58%, #715123 100%);
    clip-path: polygon(0 0, 97% 0, 88% 100%, 12% 100%, 4% 25%);
    box-shadow:
        inset 0 5px 0 rgba(255, 255, 255, 0.18),
        inset -11px -8px 0 rgba(4, 20, 38, 0.18),
        0 7px 12px rgba(0, 0, 0, 0.2);
    transform: rotate(var(--dump-bed-tip, 0deg));
    transform-origin: 10% 92%;
    transition: none;
}

.dump-tailgate {
    left: 6px;
    bottom: calc(31px - var(--dump-suspension, 0px));
    z-index: 5;
    width: 8px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 4px 2px 5px 5px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 42%),
        linear-gradient(180deg, #f4c33d, #8b621f);
    box-shadow: inset -2px -4px 0 rgba(4, 20, 38, 0.18), 0 4px 8px rgba(0, 0, 0, 0.18);
    transform: rotate(calc(var(--dump-bed-tip, 0deg) + var(--dump-tailgate-open, 0deg)));
    transform-origin: 50% 92%;
}

.dump-bed::before {
    left: 19px;
    top: -7px;
    width: 78px;
    height: 23px;
    border-radius: 45% 55% 15% 16%;
    background:
        radial-gradient(circle at 20% 54%, rgba(255, 210, 74, 0.42), transparent 18%),
        radial-gradient(circle at 56% 32%, rgba(236, 250, 255, 0.18), transparent 16%),
        radial-gradient(circle at 78% 64%, rgba(255, 210, 74, 0.22), transparent 16%),
        linear-gradient(135deg, #8c6338, #3d473f);
    opacity: var(--dump-load-opacity, 0);
    transition: opacity 0.32s ease;
}

.dump-bed::after {
    inset: 7px 15px 7px 14px;
    border-left: 1px solid rgba(4, 20, 38, 0.28);
    border-right: 1px solid rgba(4, 20, 38, 0.28);
    box-shadow:
        22px 0 0 -21px rgba(4, 20, 38, 0.48),
        44px 0 0 -21px rgba(4, 20, 38, 0.48),
        66px 0 0 -21px rgba(4, 20, 38, 0.48);
}

.dump-hood {
    right: 18px;
    bottom: calc(31px - var(--dump-suspension, 0px));
    z-index: 5;
    width: 42px;
    height: 27px;
    border: 1px solid rgba(255, 255, 255, 0.44);
    border-radius: 6px 8px 4px 4px;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.22), transparent 36%),
        linear-gradient(135deg, #ffd24a, #be8424);
    clip-path: polygon(0 15%, 82% 0, 100% 28%, 100% 100%, 0 100%);
}

.dump-hood::before {
    top: 7px;
    right: 9px;
    left: 10px;
    height: 3px;
    border-radius: 99px;
    background: rgba(4, 20, 38, 0.38);
    box-shadow: 0 7px 0 rgba(4, 20, 38, 0.22);
}

.dump-hood::after {
    left: 3px;
    bottom: -7px;
    width: 34px;
    height: 7px;
    border-radius: 99px;
    background: rgba(4, 20, 38, 0.32);
}

.dump-cab {
    right: 3px;
    bottom: calc(43px - var(--dump-suspension, 0px));
    z-index: 6;
    width: 39px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.56);
    border-radius: 10px 10px 5px 4px;
    background:
        linear-gradient(125deg, rgba(255, 255, 255, 0.9) 0 26%, transparent 27%),
        linear-gradient(135deg, #e8fbff, #1686a9);
    clip-path: polygon(9% 0, 88% 0, 100% 32%, 100% 100%, 0 100%, 0 26%);
    box-shadow: inset -6px -6px 0 rgba(4, 20, 38, 0.15);
}

.dump-cab::before {
    top: 7px;
    right: 7px;
    width: 17px;
    height: 12px;
    border-radius: 3px 6px 1px 1px;
    background:
        linear-gradient(135deg, #f6fdff, #58c4e4);
    box-shadow: -11px 4px 0 -3px rgba(4, 20, 38, 0.28);
}

.dump-cab::after {
    right: 4px;
    bottom: 6px;
    width: 4px;
    height: 11px;
    border-radius: 2px;
    background: rgba(255, 210, 74, 0.84);
    box-shadow: -20px 4px 0 -1px rgba(4, 20, 38, 0.5);
}

.dump-grille {
    right: -2px;
    bottom: calc(27px - var(--dump-suspension, 0px));
    z-index: 7;
    width: 15px;
    height: 24px;
    border-radius: 3px;
    background:
        repeating-linear-gradient(180deg, rgba(236, 250, 255, 0.44) 0 2px, transparent 2px 5px),
        linear-gradient(180deg, #263943, #071019);
    box-shadow: 0 0 0 1px rgba(236, 250, 255, 0.16);
}

.dump-grille::after {
    right: 2px;
    bottom: -5px;
    width: 18px;
    height: 6px;
    border-radius: 4px;
    background: #111a22;
}

.dump-exhaust {
    right: 48px;
    bottom: calc(57px - var(--dump-suspension, 0px));
    z-index: 7;
    width: 5px;
    height: 28px;
    border-radius: 99px 99px 0 0;
    background: linear-gradient(90deg, #1e2a31, #8b979d, #1a252c);
}

.dump-exhaust::before {
    top: -4px;
    left: -3px;
    width: 11px;
    height: 5px;
    border-radius: 50%;
    background: rgba(236, 250, 255, 0.5);
}

.dump-exhaust::after {
    left: -15px;
    top: -12px;
    width: 28px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(126, 228, 255, 0.18), transparent 72%);
    opacity: calc(var(--dump-motion-dust, 0) * 0.6);
}

.dump-ladder {
    right: 39px;
    bottom: calc(27px - var(--dump-suspension, 0px));
    z-index: 7;
    width: 15px;
    height: 26px;
    border-right: 2px solid rgba(236, 250, 255, 0.62);
    border-left: 2px solid rgba(236, 250, 255, 0.44);
}

.dump-ladder::before {
    inset: 5px 1px auto;
    height: 2px;
    background: rgba(236, 250, 255, 0.62);
    box-shadow:
        0 7px 0 rgba(236, 250, 255, 0.52),
        0 14px 0 rgba(236, 250, 255, 0.44);
}

.dump-light--front {
    right: 0;
    bottom: calc(41px - var(--dump-suspension, 0px));
    z-index: 8;
    width: 7px;
    height: 6px;
    border-radius: 50%;
    background: #fff2a6;
    box-shadow: 0 0 10px rgba(255, 210, 74, 0.64);
}

.dump-wheel {
    bottom: 3px;
    z-index: 8;
    width: 29px;
    height: 29px;
    border: 5px solid #07111a;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(126, 228, 255, 0.82) 0 12%, #182630 13% 27%, #050b12 28% 100%);
    box-shadow:
        inset 0 0 0 3px rgba(236, 250, 255, 0.14),
        0 4px 8px rgba(0, 0, 0, 0.34);
    transform: rotate(var(--dump-wheel-turn, 0deg));
}

.dump-wheel::before {
    inset: -5px;
    border: 2px dashed rgba(236, 250, 255, 0.18);
    border-radius: 50%;
}

.dump-wheel::after {
    inset: 8px;
    border-radius: 50%;
    background:
        linear-gradient(90deg, transparent 44%, rgba(236, 250, 255, 0.5) 45% 55%, transparent 56%),
        linear-gradient(0deg, transparent 44%, rgba(236, 250, 255, 0.42) 45% 55%, transparent 56%),
        rgba(126, 228, 255, 0.62);
}

.dump-wheel--rear-a { left: 21px; }
.dump-wheel--rear-b { left: 50px; }
.dump-wheel--middle { left: 82px; width: 26px; height: 26px; bottom: 4px; opacity: 0.74; }
.dump-wheel--front { right: 18px; }

.mod-factory {
    left: 78%;
    top: 23%;
    width: 132px;
    height: 112px;
    opacity: 0.78;
}

.factory-body,
.factory-roof,
.factory-stack,
.factory-door {
    position: absolute;
    display: block;
}

.factory-body {
    right: 0;
    bottom: 0;
    left: 0;
    height: 72px;
    border: 1px solid rgba(236, 250, 255, 0.42);
    border-radius: 6px;
    background:
        repeating-linear-gradient(90deg, rgba(3, 16, 28, 0.22) 0 1px, transparent 1px 18px),
        linear-gradient(180deg, rgba(220, 244, 250, 0.8), rgba(78, 123, 142, 0.86));
}

.factory-roof {
    right: 0;
    bottom: 64px;
    left: 0;
    height: 34px;
    background: linear-gradient(90deg, #ffd24a, #e3aa26);
    clip-path: polygon(0 100%, 16% 26%, 30% 100%, 46% 26%, 60% 100%, 76% 26%, 92% 100%);
}

.factory-roof::before,
.factory-roof::after,
.factory-stack::before {
    position: absolute;
    content: "";
}

.factory-roof::before {
    right: 12px;
    bottom: 5px;
    left: 12px;
    height: 3px;
    border-radius: 99px;
    background: rgba(4, 20, 38, 0.22);
    box-shadow: 0 -9px 0 rgba(255, 255, 255, 0.18);
}

.factory-roof::after {
    right: 10px;
    bottom: -6px;
    width: 44px;
    height: 9px;
    border-radius: 99px;
    background: repeating-linear-gradient(90deg, #ffd24a 0 8px, #061421 9px 14px);
    opacity: 0.62;
}

.factory-stack {
    right: 18px;
    bottom: 72px;
    width: 18px;
    height: 44px;
    border: 1px solid rgba(236, 250, 255, 0.42);
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, rgba(236, 250, 255, 0.82), rgba(86, 118, 132, 0.9));
}

.factory-stack::before {
    top: 7px;
    right: 4px;
    left: 4px;
    height: 2px;
    border-radius: 99px;
    background: rgba(4, 20, 38, 0.24);
    box-shadow:
        0 10px 0 rgba(4, 20, 38, 0.18),
        0 20px 0 rgba(4, 20, 38, 0.14);
}

.factory-door {
    left: 48px;
    bottom: 0;
    width: 36px;
    height: 40px;
    border-radius: 5px 5px 0 0;
    background: rgba(3, 16, 31, 0.68);
}

.factory-body::before,
.factory-body::after,
.factory-stack::after,
.factory-door::before {
    position: absolute;
    content: "";
}

.factory-body::before {
    top: 16px;
    left: 13px;
    width: 12px;
    height: 10px;
    border-radius: 2px;
    background: rgba(126, 228, 255, 0.38);
    box-shadow:
        24px 0 0 rgba(126, 228, 255, 0.34),
        48px 0 0 rgba(126, 228, 255, 0.34),
        72px 0 0 rgba(126, 228, 255, 0.34),
        0 22px 0 rgba(126, 228, 255, 0.26),
        24px 22px 0 rgba(126, 228, 255, 0.26),
        72px 22px 0 rgba(126, 228, 255, 0.26);
}

.factory-body::after {
    right: 10px;
    bottom: 7px;
    left: 10px;
    height: 3px;
    border-radius: 99px;
    background: rgba(4, 20, 38, 0.22);
}

.factory-stack::after {
    top: -18px;
    left: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(126, 228, 255, 0.18), transparent 62%);
    animation: stack-vapor 4.8s ease-in-out infinite;
}

.factory-door::before {
    top: 7px;
    left: 6px;
    width: 24px;
    height: 2px;
    background: rgba(126, 228, 255, 0.22);
    box-shadow:
        0 8px 0 rgba(126, 228, 255, 0.18),
        0 16px 0 rgba(126, 228, 255, 0.15);
}

.mod-bigbags {
    left: 47%;
    top: calc(var(--row-prep) - 34px);
    z-index: 13;
    display: flex;
    gap: 5px;
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.96);
    transition: opacity 0.42s ease, transform 0.42s ease;
}

.route-scene--extended[data-stage="bigbags"] .mod-bigbags,
.route-scene--extended.active-stage-bigbags .mod-bigbags,
.route-scene--extended[data-stage="container"] .mod-bigbags,
.route-scene--extended.active-stage-container .mod-bigbags {
    opacity: 0.88;
    transform: translate3d(0, 0, 0) scale(1);
}

.mod-bigbags span {
    position: relative;
    display: block;
    width: 22px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.56);
    border-radius: 7px 7px 5px 5px;
    background:
        linear-gradient(90deg, transparent 42%, rgba(4, 20, 38, 0.22) 43% 57%, transparent 58%),
        linear-gradient(180deg, #f3f2dc, #d7c991);
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.22);
}

.mod-bigbags span::before,
.mod-bigbags span::after {
    position: absolute;
    content: "";
}

.mod-bigbags span::before {
    top: -5px;
    left: 7px;
    width: 8px;
    height: 7px;
    border: 1px solid rgba(4, 20, 38, 0.28);
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
}

.mod-bigbags span::after {
    right: 5px;
    bottom: 6px;
    left: 5px;
    height: 1px;
    background: rgba(4, 20, 38, 0.22);
    box-shadow:
        0 -7px 0 rgba(4, 20, 38, 0.14),
        0 -14px 0 rgba(4, 20, 38, 0.12);
}

.mod-bigbags span:nth-child(2) {
    transform: translateY(-4px);
}

.mod-bigbags span:nth-child(3) {
    transform: translateY(2px);
}

.mod-warehouse {
    left: 11%;
    top: 43%;
    width: 112px;
    height: 86px;
    opacity: 0.7;
}

.route-scene--extended .mod-warehouse {
    display: none;
}

.mod-warehouse::before {
    position: absolute;
    inset: 0 0 12px;
    content: "";
    border: 1px solid rgba(236, 250, 255, 0.46);
    border-radius: 7px 7px 3px 3px;
    background:
        repeating-linear-gradient(90deg, rgba(4, 20, 35, 0.18) 0 1px, transparent 1px 18px),
        linear-gradient(180deg, rgba(223, 245, 250, 0.82), rgba(85, 128, 145, 0.88));
    clip-path: polygon(0 34%, 50% 0, 100% 34%, 100% 100%, 0 100%);
}

.mod-warehouse::after {
    position: absolute;
    right: 4px;
    bottom: 0;
    left: 8px;
    height: 16px;
    content: "";
    border: 1px solid rgba(126, 228, 255, 0.18);
    border-radius: 3px;
    background:
        repeating-linear-gradient(90deg, transparent 0 20px, rgba(126, 228, 255, 0.12) 21px 22px),
        linear-gradient(180deg, rgba(5, 29, 42, 0.92), rgba(2, 13, 26, 0.95));
}

.mod-warehouse span {
    position: absolute;
    bottom: 18px;
    z-index: 1;
    width: 15px;
    height: 30px;
    border-radius: 2px 2px 0 0;
    background: rgba(3, 16, 31, 0.62);
}

.mod-warehouse span:nth-child(1) { left: 27px; }
.mod-warehouse span:nth-child(2) { left: 48px; }
.mod-warehouse span:nth-child(3) { left: 69px; }

.mod-port {
    z-index: 12;
    width: 126px;
    height: 132px;
    opacity: 0.58;
    transition: opacity 0.35s ease, filter 0.35s ease;
}

.mod-port--river {
    top: calc(var(--row-sea) - 17%);
    left: calc(10% - 84px);
    opacity: 0.58;
}

.mod-port--origin {
    top: calc(var(--row-sea) - 17%);
    left: calc(50% - 84px);
}

.mod-port--destination {
    top: var(--row-sea);
    right: auto;
    left: calc(90% - 42px);
    transform: scaleX(-1);
}

.mod-port::before {
    position: absolute;
    right: 2px;
    bottom: -4px;
    left: 2px;
    height: 9px;
    content: "";
    border: 1px solid rgba(126, 228, 255, 0.16);
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(126, 228, 255, 0.18), rgba(255, 210, 74, 0.2));
}

.route-scene--extended[data-stage="container"] .mod-port--river,
.route-scene--extended.active-stage-container .mod-port--river,
.route-scene--extended[data-stage="barge"] .mod-port--river,
.route-scene--extended.active-stage-barge .mod-port--river,
.route-scene--extended[data-stage="port"] .mod-port--origin,
.route-scene--extended.active-stage-port .mod-port--origin,
.route-scene--extended[data-stage="unload"] .mod-port--destination,
.route-scene--extended.active-stage-unload .mod-port--destination,
.route-scene--extended[data-stage="customs"] .mod-port--destination {
    opacity: 0.9;
    filter: drop-shadow(0 0 16px rgba(255, 210, 74, 0.14));
}

.route-scene--extended[data-stage="sea"] .mod-port--river,
.route-scene--extended.active-stage-sea .mod-port--river,
.route-scene--extended[data-stage="port"] .mod-port--river,
.route-scene--extended.active-stage-port .mod-port--river,
.route-scene--extended[data-stage="sea"] .mod-port--origin {
    opacity: 0.22;
    filter: none;
}

.port-crane {
    position: absolute;
    left: 8px;
    bottom: 0;
    width: 112px;
    height: 124px;
}

.port-crane::before,
.port-crane::after {
    position: absolute;
    content: "";
    background: linear-gradient(180deg, #ffe377, #c98d19);
    box-shadow: 0 0 14px rgba(255, 210, 74, 0.16);
}

.port-crane::before {
    left: 22px;
    bottom: 0;
    width: 7px;
    height: 108px;
    border-radius: 99px;
    box-shadow:
        56px 0 0 #d8a12a,
        28px 30px 0 -2px rgba(255, 210, 74, 0.92);
    transform: skewX(-8deg);
}

.port-crane::after {
    left: 0;
    top: 14px;
    width: 108px;
    height: 8px;
    border-radius: 99px;
    box-shadow:
        28px 11px 0 -3px rgba(4, 20, 38, 0.42),
        57px 11px 0 -3px rgba(4, 20, 38, 0.42),
        85px 11px 0 -3px rgba(4, 20, 38, 0.42);
}

.port-stack {
    position: absolute;
    bottom: 0;
    width: 44px;
    height: 17px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 2px;
    background:
        repeating-linear-gradient(90deg, rgba(4, 20, 35, 0.26) 0 1px, transparent 1px 8px),
        var(--stack-color, #ffd24a);
}

.port-stack::before,
.port-stack::after,
.port-cable::before,
.port-cable::after {
    position: absolute;
    content: "";
}

.port-stack::before {
    inset: 3px 5px;
    border-left: 1px solid rgba(4, 20, 38, 0.28);
    border-right: 1px solid rgba(4, 20, 38, 0.28);
    box-shadow: 11px 0 0 -10px rgba(4, 20, 38, 0.42);
}

.port-stack::after {
    right: 4px;
    bottom: 3px;
    left: 4px;
    height: 2px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.28);
}

.port-stack--one {
    right: 8px;
    --stack-color: #ffd24a;
}

.port-stack--two {
    right: 30px;
    bottom: 19px;
    --stack-color: #7ee4ff;
}

.port-cable {
    position: absolute;
    top: 24px;
    right: 42px;
    z-index: 4;
    width: 2px;
    height: 70px;
    border-radius: 99px;
    background: linear-gradient(180deg, rgba(255, 210, 74, 0.05), rgba(255, 210, 74, 0.9));
    box-shadow: 0 0 12px rgba(255, 210, 74, 0.36);
    opacity: 0;
    transform-origin: top center;
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.port-cable::before {
    top: 58px;
    left: -7px;
    width: 16px;
    height: 10px;
    border: 2px solid rgba(255, 210, 74, 0.78);
    border-top: 0;
    border-radius: 0 0 8px 8px;
}

.port-cable::after {
    top: 52px;
    left: -5px;
    width: 12px;
    height: 7px;
    border-radius: 2px;
    background: rgba(236, 250, 255, 0.86);
}

.route-scene--extended[data-stage="port"] .mod-port--origin .port-cable,
.route-scene--extended[data-stage="unload"] .mod-port--destination .port-cable {
    opacity: 1;
    transform: scaleY(1.08);
}

.mod-customs {
    left: 46%;
    top: calc(var(--row-arrival) - 10%);
    z-index: 14;
    width: 72px;
    height: 78px;
    opacity: 0;
    transition: opacity 0.35s ease, filter 0.35s ease;
}

.route-scene--extended[data-stage="customs"] .mod-customs {
    opacity: 0.94;
    filter: drop-shadow(0 0 16px rgba(157, 255, 207, 0.24));
}

.customs-gate {
    position: absolute;
    inset: 0 8px;
    border: 5px solid rgba(157, 255, 207, 0.48);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}

.customs-gate::before,
.customs-gate::after,
.customs-scan::after {
    position: absolute;
    content: "";
}

.customs-gate::before {
    top: -12px;
    left: 4px;
    width: 44px;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, rgba(157, 255, 207, 0.78), rgba(126, 228, 255, 0.5));
    box-shadow: 0 0 12px rgba(157, 255, 207, 0.18);
}

.customs-gate::after {
    right: 6px;
    bottom: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #9dffcf;
    box-shadow:
        -12px 0 0 #ffd24a,
        -24px 0 0 #cb312e;
}

.customs-scan {
    position: absolute;
    top: 11px;
    left: 12px;
    width: 10px;
    height: 58px;
    border-radius: 99px;
    background: rgba(157, 255, 207, 0.72);
    filter: drop-shadow(0 0 14px rgba(157, 255, 207, 0.66));
    opacity: 0;
}

.customs-scan::after {
    top: 8px;
    left: 9px;
    width: 42px;
    height: 42px;
    background: linear-gradient(90deg, rgba(157, 255, 207, 0.26), transparent);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.mod-recipient {
    left: 4%;
    top: calc(var(--row-arrival) - 12%);
    z-index: 13;
    width: 94px;
    height: 92px;
    opacity: 0;
    transition: opacity 0.35s ease, filter 0.35s ease;
}

.route-scene--extended[data-stage="receiver"] .mod-recipient,
.route-scene--extended[data-stage="final"] .mod-recipient {
    opacity: 0.92;
    filter: drop-shadow(0 0 16px rgba(126, 228, 255, 0.18));
}

.recipient-building,
.recipient-dock,
.recipient-pin {
    position: absolute;
    display: block;
}

.recipient-building {
    right: 10px;
    bottom: 20px;
    width: 56px;
    height: 40px;
    border: 1px solid rgba(236, 250, 255, 0.42);
    border-radius: 7px 7px 3px 3px;
    background:
        linear-gradient(90deg, transparent 44%, rgba(2, 12, 24, 0.32) 45% 55%, transparent 56%),
        linear-gradient(180deg, rgba(236, 250, 255, 0.88), rgba(86, 128, 143, 0.9));
}

.recipient-building::before,
.recipient-building::after,
.recipient-dock::after {
    position: absolute;
    content: "";
}

.recipient-building::before {
    top: 8px;
    left: 8px;
    width: 7px;
    height: 6px;
    border-radius: 1px;
    background: rgba(126, 228, 255, 0.42);
    box-shadow:
        13px 0 0 rgba(126, 228, 255, 0.34),
        26px 0 0 rgba(126, 228, 255, 0.34),
        0 12px 0 rgba(126, 228, 255, 0.26),
        26px 12px 0 rgba(126, 228, 255, 0.26);
}

.recipient-building::after {
    right: 7px;
    bottom: 4px;
    width: 16px;
    height: 11px;
    border-radius: 3px 3px 0 0;
    background: rgba(2, 12, 24, 0.5);
}

.recipient-dock {
    right: 4px;
    bottom: 12px;
    width: 76px;
    height: 10px;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(126, 228, 255, 0.28), rgba(255, 210, 74, 0.24));
}

.recipient-dock::after {
    right: 8px;
    bottom: 2px;
    left: 8px;
    height: 1px;
    background: rgba(236, 250, 255, 0.28);
    box-shadow: 0 -4px 0 rgba(236, 250, 255, 0.12);
}

.recipient-pin::before,
.recipient-pin::after {
    position: absolute;
    content: "";
}

.recipient-pin::before {
    left: 50%;
    bottom: -8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(157, 255, 207, 0.64);
    transform: translateX(-50%);
}

.recipient-pin::after {
    left: 5px;
    bottom: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(157, 255, 207, 0.82);
}

.recipient-pin {
    left: 8px;
    bottom: 18px;
    width: 18px;
    height: 26px;
    border: 3px solid rgba(157, 255, 207, 0.64);
    border-bottom: 0;
    border-radius: 99px 99px 0 0;
}

.mod-track {
    position: absolute;
    inset: 0;
    z-index: 5;
    height: auto;
    border-radius: 99px;
    pointer-events: none;
}

.mod-track-base,
.mod-track-progress,
.mod-track-pulse {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: inherit;
}

.mod-track-base {
    display: none;
}

.mod-track-progress {
    display: none;
    width: 0;
    background: linear-gradient(90deg, #7ee4ff, #ffd24a, #9dffcf);
    box-shadow: 0 0 18px rgba(255, 210, 74, 0.46);
}

.mod-track-pulse {
    display: none;
    width: 42px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
    filter: drop-shadow(0 0 12px rgba(255, 210, 74, 0.65));
    transform: translateX(-50%);
}

.route-lanes {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.route-lane,
.route-link {
    position: absolute;
    height: 4px;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(126, 228, 255, 0.18), rgba(255, 210, 74, 0.72), rgba(157, 255, 207, 0.42));
    box-shadow: 0 0 20px rgba(126, 228, 255, 0.22), 0 0 16px rgba(255, 210, 74, 0.18);
}

.route-link {
    display: block;
    height: 2px;
    opacity: 0.24;
    background: linear-gradient(90deg, rgba(126, 228, 255, 0.08), rgba(255, 210, 74, 0.24), rgba(157, 255, 207, 0.1));
    box-shadow: none;
}

.route-lane::after,
.route-link::after {
    position: absolute;
    inset: -5px 0;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.36), transparent);
    opacity: 0.38;
    filter: blur(5px);
}

.route-link::after {
    opacity: 0.08;
}

@keyframes flow-forward {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 16px 0;
    }
}

@keyframes flow-reverse {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -16px 0;
    }
}

.route-lane--quarry {
    top: var(--row-quarry);
    left: 4%;
    width: 86%;
}

.route-lane--prep {
    top: var(--row-prep);
    left: 10%;
    width: 80%;
}

.route-lane--sea {
    top: var(--row-sea);
    left: 10%;
    width: 80%;
}

.route-lane--arrival {
    top: var(--row-arrival);
    left: 4%;
    width: 86%;
}

.route-link--to-prep {
    top: var(--row-quarry);
    left: 90%;
    width: 11.3%;
    transform: rotate(90deg);
    transform-origin: left center;
    background: repeating-linear-gradient(90deg, rgba(126, 228, 255, 0.08) 0 8px, rgba(126, 228, 255, 0.35) 9px 16px);
    background-size: 16px 100%;
    animation: flow-forward 1.2s linear infinite;
}

.route-link--to-sea {
    top: var(--row-prep);
    left: 10%;
    width: 11.3%;
    transform: rotate(90deg);
    transform-origin: left center;
    background: repeating-linear-gradient(90deg, rgba(126, 228, 255, 0.08) 0 8px, rgba(126, 228, 255, 0.35) 9px 16px);
    background-size: 16px 100%;
    animation: flow-forward 1.2s linear infinite;
}

.route-link--to-arrival {
    top: var(--row-sea);
    left: 90%;
    width: 11.3%;
    transform: rotate(90deg);
    transform-origin: left center;
    background: repeating-linear-gradient(90deg, rgba(126, 228, 255, 0.08) 0 8px, rgba(126, 228, 255, 0.35) 9px 16px);
    background-size: 16px 100%;
    animation: flow-forward 1.2s linear infinite;
}

.route-link--to-loop {
    top: var(--row-quarry);
    left: 4%;
    width: 33.9%;
    transform: rotate(90deg);
    transform-origin: left center;
    background: repeating-linear-gradient(90deg, rgba(126, 228, 255, 0.08) 0 8px, rgba(255, 210, 74, 0.35) 9px 16px);
    background-size: 16px 100%;
    animation: flow-reverse 1.2s linear infinite;
}

.mod-station {
    position: absolute;
    top: var(--y, var(--track-y));
    left: var(--x);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, -50%);
}

.st-dot {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(126, 228, 255, 0.42);
    border-radius: 50%;
    background: #020a14;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    transition: border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
}

.st-label {
    position: absolute;
    left: 50%;
    z-index: 12;
    padding: 4px 7px;
    border: 1px solid rgba(126, 228, 255, 0.28);
    border-radius: 5px;
    color: rgba(236, 250, 255, 0.92);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    background: rgba(2, 12, 24, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    transform: translateX(-50%);
    transition: color 0.28s ease, opacity 0.35s ease, box-shadow 0.28s ease;
    opacity: 0;          /* hidden by default — only active stage label is shown */
    pointer-events: none;
}

.mod-station--top .st-label {
    bottom: 46px;
}

.mod-station--bottom .st-label {
    top: 27px;
}

.mod-station--receiver .st-label {
    right: -10px;
    left: auto;
    transform: none;
}

/* Active Logistics Stage glowing dot & label highlights */
@keyframes active-dot-pulse {
    0% {
        box-shadow: 0 0 8px #ffd24a, 0 0 16px rgba(255, 210, 74, 0.3);
        transform: scale(1.22);
    }
    50% {
        box-shadow: 0 0 16px #ffd24a, 0 0 32px rgba(255, 210, 74, 0.6);
        transform: scale(1.36);
    }
    100% {
        box-shadow: 0 0 8px #ffd24a, 0 0 16px rgba(255, 210, 74, 0.3);
        transform: scale(1.22);
    }
}

.route-scene[data-stage="quarry"] .mod-station--quarry .st-dot,
.route-scene[data-stage="excavator"] .mod-station--excavator .st-dot,
.route-scene[data-stage="dump"] .mod-station--dump .st-dot,
.route-scene[data-stage="factory"] .mod-station--factory .st-dot,
.route-scene[data-stage="bigbags"] .mod-station--bigbags .st-dot,
.route-scene[data-stage="container"] .mod-station--container .st-dot,
.route-scene[data-stage="barge"] .mod-station--barge .st-dot,
.route-scene[data-stage="port"] .mod-station--port .st-dot,
.route-scene[data-stage="sea"] .mod-station--sea .st-dot,
.route-scene[data-stage="unload"] .mod-station--unload .st-dot,
.route-scene[data-stage="customs"] .mod-station--customs .st-dot,
.route-scene[data-stage="final"] .mod-station--final .st-dot,
.route-scene[data-stage="receiver"] .mod-station--receiver .st-dot,
.route-scene.active-stage-quarry .mod-station--quarry .st-dot,
.route-scene.active-stage-excavator .mod-station--excavator .st-dot,
.route-scene.active-stage-dump .mod-station--dump .st-dot,
.route-scene.active-stage-factory .mod-station--factory .st-dot,
.route-scene.active-stage-bigbags .mod-station--bigbags .st-dot,
.route-scene.active-stage-container .mod-station--container .st-dot,
.route-scene.active-stage-barge .mod-station--barge .st-dot,
.route-scene.active-stage-port .mod-station--port .st-dot,
.route-scene.active-stage-sea .mod-station--sea .st-dot,
.route-scene.active-stage-unload .mod-station--unload .st-dot,
.route-scene.active-stage-customs .mod-station--customs .st-dot,
.route-scene.active-stage-final .mod-station--final .st-dot,
.route-scene.active-stage-receiver .mod-station--receiver .st-dot {
    border-color: #ffd24a;
    background: #ffd24a;
    animation: active-dot-pulse 1.8s infinite ease-in-out;
}

.route-scene[data-stage="quarry"] .mod-station--quarry .st-label,
.route-scene[data-stage="excavator"] .mod-station--excavator .st-label,
.route-scene[data-stage="dump"] .mod-station--dump .st-label,
.route-scene[data-stage="factory"] .mod-station--factory .st-label,
.route-scene[data-stage="bigbags"] .mod-station--bigbags .st-label,
.route-scene[data-stage="container"] .mod-station--container .st-label,
.route-scene[data-stage="barge"] .mod-station--barge .st-label,
.route-scene[data-stage="port"] .mod-station--port .st-label,
.route-scene[data-stage="sea"] .mod-station--sea .st-label,
.route-scene[data-stage="unload"] .mod-station--unload .st-label,
.route-scene[data-stage="customs"] .mod-station--customs .st-label,
.route-scene[data-stage="final"] .mod-station--final .st-label,
.route-scene[data-stage="receiver"] .mod-station--receiver .st-label,
.route-scene.active-stage-quarry .mod-station--quarry .st-label,
.route-scene.active-stage-excavator .mod-station--excavator .st-label,
.route-scene.active-stage-dump .mod-station--dump .st-label,
.route-scene.active-stage-factory .mod-station--factory .st-label,
.route-scene.active-stage-bigbags .mod-station--bigbags .st-label,
.route-scene.active-stage-container .mod-station--container .st-label,
.route-scene.active-stage-barge .mod-station--barge .st-label,
.route-scene.active-stage-port .mod-station--port .st-label,
.route-scene.active-stage-sea .mod-station--sea .st-label,
.route-scene.active-stage-unload .mod-station--unload .st-label,
.route-scene.active-stage-customs .mod-station--customs .st-label,
.route-scene.active-stage-final .mod-station--final .st-label,
.route-scene.active-stage-receiver .mod-station--receiver .st-label {
    color: #ffd24a;
    border-color: rgba(255, 210, 74, 0.38);
    background: rgba(4, 20, 38, 0.88);
    opacity: 1;          /* only the currently-active station label is visible */
}

.mod-cargo {
    position: absolute;
    top: var(--track-y);
    left: 5%;
    z-index: 24;
    display: grid;
    width: 58px;
    height: 28px;
    place-items: center;
    border-right: 3px solid #fff;
    border-left: 3px solid #fff;
    border-radius: 3px;
    color: #041426;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
    background:
        repeating-linear-gradient(90deg, rgba(4, 20, 38, 0.18) 0 1px, transparent 1px 9px),
        linear-gradient(135deg, #ffd24a, #e3aa26);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 16px rgba(255, 210, 74, 0.42);
    transform: translate(calc(-50% + var(--x, 0px)), calc(-118% + var(--y, 0px))) rotate(var(--r, 0deg)) scale(var(--cargo-scale, 1));
    will-change: left, transform, opacity;
}

.mod-cargo--pipeline {
    pointer-events: none;
}

.mod-cargo.is-raw {
    width: 32px;
    height: 21px;
    border: 0;
    border-radius: 52% 48% 44% 56%;
    color: #f8edc4;
    background:
        radial-gradient(circle at 18% 62%, rgba(255, 210, 74, 0.34), transparent 20%),
        radial-gradient(circle at 39% 34%, rgba(232, 198, 126, 0.52), transparent 18%),
        radial-gradient(circle at 67% 58%, rgba(255, 255, 255, 0.16), transparent 16%),
        linear-gradient(135deg, #8a643a, #39423d);
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.36), 0 0 14px rgba(255, 210, 74, 0.16);
}

.mod-cargo.is-raw span {
    display: none;
}

.mod-cargo.is-bag {
    width: 46px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 11px 11px 7px 7px;
    color: #4c4322;
    background:
        linear-gradient(90deg, transparent 43%, rgba(4, 20, 38, 0.18) 44% 56%, transparent 57%),
        linear-gradient(180deg, #f4f0d0, #d2c27f);
}

.mod-cargo.is-bag span {
    display: none;
}

.mod-cargo.is-container {
    width: 58px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    background:
        repeating-linear-gradient(90deg,
            rgba(0, 0, 0, 0.15) 0 2px,
            transparent 2px 6px,
            rgba(255, 255, 255, 0.08) 6px 7px),
        linear-gradient(180deg, #2a5298 0%, #1e3c72 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 4px 10px rgba(0, 0, 0, 0.35);
}

.mod-cargo.is-container::before,
.mod-cargo.is-container::after {
    position: absolute;
    content: "";
}

/* Reinforced Corner Castings */
.mod-cargo.is-container::before {
    position: absolute;
    inset: -1px;
    background:
        /* Top-Left */
        linear-gradient(90deg, #1a252f 4px, transparent 4px) 0 0 / 100% 100%,
        linear-gradient(180deg, #1a252f 4px, transparent 4px) 0 0 / 100% 100%,
        /* Top-Right */
        linear-gradient(270deg, #1a252f 4px, transparent 4px) 100% 0 / 100% 100%,
        linear-gradient(180deg, #1a252f 4px, transparent 4px) 100% 0 / 100% 100%,
        /* Bottom-Left */
        linear-gradient(90deg, #1a252f 4px, transparent 4px) 0 100% / 100% 100%,
        linear-gradient(0deg, #1a252f 4px, transparent 4px) 0 100% / 100% 100%,
        /* Bottom-Right */
        linear-gradient(270deg, #1a252f 4px, transparent 4px) 100% 100% / 100% 100%,
        linear-gradient(0deg, #1a252f 4px, transparent 4px) 100% 100% / 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Dual Door Locking Bars (Rods) */
.mod-cargo.is-container::after {
    top: 3px;
    bottom: 3px;
    right: 8px;
    width: 8px;
    background: linear-gradient(90deg, transparent 2px, #bdc3c7 2px, #bdc3c7 3px, transparent 3px, transparent 5px, #bdc3c7 5px, #bdc3c7 6px, transparent 6px);
}

.mod-cargo.is-container span {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    font-size: 8px;
    font-family: monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    transform: translateY(-1px);
}

.mod-vehicle {
    position: absolute;
    top: var(--track-y);
    left: 0;
    z-index: 16;
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.96);
    will-change: left, opacity, transform;
}

.mod-truck--final {
    z-index: 21;
}

.mod-truck {
    width: 142px;
    height: 54px;
}

/* Cab wind deflector / spoiler */
.mod-truck::before {
    position: absolute;
    right: 14px;
    bottom: 47px;
    width: 24px;
    height: 6px;
    content: "";
    background: linear-gradient(180deg, #ffffff, #cfd8dc);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 4px 10px 0 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    z-index: 5;
}

.truck-shadow,
.truck-chassis,
.truck-trailer,
.truck-cab,
.truck-wheel,
.truck-bumper,
.truck-exhaust,
.truck-headlight,
.truck-taillight,
.truck-mudflap {
    position: absolute;
    display: block;
}

.truck-shadow::before,
.truck-shadow::after,
.truck-chassis::before,
.truck-chassis::after,
.truck-trailer::before,
.truck-trailer::after,
.truck-cab::before,
.truck-cab::after,
.truck-wheel::before,
.truck-wheel::after,
.truck-bumper::before,
.truck-bumper::after,
.truck-exhaust::before,
.truck-exhaust::after {
    position: absolute;
    content: "";
}

/* — Shadow — */
.truck-shadow {
    right: 6px;
    bottom: -2px;
    left: 8px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45), transparent 72%);
    filter: blur(2px);
    opacity: 0.85;
}

/* — Chassis frame — */
.truck-chassis {
    left: 6px;
    right: 10px;
    bottom: 11px;
    height: 8px;
    border-radius: 2px;
    background: linear-gradient(180deg, #243542, #0d1720);
    box-shadow:
        inset 0 2px 0 rgba(236, 250, 255, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.35);
}

.truck-chassis::before {
    position: absolute;
    right: 36px;
    bottom: -3px;
    width: 22px;
    height: 6px;
    content: "";
    border-radius: 2px;
    background: linear-gradient(180deg, #eceff1 0 30%, #37474f 35% 65%, #eceff1 70% 100%);
    border: 1px solid #546e7a;
    box-shadow:
        inset 0 1px 0 #fff,
        0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Lateral underrun safety guards */
.truck-chassis::after {
    position: absolute;
    left: 36px;
    width: 52px;
    bottom: -5px;
    height: 4px;
    content: "";
    background: repeating-linear-gradient(90deg, #3a4b56 0 2px, transparent 2px 25px), #18222a;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* — Skeletal red chassis trailer — */
.truck-trailer {
    left: 4px;
    bottom: 14px;
    width: 86px;
    height: 7px;
    border: none;
    border-radius: 1px;
    background: #c0392b;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.35);
}

/* Chassis coupling detailing */
.truck-trailer::before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    content: "";
    background: rgba(255, 255, 255, 0.15);
}

/* Red/white diagonal reflective warning tape along chassis */
.truck-trailer::after {
    right: 6px;
    top: 2px;
    left: 6px;
    height: 2px;
    border-radius: 99px;
    background: repeating-linear-gradient(-45deg, #e62c2c 0 4px, #ffffff 4px 8px);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}

/* Trailer landing gear support legs */
.truck-trailer > span {
    position: absolute;
    top: 7px;
    width: 4px;
    height: 9px;
    background: linear-gradient(90deg, #34495e, #1a252f);
    border-radius: 0 0 1px 1px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.truck-trailer > span::after {
    position: absolute;
    bottom: 0;
    left: -2px;
    width: 8px;
    height: 2px;
    content: "";
    background: #111;
    border-radius: 1px;
}

.truck-trailer > span:first-child { left: 28px; }
.truck-trailer > span:last-of-type { left: 56px; }

/* Container locking twistlock pins on top of chassis */
.trailer-pin {
    position: absolute;
    top: -4px;
    width: 4px;
    height: 4px;
    border-radius: 1px;
    background: linear-gradient(180deg, #a1b4be, #4a5c66);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.trailer-pin--a { left: 12px; }
.trailer-pin--b { right: 12px; }

/* — Cab — */
.truck-cab {
    right: 8px;
    bottom: 14px;
    width: 38px;
    height: 33px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 8px 10px 4px 4px;
    background:
        linear-gradient(128deg, rgba(255, 255, 255, 0.86) 0 22%, transparent 23%),
        linear-gradient(135deg, #f0fdff 0%, #1eabd4 52%, #1181a7 100%);
    clip-path: polygon(6% 0, 85% 0, 100% 28%, 100% 100%, 0 100%, 0 22%);
    box-shadow:
        inset -5px -5px 0 rgba(4, 20, 38, 0.15),
        0 5px 12px rgba(0, 0, 0, 0.25);
}

/* Windshield with sun visor and marker lights */
.truck-cab > span {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 19px;
    height: 12px;
    border-radius: 4px 6px 2px 2px;
    border: 1px solid rgba(126, 228, 255, 0.3);
    background:
        linear-gradient(90deg, transparent 10px, #1a252f 10px, #1a252f 12px, transparent 12px),
        linear-gradient(165deg, rgba(255, 255, 255, 0.95), rgba(114, 214, 245, 0.88) 48%, rgba(26, 150, 188, 0.78));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Sun Visor */
.truck-cab > span::before {
    position: absolute;
    top: -3px;
    left: -2px;
    right: -2px;
    height: 3px;
    content: "";
    background: #11212d;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    border-radius: 2px 2px 0 0;
}

/* Roof Marker Amber Lights */
.truck-cab > span::after {
    position: absolute;
    top: -5px;
    right: 4px;
    width: 2px;
    height: 2px;
    content: "";
    background: #ffd24a;
    box-shadow:
        -4px 0 2px #ffd24a,
        4px 0 2px #ffd24a,
        0 0 4px #ffd24a;
    border-radius: 50%;
}

/* Side vent / grille on cab */
.truck-cab::before {
    left: 4px;
    bottom: 5px;
    width: 14px;
    height: 7px;
    border-radius: 2px;
    background:
        repeating-linear-gradient(90deg, rgba(236, 250, 255, 0.6) 0 1px, transparent 1px 3px),
        rgba(4, 20, 38, 0.42);
}

/* Door handle */
.truck-cab::after {
    right: 5px;
    bottom: 10px;
    width: 8px;
    height: 2px;
    border-radius: 99px;
    background: rgba(236, 250, 255, 0.82);
}

/* Mirror */
.truck-mirror {
    position: absolute;
    right: -5px;
    top: 5px;
    width: 3px;
    height: 8px;
    border-radius: 1px;
    background: linear-gradient(180deg, #d2f0fa, #5b8394);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* — Bumper with chrome detailing — */
.truck-bumper {
    right: 3px;
    bottom: 11px;
    width: 12px;
    height: 16px;
    border-radius: 2px 3px 3px 2px;
    background:
        linear-gradient(180deg, rgba(236, 250, 255, 0.72), rgba(136, 186, 204, 0.64));
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.truck-bumper::before {
    bottom: 4px;
    left: 2px;
    right: 2px;
    height: 2px;
    border-radius: 99px;
    background: rgba(236, 250, 255, 0.55);
}

/* Chrome Grille pattern on bumper */
.truck-bumper::after {
    position: absolute;
    left: 2px;
    top: 2px;
    bottom: 2px;
    width: 3px;
    content: "";
    background: repeating-linear-gradient(180deg, #ffffff 0 2px, #425866 2px 4px);
    border-radius: 1px;
}

/* — Exhaust stack — */
.truck-exhaust {
    right: 39px;
    bottom: 38px;
    width: 4px;
    height: 18px;
    border-radius: 99px 99px 0 0;
    background: linear-gradient(90deg, #24323b, #a1b1b8, #202d36);
}

.truck-exhaust::before {
    top: -3px;
    left: -2px;
    width: 8px;
    height: 4px;
    border-radius: 50%;
    background: rgba(236, 250, 255, 0.55);
}

/* Exhaust smoke */
.truck-exhaust > i {
    position: absolute;
    top: -10px;
    left: -6px;
    width: 16px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(190, 215, 225, 0.22), transparent 72%);
    animation: truck-smoke 2.4s ease-out infinite;
}

@keyframes truck-smoke {
    0% {
        opacity: 0.38;
        transform: translate(0, 0) scale(0.6);
    }
    50% {
        opacity: 0.18;
    }
    100% {
        opacity: 0;
        transform: translate(-8px, -12px) scale(1.7);
    }
}

/* — Headlight — */
.truck-headlight {
    right: 1px;
    bottom: 27px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fffae0;
    box-shadow:
        0 0 8px rgba(255, 240, 180, 0.85),
        0 0 16px rgba(255, 210, 74, 0.42);
}

/* — Tail light — */
.truck-taillight {
    left: 2px;
    bottom: 14px;
    width: 3px;
    height: 8px;
    border-radius: 1px;
    background: linear-gradient(180deg, #ff9800 0 30%, #e53935 35% 100%);
    box-shadow:
        0 0 6px rgba(229, 57, 53, 0.8),
        0 0 2px rgba(255, 152, 0, 0.5);
}

/* — Mud flaps — */
.truck-mudflap {
    bottom: 6px;
    width: 3px;
    height: 8px;
    border-radius: 0 0 1px 1px;
    background: #151515;
    opacity: 0.85;
}

.truck-mudflap--a { left: 34px; }
.truck-mudflap--b { right: 24px; }

/* — Chrome wheels with detailed rims and spokes — */
.truck-wheel {
    bottom: 3px;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(16, 34, 46, 0.88);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(195, 225, 240, 0.82) 0 14%,
            #1e2d38 15% 32%,
            #040a0f 33% 100%);
    box-shadow:
        inset 0 0 0 2px rgba(236, 250, 255, 0.12),
        0 3px 7px rgba(0, 0, 0, 0.42);
    animation: wheel-spin 0.7s linear infinite;
    animation-play-state: paused;
}

.mod-vehicle.is-moving .truck-wheel {
    animation-play-state: running;
}

.truck-wheel::before {
    inset: 2px;
    border: 1px solid rgba(236, 250, 255, 0.44);
    border-radius: 50%;
    background: radial-gradient(circle at center, #ffffff 0 22%, transparent 28%);
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.75);
}

.truck-wheel::after {
    inset: 4px;
    border-radius: 50%;
    background:
        conic-gradient(from 0deg, 
            #ffffff 0 10deg, transparent 10deg 45deg, 
            #ffffff 45deg 55deg, transparent 55deg 90deg, 
            #ffffff 90deg 100deg, transparent 100deg 135deg, 
            #ffffff 135deg 145deg, transparent 145deg 180deg, 
            #ffffff 180deg 190deg, transparent 190deg 225deg, 
            #ffffff 225deg 235deg, transparent 235deg 270deg, 
            #ffffff 270deg 280deg, transparent 280deg 315deg, 
            #ffffff 315deg 325deg, transparent 325deg 360deg),
        #1e2b35;
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.85);
}

/* Double rear axle */
.truck-wheel--a { left: 16px; }
.truck-wheel--a2 { left: 28px; }
.truck-wheel--b { right: 18px; }
.truck-wheel--c { right: 6px; }

.mod-ship {
    width: 176px;
    height: 82px;
}

.ship-hull,
.ship-bridge,
.ship-deck,
.ship-wake {
    position: absolute;
    display: block;
}

.ship-hull {
    right: 4px;
    bottom: 12px;
    left: 4px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    clip-path: polygon(0 0, 86% 0, 100% 32%, 87% 100%, 13% 100%);
    background: linear-gradient(180deg, #f4fdff 0 58%, #cb312e 59% 100%);
}

.ship-hull::before,
.ship-hull::after,
.ship-deck span::before,
.ship-bridge::before,
.ship-bridge::after,
.barge-load::before,
.barge-load::after,
.barge-hull::before,
.barge-hull::after {
    position: absolute;
    content: "";
}

.ship-hull::before {
    top: 9px;
    left: 24px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(22, 134, 169, 0.72);
    box-shadow:
        17px 0 0 rgba(22, 134, 169, 0.62),
        34px 0 0 rgba(22, 134, 169, 0.62),
        51px 0 0 rgba(22, 134, 169, 0.62);
}

.ship-hull::after {
    right: 14px;
    bottom: 10px;
    left: 18px;
    height: 2px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.5);
}

.ship-deck {
    left: 44px;
    bottom: 52px;
    width: 92px;
    height: 22px;
    display: flex;
    gap: 3px;
    opacity: 0;
    transition: opacity 0.32s ease;
}

.route-scene--extended[data-stage="port"] .ship-deck,
.route-scene--extended[data-stage="sea"] .ship-deck,
.route-scene--extended[data-stage="unload"] .ship-deck,
.route-scene--extended.active-stage-port .ship-deck,
.route-scene--extended.active-stage-sea .ship-deck,
.route-scene--extended.active-stage-unload .ship-deck {
    opacity: 1;
}

.ship-deck span {
    position: relative;
    flex: 1;
    border-radius: 2px;
    background: #7ee4ff;
}

.ship-deck span::before {
    inset: 4px 5px;
    border-left: 1px solid rgba(4, 20, 38, 0.25);
    border-right: 1px solid rgba(4, 20, 38, 0.25);
}

.ship-deck span:nth-child(2) { visibility: hidden; }
.ship-deck span:nth-child(3) { background: #9dffcf; }

.ship-bridge {
    right: 48px;
    bottom: 73px;
    width: 42px;
    height: 20px;
    border-radius: 4px 4px 1px 1px;
    background: #f4fdff;
}

.ship-bridge::before {
    top: -16px;
    left: 20px;
    width: 3px;
    height: 17px;
    border-radius: 99px;
    background: rgba(236, 250, 255, 0.92);
    box-shadow: 0 -2px 6px #fff, 0 -2px 12px rgba(255, 255, 255, 0.8);
}

.ship-bridge::after {
    top: -16px;
    left: 17px;
    width: 18px;
    height: 8px;
    border-top: 2px solid rgba(126, 228, 255, 0.82);
    border-radius: 50%;
}

.ship-bridge span {
    position: absolute;
    top: 5px;
    width: 6px;
    height: 4px;
    border-radius: 1px;
    background: #1686a9;
}

.ship-bridge span:first-child { left: 8px; }
.ship-bridge span:last-child { right: 8px; }

.ship-wake {
    left: -26px;
    bottom: 14px;
    width: 62px;
    height: 16px;
    border-bottom: 3px solid rgba(126, 228, 255, 0.5);
    border-radius: 50%;
    opacity: 0.6;
    animation: ship-wake 2.8s linear infinite;
}

.mod-barge {
    width: 138px;
    height: 52px;
}

.barge-load,
.barge-hull,
.barge-wake {
    position: absolute;
    display: block;
}

.barge-load {
    left: 28px;
    bottom: 34px;
    width: 80px;
    height: 22px;
    border: 1px solid rgba(255, 255, 255, 0.54);
    border-radius: 3px;
    background:
        repeating-linear-gradient(90deg, rgba(4, 20, 38, 0.24) 0 1px, transparent 1px 10px),
        linear-gradient(90deg, #ffd24a 0 33%, transparent 33% 67%, #9dffcf 67% 100%);
    opacity: 0;
    transition: opacity 0.32s ease;
}

.route-scene--extended[data-stage="barge"] .barge-load,
.route-scene--extended[data-stage="port"] .barge-load {
    opacity: 1;
}

.barge-load::before {
    inset: 4px 7px;
    border-left: 1px solid rgba(4, 20, 38, 0.28);
    border-right: 1px solid rgba(4, 20, 38, 0.28);
    box-shadow:
        18px 0 0 -17px rgba(4, 20, 38, 0.42),
        37px 0 0 -36px rgba(4, 20, 38, 0.42);
}

.barge-load::after {
    right: 5px;
    bottom: 4px;
    left: 5px;
    height: 2px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.34);
}

.barge-hull {
    right: 4px;
    bottom: 10px;
    left: 4px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: 3px;
    background: linear-gradient(180deg, #dceef2 0 36%, #936038 37% 100%);
    clip-path: polygon(0 0, 94% 0, 100% 44%, 88% 100%, 8% 100%);
}

.barge-hull::before {
    left: 20px;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(126, 228, 255, 0.46);
    box-shadow:
        18px 0 0 rgba(126, 228, 255, 0.34),
        36px 0 0 rgba(126, 228, 255, 0.34),
        54px 0 0 rgba(126, 228, 255, 0.34);
}

.barge-hull::after {
    right: 14px;
    bottom: 6px;
    left: 14px;
    height: 2px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.32);
}

.barge-wake {
    left: -22px;
    bottom: 11px;
    width: 56px;
    height: 14px;
    border-bottom: 3px solid rgba(126, 228, 255, 0.42);
    border-radius: 50%;
    opacity: 0.6;
    animation: ship-wake 2.4s linear infinite;
}

.route-operations {
    position: absolute;
    right: 16px;
    bottom: 16px;
    left: 16px;
    z-index: 4;
    display: none;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.route-operations span {
    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    min-height: 46px;
    align-items: center;
    gap: 7px;
    padding: 8px 9px;
    overflow: hidden;
    border: 1px solid rgba(126, 228, 255, 0.24);
    border-radius: 8px;
    color: #eefaff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.12;
    text-transform: uppercase;
    background: linear-gradient(180deg, rgba(3, 15, 31, 0.78), rgba(4, 27, 48, 0.58));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
    opacity: 0.78;
    backdrop-filter: blur(10px);
    transition: border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease, opacity 0.28s ease, transform 0.28s ease;
}

.route-operations span::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, var(--logi-gold), var(--logi-green), var(--logi-cyan));
    opacity: 0;
    transform: scaleX(var(--step-progress, 0));
    transform-origin: left;
    transition: transform 0.16s linear, opacity 0.2s ease;
}

.route-operations b {
    color: var(--logi-gold);
    font-size: 10px;
    letter-spacing: 0.08em;
}

.route-operations i {
    width: 16px;
    color: var(--logi-cyan);
    font-size: 15px;
    text-align: center;
}

.calculator-section {
    display: grid;
    gap: 20px;
}

.calc-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--logi-line);
    border-radius: 8px;
    background: var(--logi-panel-strong);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.calc-panel label {
    display: grid;
    gap: 8px;
    color: var(--logi-muted);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.calc-panel input,
.calc-panel select {
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid rgba(162, 217, 255, 0.28);
    border-radius: 8px;
    color: var(--logi-ink);
    background: rgba(2, 11, 23, 0.58);
    font: inherit;
    outline: none;
}

.calc-panel input:focus,
.calc-panel select:focus {
    border-color: rgba(126, 228, 255, 0.78);
    box-shadow: 0 0 0 3px rgba(126, 228, 255, 0.12);
}

.calc-panel button {
    min-height: 56px;
    align-self: end;
    border: 1px solid rgba(255, 210, 74, 0.42);
    border-radius: 8px;
    color: #06131f;
    font-size: 15px;
    font-weight: 900;
    background: linear-gradient(90deg, #ffd24a, #9dffcf);
    cursor: pointer;
}

.calc-result {
    display: grid;
    grid-column: span 3;
    gap: 6px;
    min-height: 56px;
    align-content: center;
    padding: 12px 16px;
    border: 1px solid rgba(126, 228, 255, 0.22);
    border-radius: 8px;
    color: var(--logi-muted);
    background: rgba(2, 11, 23, 0.44);
}

.calc-result strong {
    color: var(--logi-ink);
    font-size: clamp(22px, 2.4vw, 34px);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.process-grid article {
    display: grid;
    min-height: 240px;
    gap: 12px;
    align-content: start;
    padding: 20px;
    border: 1px solid var(--logi-line);
    border-radius: 8px;
    background: var(--logi-panel);
}

.contact-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.86fr);
    gap: 28px;
    align-items: center;
    padding-bottom: 96px;
}

.contact-copy {
    display: grid;
    gap: 16px;
}

.contact-actions {
    display: grid;
    gap: 12px;
}

.contact-actions a,
.contact-actions span {
    display: flex;
    min-height: 62px;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--logi-line);
    border-radius: 8px;
    color: var(--logi-ink);
    text-decoration: none;
    background: var(--logi-panel-strong);
}

.contact-actions i {
    color: var(--logi-cyan);
    font-size: 22px;
}

.logistics-footer {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 0 38px;
    color: var(--logi-muted);
}

.logistics-footer a {
    color: var(--logi-cyan);
    text-decoration: none;
}

[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity 0.74s ease, transform 0.74s ease;
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@keyframes route-grid-drift {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(40px, 40px, 0);
    }
}

@keyframes sea-shimmer {
    0% {
        background-position: 0 0, 0 0;
    }
    100% {
        background-position: 96px 0, 0 0;
    }
}

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

@keyframes bench-shock {
    0%,
    18% {
        opacity: 0.48;
        filter: none;
        transform: translate3d(0, 0, 0) rotate(var(--bench-rot, -7deg));
    }
    24% {
        opacity: 1;
        filter: drop-shadow(0 0 10px rgba(255, 210, 74, 0.52));
        transform: translate3d(7px, -2px, 0) rotate(calc(var(--bench-rot, -7deg) + 3deg));
    }
    42% {
        opacity: 0.72;
        transform: translate3d(-3px, 2px, 0) rotate(calc(var(--bench-rot, -7deg) - 2deg));
    }
    100% {
        opacity: 0.48;
        filter: none;
        transform: translate3d(0, 0, 0) rotate(var(--bench-rot, -7deg));
    }
}

@keyframes quarry-blast-shell {
    0%,
    12% {
        opacity: 0;
    }
    16%,
    68% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes quarry-blast-flash {
    0%,
    14% {
        opacity: 0;
        transform: scale(0.2);
    }
    18% {
        opacity: 1;
        transform: scale(1.7);
    }
    28% {
        opacity: 0.46;
        transform: scale(2.55);
    }
    48%,
    100% {
        opacity: 0;
        transform: scale(3.25);
    }
}

@keyframes quarry-blast-plume {
    0%,
    16% {
        opacity: 0;
        transform: translateY(24px) scale(0.42);
    }
    34% {
        opacity: 0.82;
        transform: translateY(-16px) scale(1.04);
    }
    70% {
        opacity: 0.46;
        transform: translateY(-26px) scale(1.42);
    }
    100% {
        opacity: 0;
        transform: translateY(-18px) scale(1.75);
    }
}

@keyframes quarry-rock-throw {
    0%,
    15% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    26% {
        opacity: 1;
        transform: translate3d(calc(var(--blast-x) * 0.45), calc(var(--blast-y) * 0.74), 0) rotate(calc(var(--blast-rot) * 0.7));
    }
    72% {
        opacity: 0.74;
        transform: translate3d(var(--blast-x), calc(var(--blast-y) + 30px), 0) rotate(calc(var(--blast-rot) * 1.8));
    }
    100% {
        opacity: 0;
        transform: translate3d(calc(var(--blast-x) * 1.05), 44px, 0) rotate(calc(var(--blast-rot) * 2.4));
    }
}

@keyframes quarry-dust-roll {
    0%,
    18% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.56);
    }
    38% {
        opacity: 0.78;
        transform: translate3d(-18px, -4px, 0) scale(1.05);
    }
    76% {
        opacity: 0.48;
        transform: translate3d(22px, -1px, 0) scale(1.55);
    }
    100% {
        opacity: 0;
        transform: translate3d(36px, 0, 0) scale(1.82);
    }
}

@keyframes quarry-heap-settle {
    0%,
    18% {
        transform: translate3d(0, 0, 0) scale(0.96);
        filter: brightness(0.95);
    }
    24% {
        transform: translate3d(6px, -5px, 0) scale(1.14);
        filter: brightness(1.28);
    }
    54% {
        transform: translate3d(-2px, 2px, 0) scale(1.03);
        filter: brightness(1);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: brightness(1);
    }
}

@keyframes ship-wake {
    0% {
        opacity: 0.24;
        transform: translateX(0) scaleX(0.7);
    }
    50% {
        opacity: 0.72;
    }
    100% {
        opacity: 0.24;
        transform: translateX(-22px) scaleX(1.08);
    }
}

@keyframes conveyor-move {
    0% {
        background-position: 0 0, 0 0;
    }
    100% {
        background-position: 40px 0, 0 0;
    }
}

@keyframes wave-drift {
    0%,
    100% {
        opacity: 0.42;
        transform: translate3d(-8px, 0, 0) scaleX(0.96);
    }
    50% {
        opacity: 0.72;
        transform: translate3d(8px, 2px, 0) scaleX(1.03);
    }
}

@keyframes buoy-bob {
    0%,
    100% {
        transform: translate3d(0, -2px, 0) rotate(-2deg);
    }
    50% {
        transform: translate3d(0, 3px, 0) rotate(2deg);
    }
}

@keyframes stack-vapor {
    0%,
    100% {
        opacity: 0.12;
        transform: translate3d(0, 5px, 0) scale(0.7);
    }
    50% {
        opacity: 0.36;
        transform: translate3d(8px, -10px, 0) scale(1.15);
    }
}

@keyframes gauge-blink {
    0%,
    100% {
        opacity: 0.62;
        filter: saturate(0.9);
    }
    44% {
        opacity: 1;
        filter: saturate(1.35);
    }
}

@keyframes spreader-sway {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-1.4deg);
    }
    50% {
        transform: translate3d(2px, 1px, 0) rotate(1.6deg);
    }
}

@keyframes tug-drift {
    0%,
    100% {
        transform: translate3d(-5px, -1px, 0);
    }
    50% {
        transform: translate3d(5px, 2px, 0);
    }
}

@keyframes material-fall {
    0% {
        opacity: 0;
        transform: translate3d(0, -8px, 0) rotate(0deg);
    }
    28% {
        opacity: 0.86;
    }
    100% {
        opacity: 0;
        transform: translate3d(28px, 66px, 0) rotate(330deg);
    }
}

@keyframes material-stream {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0;
    }
    100% {
        background-position: 1px 18px, -2px 24px, 2px 22px, 0 0;
    }
}

@keyframes haul-dust {
    0%,
    100% {
        opacity: 0.08;
        transform: translate3d(18px, 0, 0) scale(0.62);
    }
    45% {
        opacity: 0.48;
        transform: translate3d(-10px, -4px, 0) scale(1.12);
    }
}

@keyframes factory-dump-stream {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    }
    100% {
        background-position: -2px 18px, 3px 24px, -1px 22px, 4px 18px, 0 26px, 0 0;
    }
}

@keyframes factory-dump-pile {
    0%,
    100% {
        filter: brightness(0.94);
        transform: scaleX(calc(0.46 + var(--factory-dump-discharge, 0) * 0.54)) scaleY(0.92);
    }
    48% {
        filter: brightness(1.12);
        transform: scaleX(calc(0.5 + var(--factory-dump-discharge, 0) * 0.58)) scaleY(1.05);
    }
}

@keyframes factory-dump-rock {
    0% {
        top: 26px;
        transform: translateX(0) rotate(0deg);
    }
    100% {
        top: calc(100% - 14px);
        transform: translateX(-28px) rotate(310deg);
    }
}

@keyframes process-pellet {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.7);
    }
    12%,
    82% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
        transform: translate3d(132px, 0, 0) scale(1);
    }
}

@keyframes bag-fill-stream {
    0%,
    100% {
        opacity: 0.28;
        transform: scaleY(0.58);
    }
    45% {
        opacity: 0.88;
        transform: scaleY(1);
    }
}

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

@keyframes inspection-pulse {
    0%,
    100% {
        opacity: 0.22;
        transform: scaleX(0.82);
    }
    50% {
        opacity: 0.68;
        transform: scaleX(1.04);
    }
}

@media (max-width: 1100px) {
    .route-section {
        grid-template-columns: 1fr;
    }

    .route-copy {
        max-width: 760px;
    }

    .route-board {
        min-height: 820px;
    }
}

@media (max-width: 760px) {
    html {
        scroll-padding-top: 18px;
    }

    .logistics-strip,
    .logistics-section,
    .logistics-footer {
        width: min(100% - 28px, 620px);
    }

    .logistics-strip {
        grid-template-columns: 1fr;
        padding-bottom: 38px;
    }

    .service-grid,
    .process-grid,
    .route-section,
    .contact-section,
    .calc-panel {
        grid-template-columns: 1fr;
    }

    .calc-result {
        grid-column: auto;
    }

    .route-board {
        min-height: 500px;
    }

    .route-scene--modern {
        inset: 16px 10px 12px;
        --track-y: 25%;
        --row-quarry: 25%;
        --row-prep: 47%;
        --row-sea: 70%;
        --row-arrival: 92%;
        --row-final: 92%;
        --vehicle-scale: 0.64;
        --cargo-scale: 0.72;
    }

    .route-row-badge {
        left: 8px;
        min-width: 0;
        padding: 4px 5px;
        font-size: 8px;
    }

    .route-detail-layer {
        opacity: 0.78;
    }

    .detail-road {
        height: 18px;
    }

    .detail-yard,
    .detail-customs-booth,
    .detail-barrier,
    .detail-receiver-ramp {
        transform: scale(0.68);
        transform-origin: left center;
    }

    .detail-conveyor {
        transform: scale(0.68);
        transform-origin: left center;
    }

    .route-scene--extended .mod-quarry {
        transform: scale(0.72);
        transform-origin: left bottom;
    }

    .route-scene--extended .mod-excavator {
        transform: translate(-50%, -100%) scale(0.7);
        transform-origin: bottom center;
    }

    .route-scene--extended .mod-factory,
    .route-scene--extended .mod-bigbags,
    .route-scene--extended .mod-customs,
    .route-scene--extended .mod-recipient {
        transform: scale(0.72);
        transform-origin: bottom center;
    }

    .route-scene--extended .mod-port {
        transform: scale(0.66);
        transform-origin: bottom center;
    }

    .route-scene--extended .mod-port--destination {
        transform: scaleX(-1) scale(0.66);
        transform-origin: bottom center;
    }

    .route-scene--extended .st-label {
        padding: 2px 4px;
        font-size: 8px;
    }

    .route-scene--extended .mod-station--top .st-label {
        bottom: 31px;
    }

    .route-operations {
        right: 12px;
        bottom: 12px;
        left: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .route-operations span {
        min-height: 42px;
        padding: 7px 8px;
        font-size: 10px;
    }

    .st-label {
        display: none;
    }

    .mod-port {
        transform: scale(0.82);
    }

    .mod-port--destination {
        transform: scaleX(-1) scale(0.82);
    }

    .service-tile {
        min-height: auto;
    }

    .logistics-footer {
        flex-direction: column;
    }
}

/* --- Ship and Barge Navigation Lights --- */
@keyframes beacon-blink {
    0% {
        opacity: 0.35;
    }
    100% {
        opacity: 1;
    }
}

.mod-ship::before,
.mod-ship::after {
    position: absolute;
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    z-index: 10;
}

/* Starboard Bow (Green) */
.mod-ship::before {
    right: 6px;
    bottom: 38px;
    background: #00ff66;
    box-shadow: 0 0 6px #00ff66, 0 0 12px rgba(0, 255, 102, 0.8);
    animation: beacon-blink 1.5s infinite alternate;
}

/* Port Stern (Red) */
.mod-ship::after {
    left: 8px;
    bottom: 38px;
    background: #ff3333;
    box-shadow: 0 0 6px #ff3333, 0 0 12px rgba(255, 51, 51, 0.8);
    animation: beacon-blink 1.5s infinite alternate-reverse;
}

.mod-barge::before,
.mod-barge::after {
    position: absolute;
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    z-index: 10;
}

/* Starboard Bow (Green) */
.mod-barge::before {
    right: 5px;
    bottom: 22px;
    background: #00ff66;
    box-shadow: 0 0 5px #00ff66, 0 0 10px rgba(0, 255, 102, 0.7);
    animation: beacon-blink 1.4s infinite alternate;
}

/* Port Stern (Red) */
.mod-barge::after {
    left: 6px;
    bottom: 22px;
    background: #ff3333;
    box-shadow: 0 0 5px #ff3333, 0 0 10px rgba(255, 51, 51, 0.7);
    animation: beacon-blink 1.4s infinite alternate-reverse;
}

/* JS-driven moving parts get their own compositor layer for smoother playback */
.mod-vehicle,
.mod-excavator,
.mod-cargo,
.detail-crane-spreader,
.mod-port .port-cable,
.detail-final-forklift,
.detail-forklift--bags {
    will-change: transform, opacity;
}

/* =============================================================
   Visual polish — vivid & lively (no scene-timing changes)
   ============================================================= */

html { scroll-behavior: smooth; }

.action-btn,
.service-tile,
.calc-panel input,
.calc-panel select,
.calc-panel button,
.contact-actions a,
.logistics-section a,
.service-media,
.service-tile span,
.service-tile h3 {
    transition:
        transform .35s cubic-bezier(0.22, 0.8, 0.2, 1),
        box-shadow .35s ease,
        filter .4s ease,
        color .25s ease,
        background-color .35s ease,
        border-color .35s ease,
        text-shadow .35s ease,
        opacity .35s ease;
}

/* Vivid action buttons (CTA) */
.logistics-site .action-btn {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(126, 228, 255, 0.22);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.logistics-site .action-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 90% at 30% 0%, rgba(126, 228, 255, 0.45), transparent 65%);
    opacity: 0;
    transition: opacity .35s ease;
}
.logistics-site .action-btn::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    border: 1px solid transparent;
    background: linear-gradient(135deg, rgba(126, 228, 255, 0.65), rgba(255, 210, 74, 0.45)) border-box;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s ease;
}
.logistics-site .action-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(126, 228, 255, 0.55);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(126, 228, 255, 0.28);
}
.logistics-site .action-btn:hover::before { opacity: 1; }
.logistics-site .action-btn:hover::after  { opacity: 1; }
.logistics-site .action-btn:active { transform: translateY(0); }
.logistics-site .action-btn--it:hover {
    border-color: rgba(255, 210, 74, 0.55);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 28px rgba(255, 210, 74, 0.28);
}
.logistics-site .action-btn--ai:hover {
    border-color: rgba(157, 255, 207, 0.55);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 28px rgba(157, 255, 207, 0.28);
}

/* Service tiles — lift, vivid border, image pop */
.service-tile {
    position: relative;
    isolation: isolate;
}
.service-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(126, 228, 255, 0.0), rgba(126, 228, 255, 0.0) 55%, rgba(255, 210, 74, 0.0));
    opacity: 0;
    transition: opacity .4s ease;
    z-index: 0;
}
.service-tile::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(126, 228, 255, 0.55), rgba(255, 210, 74, 0.4)) border-box;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .4s ease;
    z-index: 2;
}
.service-tile > * { position: relative; z-index: 1; }
.service-tile:hover {
    transform: translateY(-6px);
    border-color: rgba(126, 228, 255, 0.45);
    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.55),
        0 0 36px rgba(126, 228, 255, 0.18);
}
.service-tile:hover::before { opacity: 0.18; }
.service-tile:hover::after  { opacity: 1; }
.service-tile:hover .service-media {
    filter: saturate(1.25) contrast(1.10) brightness(1.06);
    transform: scale(1.03);
}
.service-tile:hover h3 {
    color: #ffffff;
    text-shadow: 0 0 18px rgba(126, 228, 255, 0.45);
}
.service-tile span {
    background: linear-gradient(120deg, var(--logi-cyan) 0%, var(--logi-gold) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    font-weight: 900;
}

/* Section headings — gradient text + accent underline */
.logistics-section h2,
.contact-copy h2 {
    background: linear-gradient(120deg, #ffffff 0%, var(--logi-cyan) 55%, var(--logi-gold) 110%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.section-head h2,
.route-copy h2,
.contact-copy h2 {
    position: relative;
}
.section-head h2::after,
.route-copy h2::after,
.contact-copy h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin-top: 14px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--logi-cyan), var(--logi-gold));
    box-shadow: 0 0 18px rgba(126, 228, 255, 0.55);
}

/* Pre-title kicker labels (uppercase tagline) */
.route-copy > p,
.section-head > p,
.contact-copy > p,
.calculator-section .section-head > p,
.logistics-services > .section-head > p {
    color: var(--logi-cyan);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: 0 0 12px rgba(126, 228, 255, 0.35);
}

/* Calculator panel — vivid focus + result accent */
.calc-panel input,
.calc-panel select {
    transition: border-color .25s ease, box-shadow .3s ease, background-color .3s ease;
}
.calc-panel input:focus,
.calc-panel select:focus {
    border-color: var(--logi-cyan);
    box-shadow:
        0 0 0 4px rgba(126, 228, 255, 0.18),
        0 0 22px rgba(126, 228, 255, 0.25);
    outline: none;
}
.calc-panel button {
    position: relative;
    overflow: hidden;
}
.calc-panel button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .8s ease;
    pointer-events: none;
}
.calc-panel button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(255, 210, 74, 0.28), 0 0 22px rgba(255, 210, 74, 0.35);
}
.calc-panel button:hover::after { transform: translateX(120%); }
.calc-result strong {
    background: linear-gradient(120deg, var(--logi-cyan) 0%, var(--logi-gold) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    font-weight: 900;
    text-shadow: 0 0 24px rgba(126, 228, 255, 0.18);
}

/* Contact actions vivid hover */
.contact-actions a:hover {
    transform: translateX(3px);
    color: var(--logi-cyan);
    text-shadow: 0 0 14px rgba(126, 228, 255, 0.55);
}

/* ============== Scene polish ============== */
/* Soft vignette + light overlay to add depth (decorative only) */
.route-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 70% at 50% 100%, rgba(126, 228, 255, 0.10), transparent 60%),
        radial-gradient(80% 50% at 100% 0%, rgba(255, 210, 74, 0.07), transparent 60%);
    mix-blend-mode: screen;
    z-index: 1;
}

/* Track progress — bright gradient */
#modTrackProgress {
    background: linear-gradient(90deg, var(--logi-cyan), #ffffff 55%, var(--logi-gold)) !important;
    box-shadow: 0 0 18px rgba(126, 228, 255, 0.7), 0 0 32px rgba(126, 228, 255, 0.35);
}
#modTrackPulse {
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.85), 0 0 28px rgba(126, 228, 255, 0.55);
}

/* Stations: smooth, base look */
.route-scene .mod-station .st-dot {
    transition: box-shadow .4s ease, transform .4s ease, background .4s ease;
}
.route-scene .mod-station .st-label {
    transition: color .4s ease, text-shadow .4s ease, transform .4s ease;
}

/* Active-stage highlighter:
   data-stage is set by logistics-landing.js on #routeScene each frame.
   Visual only — does NOT alter timings or keyframes. */
.route-scene[data-stage="quarry"]    .mod-station--quarry .st-dot,
.route-scene[data-stage="excavator"] .mod-station--excavator .st-dot,
.route-scene[data-stage="dump"]      .mod-station--dump .st-dot,
.route-scene[data-stage="factory"]   .mod-station--factory .st-dot,
.route-scene[data-stage="bigbags"]   .mod-station--bigbags .st-dot,
.route-scene[data-stage="container"] .mod-station--container .st-dot,
.route-scene[data-stage="barge"]     .mod-station--barge .st-dot,
.route-scene[data-stage="port"]      .mod-station--port .st-dot,
.route-scene[data-stage="sea"]       .mod-station--sea .st-dot,
.route-scene[data-stage="unload"]    .mod-station--unload .st-dot,
.route-scene[data-stage="customs"]   .mod-station--customs .st-dot,
.route-scene[data-stage="final"]     .mod-station--receiver .st-dot,
.route-scene[data-stage="receiver"]  .mod-station--receiver .st-dot {
    background: radial-gradient(circle, #ffffff 0%, var(--logi-cyan) 70%);
    box-shadow:
        0 0 0 4px rgba(126, 228, 255, 0.18),
        0 0 18px rgba(126, 228, 255, 0.85),
        0 0 36px rgba(126, 228, 255, 0.45);
    transform: scale(1.4);
}
.route-scene[data-stage="quarry"]    .mod-station--quarry .st-label,
.route-scene[data-stage="excavator"] .mod-station--excavator .st-label,
.route-scene[data-stage="dump"]      .mod-station--dump .st-label,
.route-scene[data-stage="factory"]   .mod-station--factory .st-label,
.route-scene[data-stage="bigbags"]   .mod-station--bigbags .st-label,
.route-scene[data-stage="container"] .mod-station--container .st-label,
.route-scene[data-stage="barge"]     .mod-station--barge .st-label,
.route-scene[data-stage="port"]      .mod-station--port .st-label,
.route-scene[data-stage="sea"]       .mod-station--sea .st-label,
.route-scene[data-stage="unload"]    .mod-station--unload .st-label,
.route-scene[data-stage="customs"]   .mod-station--customs .st-label,
.route-scene[data-stage="final"]     .mod-station--receiver .st-label,
.route-scene[data-stage="receiver"]  .mod-station--receiver .st-label {
    color: #ffffff;
    text-shadow:
        0 0 10px rgba(126, 228, 255, 0.75),
        0 0 22px rgba(126, 228, 255, 0.45);
    transform: translateY(-1px) scale(1.04);
}

/* Living machines — subtle aerial drop-shadow */
.mod-vehicle,
.mod-excavator,
.detail-crane-spreader {
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
}

/* ============== Hero nebula overlay (logistics page only) ============== */
.logistics-site .logistics-hero .landing-chrome::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(38% 38% at 22% 28%, rgba(126, 228, 255, 0.32), rgba(126, 228, 255, 0) 70%),
        radial-gradient(32% 32% at 78% 70%, rgba(255, 210, 74, 0.22), rgba(255, 210, 74, 0) 70%),
        radial-gradient(26% 26% at 60% 18%, rgba(157, 255, 207, 0.16), rgba(157, 255, 207, 0) 70%),
        radial-gradient(34% 34% at 12% 78%, rgba(160, 120, 255, 0.18), rgba(160, 120, 255, 0) 70%);
    filter: blur(28px);
    mix-blend-mode: screen;
    animation: nebula-drift 26s ease-in-out infinite alternate;
}
@keyframes nebula-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(18px, -12px, 0) scale(1.06); }
    100% { transform: translate3d(-14px, 14px, 0) scale(1.04); }
}

/* Subtle hero title accent */
.logistics-site .logistics-hero h1 {
    background: linear-gradient(120deg, #ffffff 0%, var(--logi-cyan) 55%, var(--logi-gold) 110%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    text-shadow: 0 0 32px rgba(126, 228, 255, 0.18);
}
.logistics-site .logistics-hero h1 > b,
.logistics-site .logistics-hero h1 > strong {
    -webkit-text-fill-color: transparent;
}

/* =============================================================
   AI consultation chat panel (replaces calculator block)
   ============================================================= */
.chat-section { padding-top: 32px; padding-bottom: 96px; }

.chat-pane {
    position: relative;
    display: grid;
    gap: 14px;
    margin-top: 18px;
    padding: 22px;
    border: 1px solid var(--logi-line);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(4, 20, 38, 0.78), rgba(4, 20, 38, 0.92));
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    isolation: isolate;
}
.chat-pane::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(60% 70% at 20% 0%, rgba(126, 228, 255, 0.10), transparent 65%),
                radial-gradient(40% 60% at 100% 100%, rgba(255, 210, 74, 0.06), transparent 70%);
    z-index: -1;
}

.chat-log {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 320px;
    max-height: 540px;
    overflow-y: auto;
    padding: 4px 6px 6px;
    scroll-behavior: smooth;
}
.chat-log::-webkit-scrollbar { width: 8px; }
.chat-log::-webkit-scrollbar-thumb { background: rgba(126, 228, 255, 0.22); border-radius: 4px; }

.chat-msg {
    display: flex;
    max-width: 86%;
}
.chat-msg--user { align-self: flex-end; justify-content: flex-end; }
.chat-msg--bot, .chat-msg--system { align-self: flex-start; }

.chat-bubble {
    padding: 11px 14px;
    border-radius: 14px;
    line-height: 1.45;
    font-size: 15px;
    color: var(--logi-ink);
    border: 1px solid rgba(126, 228, 255, 0.18);
    background: rgba(8, 26, 44, 0.92);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.chat-msg--user .chat-bubble {
    border-color: rgba(126, 228, 255, 0.42);
    background: linear-gradient(135deg, rgba(0, 130, 180, 0.55), rgba(0, 60, 110, 0.85));
    color: #ffffff;
    border-top-right-radius: 4px;
}
.chat-msg--bot .chat-bubble {
    border-top-left-radius: 4px;
}
.chat-msg--system .chat-bubble {
    color: var(--logi-muted);
    background: rgba(8, 26, 44, 0.72);
    font-style: italic;
}

.chat-msg--typing .chat-bubble {
    display: inline-flex;
    gap: 5px;
    padding: 12px 14px;
}
.chat-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--logi-cyan);
    opacity: 0.5;
    animation: chat-dot-pulse 1.2s infinite ease-in-out;
}
.chat-dot:nth-child(2) { animation-delay: 0.18s; }
.chat-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes chat-dot-pulse {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
    40% { transform: scale(1.1); opacity: 1; }
}

.chat-input {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.chat-input-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: stretch;
}
.chat-attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    border: 1px solid var(--logi-line);
    border-radius: 10px;
    background: rgba(2, 12, 24, 0.55);
    color: var(--logi-cyan);
    font-size: 18px;
    cursor: pointer;
    transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.chat-attach:hover {
    border-color: var(--logi-cyan);
    color: #fff;
    background: rgba(126, 228, 255, 0.10);
}
.chat-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.chat-attachments:empty { display: none; }
.chat-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 240px;
    padding: 6px 10px;
    border: 1px solid rgba(126, 228, 255, 0.28);
    border-radius: 8px;
    background: rgba(8, 26, 44, 0.85);
    color: var(--logi-soft);
    font-size: 12px;
}
.chat-chip i.fa { color: var(--logi-cyan); }
.chat-chip .chat-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-chip .chat-chip-size { color: var(--logi-muted); flex-shrink: 0; }
.chat-chip .chat-chip-del {
    border: none;
    background: transparent;
    color: var(--logi-muted);
    cursor: pointer;
    padding: 0 2px;
    font-size: 14px;
    flex-shrink: 0;
}
.chat-chip .chat-chip-del:hover { color: #ff8a8a; }
/* attachments shown under a user message */
.chat-msg .chat-msg-files {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.chat-msg .chat-msg-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.25);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.82);
}
.chat-input textarea {
    resize: none;
    width: 100%;
    min-height: 52px;
    max-height: 140px;
    padding: 12px 14px;
    border: 1px solid var(--logi-line);
    border-radius: 10px;
    background: rgba(2, 12, 24, 0.65);
    color: var(--logi-ink);
    font: 500 15px/1.45 inherit;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.chat-input textarea:focus {
    outline: none;
    border-color: var(--logi-cyan);
    box-shadow: 0 0 0 4px rgba(126, 228, 255, 0.18), 0 0 22px rgba(126, 228, 255, 0.22);
}
.chat-input textarea::placeholder { color: rgba(156, 198, 217, 0.55); }
.chat-send {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    border: 1px solid rgba(126, 228, 255, 0.42);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(126, 228, 255, 0.22), rgba(0, 60, 110, 0.85));
    color: #ffffff;
    font: 700 14px/1 inherit;
    cursor: pointer;
    min-width: 132px;
    justify-content: center;
    transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.chat-send:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(126, 228, 255, 0.3), 0 0 22px rgba(126, 228, 255, 0.28);
}
.chat-input.is-busy .chat-send { opacity: 0.55; cursor: progress; }
.chat-input.is-busy textarea { opacity: 0.7; }

.chat-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: var(--logi-muted);
}
.chat-status { letter-spacing: 0.02em; }
.chat-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid rgba(126, 228, 255, 0.22);
    border-radius: 8px;
    background: transparent;
    color: var(--logi-muted);
    cursor: pointer;
    font-size: 12px;
    transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.chat-reset:hover {
    color: var(--logi-cyan);
    border-color: var(--logi-cyan);
    background: rgba(126, 228, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}