/* Order status milestone scenes */

.track-focus .track-h-steps { height: 320px; }
.track-focus-stage { top: 78px; }

.track-h-dot {
    width: 64px;
    height: 64px;
    overflow: hidden;
    font-size: 1.15rem;
}
.track-focus .track-h-step.is-current .track-h-dot,
.track-focus .track-h-step[data-offset="0"] .track-h-dot {
    width: 132px;
    height: 132px;
    font-size: 2.1rem;
    overflow: visible;
    border-width: 4px;
}

.track-h-step.is-done .track-h-dot,
.track-h-step.is-current .track-h-dot,
.track-focus .track-h-step.is-current .track-h-dot {
    background: linear-gradient(180deg, #ffffff, #fbf3e8);
    color: #102048;
    border-color: #102048;
}

.track-focus .track-h-step.is-current .track-h-dot {
    box-shadow: 0 12px 30px rgba(16, 32, 72, 0.18), 0 0 0 10px rgba(229, 137, 38, 0.12);
    animation: none;
}
.track-focus.track-h[data-status="shipped"] .track-h-step.is-current .track-h-dot {
    animation: none;
}
.track-focus .track-h-step.is-current.is-pop .track-h-dot,
.track-focus.track-h[data-status="shipped"] .track-h-step.is-current.is-pop .track-h-dot {
    animation: trackFocusPop 0.62s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ms-scene {
    position: relative;
    display: block;
    width: 82%;
    height: 82%;
}

.track-h-step:not(.is-current) .ms-scene,
.track-h-step:not(.is-current) .ms-scene * {
    animation: none !important;
}
.track-h-step:not(.is-current) .ms-place-mark {
    transform: none;
    opacity: 1;
}
.track-h-step:not(.is-current) .ms-place-ln {
    transform: none;
    opacity: 1;
}
.track-h-step:not(.is-current) .ms-conf-halo,
.track-h-step:not(.is-current) .ms-conf-pulse,
.track-h-step:not(.is-current) .ms-conf-dots { display: none; }
.track-h-step:not(.is-current) .ms-conf-check {
    stroke-dashoffset: 0;
}
.track-h-step:not(.is-current) .ms-truck-g { transform: none; }
.track-h-step:not(.is-current) .ms-lid-l { transform: rotate(-55deg); }
.track-h-step:not(.is-current) .ms-lid-r { transform: rotate(55deg); }
.track-h-step:not(.is-current) .ms-smile {
    transform: translateX(-50%) translateY(-6px) scale(0.85);
    opacity: 1;
}

.ms-svg {
    display: block;
    width: 108%;
    height: 108%;
    margin: -4%;
    overflow: visible;
}

/* ----- Placed: order ticket ----- */
.ms-placed { overflow: hidden; border-radius: 50%; }
.ms-place-svg {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: visible;
}
.ms-place-card {
    transform-box: fill-box;
    transform-origin: center;
    animation: msPlaceIn 2.3s cubic-bezier(0.34, 1.3, 0.64, 1) infinite;
}
.ms-place-ln {
    transform-box: fill-box;
    transform-origin: left center;
    animation: msPlaceWrite 2.3s ease-in-out infinite;
}
.ms-place-ln.l2 { animation-delay: 0.12s; }
.ms-place-ln.l3 { animation-delay: 0.24s; }
.ms-place-mark {
    transform-box: fill-box;
    transform-origin: center;
    animation: msPlaceStamp 2.3s cubic-bezier(0.34, 1.5, 0.64, 1) infinite;
}
@keyframes msPlaceIn {
    0% { transform: translateY(-10px) scale(0.92); opacity: 0; }
    22%, 100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes msPlaceWrite {
    0%, 18% { transform: scaleX(0.12); opacity: 0; }
    40%, 100% { transform: scaleX(1); opacity: 1; }
}
@keyframes msPlaceStamp {
    0%, 42% { transform: scale(0); opacity: 0; }
    58% { transform: scale(1.12); opacity: 1; }
    70%, 100% { transform: scale(1); opacity: 1; }
}

/* ----- Confirmed: success check burst ----- */
.ms-confirmed { overflow: visible; }
.ms-conf-svg {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: visible;
}
.ms-conf-halo {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196,165,116,0.45) 0%, transparent 70%);
    animation: msConfHalo 2.4s ease-in-out infinite;
}
.ms-conf-pulse {
    fill: none;
    stroke: #e58926;
    stroke-width: 1.6;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: msConfPulse 2.4s ease-out infinite;
}
.ms-conf-disc {
    fill: #672668;
    transform-box: fill-box;
    transform-origin: center;
    animation: msConfPop 2.4s cubic-bezier(0.34, 1.45, 0.64, 1) infinite;
}
.ms-conf-rim {
    fill: none;
    stroke: #e58926;
    stroke-width: 3.2;
    transform-box: fill-box;
    transform-origin: center;
    animation: msConfPop 2.4s cubic-bezier(0.34, 1.45, 0.64, 1) infinite;
}
.ms-conf-check {
    fill: none;
    stroke: #fff;
    stroke-width: 5.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 52;
    stroke-dashoffset: 52;
    animation: msConfDraw 2.4s ease-in-out infinite;
}
.ms-conf-dots i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: #e58926;
    opacity: 0;
    animation: msConfDot 2.4s ease-out infinite;
}
.ms-conf-dots .d1 { --dx: -34px; --dy: -22px; background: #e58926; }
.ms-conf-dots .d2 { --dx: 32px; --dy: -24px; background: #c03868; animation-delay: 0.04s; }
.ms-conf-dots .d3 { --dx: -28px; --dy: 24px; background: #f3c07a; animation-delay: 0.06s; }
.ms-conf-dots .d4 { --dx: 30px; --dy: 22px; background: #e58926; animation-delay: 0.08s; }
.ms-conf-dots .d5 { --dx: 0; --dy: -36px; background: #672668; animation-delay: 0.02s; width: 5px; height: 5px; }
.ms-conf-dots .d6 { --dx: 4px; --dy: 34px; background: #e58926; animation-delay: 0.1s; }
.ms-conf-dots .d7 { --dx: -36px; --dy: 4px; background: #c03868; animation-delay: 0.05s; width: 4px; height: 4px; }
.ms-conf-dots .d8 { --dx: 36px; --dy: 2px; background: #f3c07a; animation-delay: 0.07s; width: 4px; height: 4px; }
@keyframes msConfHalo {
    0%, 100% { transform: scale(0.85); opacity: 0.35; }
    45% { transform: scale(1.15); opacity: 0.7; }
}
@keyframes msConfPulse {
    0%, 18% { transform: scale(0.7); opacity: 0.7; }
    70%, 100% { transform: scale(1.35); opacity: 0; }
}
@keyframes msConfPop {
    0% { transform: scale(0.72); }
    22% { transform: scale(1.08); }
    32%, 100% { transform: scale(1); }
}
@keyframes msConfDraw {
    0%, 16% { stroke-dashoffset: 52; }
    42%, 82% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 52; }
}
@keyframes msConfDot {
    0%, 22% { transform: translate(0, 0) scale(0.3); opacity: 0; }
    38% { opacity: 1; }
    78%, 100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; }
}

/* ----- Processing: packing box loop ----- */
.ms-processing {
    overflow: hidden;
    border-radius: 50%;
    background: #f3e2cc;
}
.ms-pack-gif {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150%;
    height: 150%;
    object-fit: cover;
    transform: translate(-40%, -50%);
    display: block;
}

/* ----- Shipped: delivery truck ----- */
.ms-shipped { overflow: hidden; border-radius: 50%; }
.ms-shipped .ms-lane,
.ms-ofd .ms-lane {
    animation: msLane 0.55s linear infinite;
}
.ms-shipped .ms-truck-g {
    animation: msDrive 2s ease-in-out infinite;
}
.ms-spin {
    transform-box: fill-box;
    transform-origin: center;
    animation: msSpin 0.55s linear infinite;
}
@keyframes msDrive {
    0% { transform: translateX(-10px); }
    50% { transform: translateX(14px); }
    100% { transform: translateX(-10px); }
}
@keyframes msSpin { to { transform: rotate(360deg); } }
@keyframes msLane { to { transform: translateX(-32px); } }

/* ----- Out for delivery: delivery scooter loop ----- */
.ms-ofd {
    overflow: hidden;
    border-radius: 50%;
    background: #eef6f4;
}
.ms-ofd-gif {
    position: absolute;
    inset: 2%;
    width: 96%;
    height: 96%;
    object-fit: contain;
    object-position: center 70%;
    display: block;
}

/* ----- Delivered: open box + smiley ----- */
.ms-delivered { overflow: visible; }
.ms-open-box {
    position: absolute;
    left: 50%;
    bottom: 14%;
    width: 48%;
    height: 30%;
    transform: translateX(-50%);
    background: #e58926;
    border-radius: 2px;
    box-shadow: inset 0 9px 0 #d7633c;
}
.ms-lid-l,
.ms-lid-r {
    position: absolute;
    top: -13px;
    width: 48%;
    height: 15px;
    background: #e8d48a;
    transform-origin: bottom center;
}
.ms-lid-l { left: 2%; animation: msLidL 2.1s ease-in-out infinite; }
.ms-lid-r { right: 2%; animation: msLidR 2.1s ease-in-out infinite; }
.ms-smile {
    position: absolute;
    left: 50%;
    bottom: 28%;
    font-size: 1.05em;
    line-height: 1;
    animation: msSmile 2.1s ease-in-out infinite;
    filter: drop-shadow(0 3px 0 rgba(0,0,0,0.08));
}
@keyframes msLidL {
    0%, 12% { transform: rotate(0deg); }
    38%, 100% { transform: rotate(-55deg); }
}
@keyframes msLidR {
    0%, 12% { transform: rotate(0deg); }
    38%, 100% { transform: rotate(55deg); }
}
@keyframes msSmile {
    0%, 16% { transform: translateX(-50%) translateY(14px) scale(0.15); opacity: 0; }
    42% { transform: translateX(-50%) translateY(-10px) scale(1.2); opacity: 1; }
    58% { transform: translateX(-50%) translateY(-4px) scale(1); }
    74% { transform: translateX(-50%) translateY(-12px) rotate(-10deg) scale(1.1); }
    100% { transform: translateX(-50%) translateY(-6px) rotate(10deg) scale(1.05); opacity: 1; }
}

@media (max-width: 720px) {
    .track-focus .track-h-steps { height: 280px; }
    .track-h-dot {
        width: 48px;
        height: 48px;
    }
    .track-focus .track-h-step.is-current .track-h-dot,
    .track-focus .track-h-step[data-offset="0"] .track-h-dot {
        width: 104px;
        height: 104px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ms-scene, .ms-scene * { animation: none !important; }
    .ms-stamp, .ms-smile, .ms-conf-check, .ms-place-mark, .ms-place-ln { transform: none; opacity: 1; }
    .ms-conf-check { stroke-dashoffset: 0; }
    .ms-lid-l { transform: rotate(-55deg); }
    .ms-lid-r { transform: rotate(55deg); }
}