/* ==========================================================================
   eFreshhh – shopping cart preloader (pure SVG + CSS, no JavaScript)
   Markup: <div class="loader"><div class="loader-animation ecom-lottie-loader anim-mode-drive"><svg>…</svg></div></div>
   Modes (swap the class on the wrapper):
     anim-mode-drive    cart drives in, catches 3 parcels, sprints out (default)
     anim-mode-endless  cart rolls in place while parcels drop in
     anim-mode-minimal  compact bounce
   Colours / timing: edit the variables in the first block.
   ========================================================================== */

.ecom-lottie-loader {
    --anim-duration: 3.60s;
    --wheel-duration: 0.75s;
    --track-duration: 0.60s;
    --bounce-scale: 1.8;
    --brand-primary: #0E6B3B;
    --brand-secondary: #FFC531;
    --brand-tertiary: #F97316;
    --cart-stroke-dark: #1e293b;
    --cart-stroke-mid: #334155;
    --cart-stroke-light: #64748b;
    --cart-highlight: #ffffff;
    --track-color: #94a3b8;
    --shadow-color: rgba(15, 23, 42, 0.16);
    --play-state: running;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
    pointer-events: none;
    padding: 24px;
}

.ecom-lottie-loader svg {
    width: 100%;
    max-width: 400px;
    height: auto;
    overflow: visible;
}

/* centred in the full-screen .loader overlay (overrides the old Lottie box) */
.loader .loader-animation.ecom-lottie-loader {
    width: min(440px, 86vw);
    max-width: none;
    aspect-ratio: auto;
}

@media (prefers-reduced-motion: reduce) {
    .ecom-lottie-loader {
        --play-state: paused;
    }
}

/* ---------- Mode 1: endless express roll ---------- */
@keyframes endlessCartTrack {
    0%, 100% { transform: translateX(0px); }
    20% { transform: translateX(-3px); }
    25% { transform: translateX(2px); }
    53% { transform: translateX(-3px); }
    58% { transform: translateX(2px); }
    85% { transform: translateX(-3px); }
    90% { transform: translateX(2px); }
}

@keyframes endlessSuspension {
    0%, 14%, 30%, 47%, 63%, 80%, 95%, 100% { transform: translateY(0px) rotate(0deg) scale(1, 1); }
    7%, 40%, 73% { transform: translateY(calc(-2px * var(--bounce-scale))) rotate(-0.4deg); }
    18% { transform: translateY(calc(8.5px * var(--bounce-scale))) rotate(1.8deg) scale(calc(1 + 0.035 * var(--bounce-scale)), calc(1 - 0.045 * var(--bounce-scale))); }
    23% { transform: translateY(calc(-4px * var(--bounce-scale))) rotate(-1deg) scale(0.99, 1.02); }
    51% { transform: translateY(calc(9px * var(--bounce-scale))) rotate(-1.6deg) scale(calc(1 + 0.04 * var(--bounce-scale)), calc(1 - 0.05 * var(--bounce-scale))); }
    56% { transform: translateY(calc(-4.5px * var(--bounce-scale))) rotate(0.9deg) scale(0.99, 1.02); }
    84% { transform: translateY(calc(9.5px * var(--bounce-scale))) rotate(2deg) scale(calc(1 + 0.042 * var(--bounce-scale)), calc(1 - 0.052 * var(--bounce-scale))); }
    89% { transform: translateY(calc(-4.5px * var(--bounce-scale))) rotate(-1.1deg) scale(0.99, 1.02); }
}

@keyframes endlessFloorShadow {
    0%, 14%, 30%, 47%, 63%, 80%, 95%, 100% { transform: translateX(0px) scaleX(1); opacity: 0.85; }
    18%, 51%, 84% { transform: translateX(0px) scaleX(calc(1 + 0.14 * var(--bounce-scale))); opacity: 1; }
    23%, 56%, 89% { transform: translateX(0px) scaleX(0.94); opacity: 0.65; }
}

@keyframes endlessParcel1 {
    0%, 6% { transform: translate(-34px, -135px) rotate(-22deg) scale(0.75); opacity: 0; }
    11% { opacity: 1; }
    18% { transform: translate(0px, 5px) rotate(-4deg) scale(1.05, 0.93); opacity: 1; }
    22% { transform: translate(0px, -2px) rotate(-6deg) scale(0.99, 1.02); }
    26%, 88% { transform: translate(0px, 0px) rotate(-5deg) scale(1); opacity: 1; }
    96%, 100% { transform: translate(8px, -14px) rotate(0deg) scale(0.8); opacity: 0; }
}

@keyframes endlessParcel2 {
    0%, 39% { transform: translate(28px, -140px) rotate(20deg) scale(0.75); opacity: 0; }
    44% { opacity: 1; }
    51% { transform: translate(0px, 6px) rotate(3deg) scale(1.06, 0.92); opacity: 1; }
    55% { transform: translate(0px, -2px) rotate(6deg) scale(0.99, 1.02); }
    59%, 90% { transform: translate(0px, 0px) rotate(4deg) scale(1); opacity: 1; }
    97%, 100% { transform: translate(10px, -16px) rotate(8deg) scale(0.8); opacity: 0; }
}

@keyframes endlessParcel3 {
    0%, 72% { transform: translate(-14px, -140px) rotate(-15deg) scale(0.75); opacity: 0; }
    77% { opacity: 1; }
    84% { transform: translate(0px, 6px) rotate(-1deg) scale(1.06, 0.92); opacity: 1; }
    88% { transform: translate(0px, -2px) rotate(1deg) scale(0.99, 1.02); }
    91%, 94% { transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1; }
    98.5%, 100% { transform: translate(12px, -18px) rotate(6deg) scale(0.8); opacity: 0; }
}

/* ---------- Mode 2: drive-through cycle ---------- */
@keyframes driveCartTrack {
    0% { transform: translateX(-310px) scale(0.96); opacity: 0; }
    5% { opacity: 1; }
    15% { transform: translateX(6px) scale(1.01, 0.99); opacity: 1; }
    18%, 76% { transform: translateX(0px) scale(1); opacity: 1; }
    82% { transform: translateX(-14px); opacity: 1; }
    94% { transform: translateX(310px); opacity: 1; }
    97%, 100% { transform: translateX(330px); opacity: 0; }
}

@keyframes driveSuspension {
    0%, 15%, 30%, 45%, 60%, 76% { transform: translateY(0px) rotate(0deg) scale(1, 1); }
    22% { transform: translateY(calc(9px * var(--bounce-scale))) rotate(2deg) scale(1.04, 0.94); }
    26% { transform: translateY(calc(-4px * var(--bounce-scale))) rotate(-1deg); }
    46% { transform: translateY(calc(9.5px * var(--bounce-scale))) rotate(-1.8deg) scale(1.045, 0.935); }
    50% { transform: translateY(calc(-4.5px * var(--bounce-scale))) rotate(1deg); }
    68% { transform: translateY(calc(10px * var(--bounce-scale))) rotate(2.2deg) scale(1.05, 0.93); }
    72% { transform: translateY(calc(-5px * var(--bounce-scale))) rotate(-1.2deg); }
    82% { transform: translateY(2px) rotate(-3.5deg); }
    92%, 100% { transform: translateY(-2px) rotate(1deg); }
}

@keyframes driveFloorShadow {
    0% { transform: translateX(-310px) scaleX(0.7); opacity: 0; }
    15%, 76% { transform: translateX(0px) scaleX(1); opacity: 0.85; }
    22%, 46%, 68% { transform: translateX(0px) scaleX(1.15); opacity: 1; }
    82% { transform: translateX(-14px) scaleX(1.04); opacity: 0.9; }
    95%, 100% { transform: translateX(320px) scaleX(0.7); opacity: 0; }
}

@keyframes driveParcel1 {
    0%, 13% { transform: translate(-35px, -140px) rotate(-25deg) scale(0.75); opacity: 0; }
    16% { opacity: 1; }
    22% { transform: translate(0px, 6px) rotate(-4deg) scale(1.05, 0.93); opacity: 1; }
    26%, 95% { transform: translate(0px, 0px) rotate(-5deg) scale(1); opacity: 1; }
    98%, 100% { transform: translate(0px, 0px) rotate(-5deg) scale(1); opacity: 0; }
}

@keyframes driveParcel2 {
    0%, 37% { transform: translate(30px, -145px) rotate(22deg) scale(0.75); opacity: 0; }
    40% { opacity: 1; }
    46% { transform: translate(0px, 6px) rotate(4deg) scale(1.06, 0.92); opacity: 1; }
    50%, 95% { transform: translate(0px, 0px) rotate(4deg) scale(1); opacity: 1; }
    98%, 100% { transform: translate(0px, 0px) rotate(4deg) scale(1); opacity: 0; }
}

@keyframes driveParcel3 {
    0%, 59% { transform: translate(-15px, -145px) rotate(-16deg) scale(0.75); opacity: 0; }
    62% { opacity: 1; }
    68% { transform: translate(0px, 6px) rotate(-1deg) scale(1.06, 0.92); opacity: 1; }
    72%, 95% { transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1; }
    98%, 100% { transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 0; }
}

/* ---------- Mode 3: minimal bounce ---------- */
@keyframes minimalSuspension {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1, 1); }
    25% { transform: translateY(calc(4px * var(--bounce-scale))) rotate(0.8deg) scale(1.015, 0.985); }
    50% { transform: translateY(calc(-3px * var(--bounce-scale))) rotate(-0.6deg) scale(0.99, 1.01); }
    75% { transform: translateY(calc(3.5px * var(--bounce-scale))) rotate(0.5deg) scale(1.01, 0.99); }
}

@keyframes minimalShadow {
    0%, 100% { transform: scaleX(1); opacity: 0.85; }
    25%, 75% { transform: scaleX(1.08); opacity: 1; }
    50% { transform: scaleX(0.94); opacity: 0.65; }
}

@keyframes minimalParcelsFloat {
    0%, 100% { transform: translateY(0px) rotate(-2deg); opacity: 1; }
    50% { transform: translateY(calc(-4px * var(--bounce-scale))) rotate(1.5deg); opacity: 1; }
}

/* ---------- shared sub-animations ---------- */
@keyframes continuousWheelSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* dasharray 16 + 24 = 40px, so shifting by -40 loops seamlessly */
@keyframes seamlessTrackScroll {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -40; }
}

@keyframes seamlessWindGlide {
    0% { transform: translateX(130px) scaleX(0.5); opacity: 0; }
    20% { opacity: 0.75; }
    80% { opacity: 0.75; }
    100% { transform: translateX(-230px) scaleX(1.1); opacity: 0; }
}

@keyframes burstPop1 {
    0%, 16% { transform: scale(0.4); opacity: 0; }
    18.5% { transform: scale(0.95); opacity: 1; }
    24%, 100% { transform: scale(1.45); opacity: 0; }
}

@keyframes burstPop2 {
    0%, 49% { transform: scale(0.4); opacity: 0; }
    51.5% { transform: scale(0.95); opacity: 1; }
    57%, 100% { transform: scale(1.45); opacity: 0; }
}

@keyframes burstPop3 {
    0%, 82% { transform: scale(0.4); opacity: 0; }
    84.5% { transform: scale(1); opacity: 1; }
    90%, 100% { transform: scale(1.5); opacity: 0; }
}

/* ---------- bindings ---------- */
.lottie-wheel-left {
    transform-origin: 218px 248px;
    animation: continuousWheelSpin var(--wheel-duration) linear infinite;
    animation-play-state: var(--play-state);
}

.lottie-wheel-right {
    transform-origin: 312px 248px;
    animation: continuousWheelSpin var(--wheel-duration) linear infinite;
    animation-play-state: var(--play-state);
}

.lottie-ground-dashes {
    animation: seamlessTrackScroll var(--track-duration) linear infinite;
    animation-play-state: var(--play-state);
}

.lottie-wind-1 {
    animation: seamlessWindGlide calc(var(--track-duration) * 1.8) linear infinite;
    animation-play-state: var(--play-state);
}

.lottie-wind-2 {
    animation: seamlessWindGlide calc(var(--track-duration) * 2.2) linear infinite calc(var(--track-duration) * -0.7);
    animation-play-state: var(--play-state);
}

.lottie-wind-3 {
    animation: seamlessWindGlide calc(var(--track-duration) * 1.5) linear infinite calc(var(--track-duration) * -1.1);
    animation-play-state: var(--play-state);
}

/* mode 1 */
.anim-mode-endless .lottie-cart-track {
    animation: endlessCartTrack var(--anim-duration) ease-in-out infinite;
    animation-play-state: var(--play-state);
}

.anim-mode-endless .lottie-cart-suspension {
    transform-origin: 265px 232px;
    animation: endlessSuspension var(--anim-duration) cubic-bezier(0.25, 1, 0.5, 1) infinite;
    animation-play-state: var(--play-state);
}

.anim-mode-endless .lottie-floor-shadow {
    transform-origin: 265px 268px;
    animation: endlessFloorShadow var(--anim-duration) ease-in-out infinite;
    animation-play-state: var(--play-state);
}

.anim-mode-endless .lottie-parcel-1 {
    transform-origin: 238px 175px;
    animation: endlessParcel1 var(--anim-duration) cubic-bezier(0.22, 0.68, 0.36, 1) infinite;
    animation-play-state: var(--play-state);
}

.anim-mode-endless .lottie-parcel-2 {
    transform-origin: 286px 168px;
    animation: endlessParcel2 var(--anim-duration) cubic-bezier(0.22, 0.68, 0.36, 1) infinite;
    animation-play-state: var(--play-state);
}

.anim-mode-endless .lottie-parcel-3 {
    transform-origin: 262px 146px;
    animation: endlessParcel3 var(--anim-duration) cubic-bezier(0.22, 0.68, 0.36, 1) infinite;
    animation-play-state: var(--play-state);
}

.anim-mode-endless .lottie-burst-1 {
    transform-origin: 240px 136px;
    animation: burstPop1 var(--anim-duration) ease-out infinite;
    animation-play-state: var(--play-state);
}

.anim-mode-endless .lottie-burst-2 {
    transform-origin: 288px 130px;
    animation: burstPop2 var(--anim-duration) ease-out infinite;
    animation-play-state: var(--play-state);
}

.anim-mode-endless .lottie-burst-3 {
    transform-origin: 264px 114px;
    animation: burstPop3 var(--anim-duration) ease-out infinite;
    animation-play-state: var(--play-state);
}

/* mode 2 */
.anim-mode-drive .lottie-cart-track {
    animation: driveCartTrack var(--anim-duration) cubic-bezier(0.32, 0.04, 0.24, 1) infinite;
    animation-play-state: var(--play-state);
}

.anim-mode-drive .lottie-cart-suspension {
    transform-origin: 265px 232px;
    animation: driveSuspension var(--anim-duration) cubic-bezier(0.25, 1, 0.5, 1) infinite;
    animation-play-state: var(--play-state);
}

.anim-mode-drive .lottie-floor-shadow {
    transform-origin: 265px 268px;
    animation: driveFloorShadow var(--anim-duration) cubic-bezier(0.32, 0.04, 0.24, 1) infinite;
    animation-play-state: var(--play-state);
}

.anim-mode-drive .lottie-parcel-1 {
    transform-origin: 238px 175px;
    animation: driveParcel1 var(--anim-duration) cubic-bezier(0.22, 0.68, 0.36, 1) infinite;
    animation-play-state: var(--play-state);
}

.anim-mode-drive .lottie-parcel-2 {
    transform-origin: 286px 168px;
    animation: driveParcel2 var(--anim-duration) cubic-bezier(0.22, 0.68, 0.36, 1) infinite;
    animation-play-state: var(--play-state);
}

.anim-mode-drive .lottie-parcel-3 {
    transform-origin: 262px 146px;
    animation: driveParcel3 var(--anim-duration) cubic-bezier(0.22, 0.68, 0.36, 1) infinite;
    animation-play-state: var(--play-state);
}

.anim-mode-drive .lottie-burst-1,
.anim-mode-drive .lottie-burst-2,
.anim-mode-drive .lottie-burst-3 {
    opacity: 0;
}

/* mode 3 */
.anim-mode-minimal .lottie-cart-track {
    transform: translateX(0px);
}

.anim-mode-minimal .lottie-cart-suspension {
    transform-origin: 265px 232px;
    animation: minimalSuspension calc(var(--anim-duration) * 0.45) ease-in-out infinite;
    animation-play-state: var(--play-state);
}

.anim-mode-minimal .lottie-floor-shadow {
    transform-origin: 265px 268px;
    animation: minimalShadow calc(var(--anim-duration) * 0.45) ease-in-out infinite;
    animation-play-state: var(--play-state);
}

.anim-mode-minimal .lottie-parcel-1,
.anim-mode-minimal .lottie-parcel-2,
.anim-mode-minimal .lottie-parcel-3 {
    animation: minimalParcelsFloat calc(var(--anim-duration) * 0.45) ease-in-out infinite;
    animation-play-state: var(--play-state);
}

.anim-mode-minimal .lottie-burst-1,
.anim-mode-minimal .lottie-burst-2,
.anim-mode-minimal .lottie-burst-3 {
    opacity: 0;
}