/* ============================================================
   DYNAMIC PRELOADER — Logistics themed
   Truck / Ship / Plane moving along a dashed route,
   with company logo pulsing in center.
   ============================================================ */

#dns-preloader {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, #ffffff 0%, #f1f5f9 100%);
    transition: opacity .55s ease, visibility .55s ease;
}

#dns-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Lock scroll while preloader is active */
body.dns-preloading {
    overflow: hidden;
}

.dns-pre-stage {
    position: relative;
    width: min(92vw, 420px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

/* ---- Logo pulse ---- */
.dns-pre-logo {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dns-pre-logo img {
    width: 72px;
    height: auto;
    animation: dns-pulse 1.8s ease-in-out infinite;
    filter: drop-shadow(0 6px 18px rgba(30, 58, 95, .18));
}
.dns-pre-logo::before,
.dns-pre-logo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(30, 58, 95, .22);
    animation: dns-ring 2.2s ease-out infinite;
}
.dns-pre-logo::after { animation-delay: 1.1s; }

@keyframes dns-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
@keyframes dns-ring {
    0%   { transform: scale(.75); opacity: .9; }
    100% { transform: scale(1.75); opacity: 0; }
}

/* ---- Route ---- */
.dns-pre-route {
    position: relative;
    width: 100%;
    height: 72px;
}

.dns-pre-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    transform: translateY(-50%);
    background-image: linear-gradient(90deg, rgba(30, 58, 95, .35) 50%, transparent 50%);
    background-size: 12px 2px;
    background-repeat: repeat-x;
    animation: dns-dash 1s linear infinite;
}
@keyframes dns-dash {
    0%   { background-position: 0 0; }
    100% { background-position: -12px 0; }
}

/* Pin endpoints */
.dns-pre-pin {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1e3a5f;
    box-shadow: 0 0 0 4px rgba(30, 58, 95, .15);
}
.dns-pre-pin.start { left: 0; }
.dns-pre-pin.end   { left: 100%; background: #e84c2b; box-shadow: 0 0 0 4px rgba(232, 76, 43, .18); }

/* Moving vehicle */
.dns-pre-vehicle {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e84c2b;
    animation: dns-move 3.6s cubic-bezier(.65, .05, .36, 1) infinite;
}
.dns-pre-vehicle svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 10px rgba(232, 76, 43, .35));
}

/* Three vehicles in rotation (truck, ship, plane) */
.dns-pre-vehicle.v-truck  { animation-delay: 0s; }
.dns-pre-vehicle.v-ship   { animation-delay: -1.2s; color: #1e3a5f; }
.dns-pre-vehicle.v-plane  { animation-delay: -2.4s; color: #2d5a8e; }

@keyframes dns-move {
    0%      { left: 0%;   opacity: 0; transform: translate(-50%, -50%) scale(.8); }
    8%      { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    92%     { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100%    { left: 100%; opacity: 0; transform: translate(-50%, -50%) scale(.8); }
}

/* Plane floats slightly above the line */
.dns-pre-vehicle.v-plane {
    animation-name: dns-move-plane;
}
@keyframes dns-move-plane {
    0%   { left: 0%;   opacity: 0; transform: translate(-50%, -90%) scale(.8) rotate(-8deg); }
    8%   { opacity: 1; transform: translate(-50%, -90%) scale(1) rotate(-8deg); }
    92%  { opacity: 1; transform: translate(-50%, -90%) scale(1) rotate(-8deg); }
    100% { left: 100%; opacity: 0; transform: translate(-50%, -90%) scale(.8) rotate(-8deg); }
}

/* ---- Label + progress ---- */
.dns-pre-label {
    text-align: center;
}
.dns-pre-label .brand {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e3a5f;
    letter-spacing: .02em;
}
.dns-pre-label .tagline {
    margin-top: .25rem;
    font-size: .75rem;
    color: #64748b;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dns-pre-bar {
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: rgba(30, 58, 95, .1);
    overflow: hidden;
    position: relative;
}
.dns-pre-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, #e84c2b, transparent);
    animation: dns-bar 1.4s ease-in-out infinite;
    border-radius: 999px;
}
@keyframes dns-bar {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .dns-pre-logo img,
    .dns-pre-logo::before,
    .dns-pre-logo::after,
    .dns-pre-line,
    .dns-pre-vehicle,
    .dns-pre-bar::after {
        animation: none !important;
    }
    .dns-pre-vehicle.v-ship,
    .dns-pre-vehicle.v-plane { display: none; }
    .dns-pre-vehicle.v-truck { left: 50%; opacity: 1; }
}