/* WOW Marquee Scroller */
.wow-marquee-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.wow-marquee-track {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.wow-marquee-inner {
    display: flex;
    align-items: center; /* default; overridden by Elementor selector */
    width: max-content;
    height: 100%;        /* must fill the track so align-items has room to work */
    /* will-change is applied by the script only while the strip is actually
       moving. Setting it here pinned a permanent GPU layer for every marquee
       on the page, including paused and off-screen ones. */
}

.wow-marquee-group {
    display: flex;
    align-items: center; /* default; overridden by Elementor selector */
    flex-shrink: 0;
    height: 100%;        /* must match inner height for per-group alignment */
}

.wow-marquee-item {
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Fade edges via CSS mask */
.wow-marquee-faded .wow-marquee-track {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black var(--wow-fade-width, 80px),
        black calc(100% - var(--wow-fade-width, 80px)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black var(--wow-fade-width, 80px),
        black calc(100% - var(--wow-fade-width, 80px)),
        transparent 100%
    );
}

/* Editor placeholder */
.wow-marquee-placeholder {
    padding: 40px;
    text-align: center;
    background: #f5f5f5;
    border: 2px dashed #ccc;
    color: #999;
    font-size: 14px;
    border-radius: 4px;
}

/* ── Separator ───────────────────────────────────────────── */
.wow-marquee-sep {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* centres image horizontally within its padded space */
    flex-shrink: 0;
    align-self: center;      /* always vertically centred regardless of group align-items */
}
.wow-marquee-sep img {
    display: block;
    object-fit: contain;
}

/* ── Circle frame ───────────────────────────────────────── */
/*
 * The circle is drawn entirely by CSS. overflow:hidden clips the ::after
 * road line pseudo-element to the circle shape automatically — no pre-made
 * circular image is needed. The image sits centred inside with inner padding.
 */
.wow-sep-has-circle {
    border-radius: 50% !important;
    border: var(--wow-circle-width, 5px) solid var(--wow-circle-color, #ffffff);
    background-color: var(--wow-circle-bg, transparent);
    padding: var(--wow-circle-pad, 14px) !important;
    overflow: hidden; /* clips road line dashes to the circle arc */
    aspect-ratio: 1 / 1;
    justify-content: center;
    box-sizing: content-box;
}

/* ── Road line ───────────────────────────────────────────── */
/*
 * The road line overlays INSIDE the separator image using absolute positioning.
 * --wow-road-pos is a percentage from the top of the sep element, so the line
 * sits at the correct height within a circular icon graphic (~72% = lower quarter).
 */
.wow-sep-has-road {
    position: relative;
    /* No extra padding — road is inside the image, not below it */
}

/* Ensure the image itself sits in normal stacking context */
.wow-sep-has-road img {
    position: relative;
    z-index: 0;
    display: block;
}

.wow-sep-has-road::after {
    content: '';
    position: absolute;
    /* Percentage from the top of the sep element — places the line inside the graphic */
    top:  var(--wow-road-pos, 72%);
    left: calc(-1 * var(--wow-road-extend, 0px));
    right: calc(-1 * var(--wow-road-extend, 0px));
    height: var(--wow-road-h, 3px);
    /* Dashed line via repeating gradient */
    background-image: repeating-linear-gradient(
        to right,
        var(--wow-road-color, rgba(255,255,255,0.65)) 0px,
        var(--wow-road-color, rgba(255,255,255,0.65)) var(--wow-road-dash, 14px),
        transparent var(--wow-road-dash, 14px),
        transparent var(--wow-road-unit, 24px)
    );
    background-size: var(--wow-road-unit, 24px) 100%;
    border-radius: 2px;
    /* Render above the image so the line is visible over the graphic */
    z-index: 2;
    animation: var(--wow-road-anim, wow-road-left) var(--wow-road-speed, 0.35s) linear infinite;
}

/* Road scrolling left (forward motion when vehicle faces right) */
@keyframes wow-road-left {
    from { background-position: 0 0; }
    to   { background-position: calc(-1 * var(--wow-road-unit, 24px)) 0; }
}

/* Road scrolling right */
@keyframes wow-road-right {
    from { background-position: 0 0; }
    to   { background-position: var(--wow-road-unit, 24px) 0; }
}

/* ── Vehicle animation keyframes ───────────────────────── */

/*
 * DRIVE — simulates road suspension: rhythmic vertical bounce combined with
 * a gentle chassis rock (rotation). The asymmetric timing mimics an uneven road
 * surface rather than a mechanical metronome. Best at 0.5–0.9s duration.
 */
@keyframes wow-anim-drive {
    0%   { transform: translateY(0px)   rotate(0deg);    }
    8%   { transform: translateY(-4px)  rotate(-1.2deg); }
    16%  { transform: translateY(-1px)  rotate(0.6deg);  }
    24%  { transform: translateY(-5px)  rotate(-0.8deg); }
    32%  { transform: translateY(-1px)  rotate(0.4deg);  }
    40%  { transform: translateY(-3px)  rotate(-1deg);   }
    48%  { transform: translateY(0px)   rotate(0.5deg);  }
    56%  { transform: translateY(-4px)  rotate(-0.6deg); }
    64%  { transform: translateY(-1px)  rotate(0.8deg);  }
    72%  { transform: translateY(-3px)  rotate(-1.2deg); }
    80%  { transform: translateY(0px)   rotate(0.4deg);  }
    90%  { transform: translateY(-2px)  rotate(-0.5deg); }
    100% { transform: translateY(0px)   rotate(0deg);    }
}

/*
 * REV — engine-idling vibration: very rapid, tight, multi-axis micro-movements
 * that mimic a running engine. The X/Y/rotation combination gives a mechanical,
 * alive feel. Best at 0.15–0.3s duration for high frequency.
 */
@keyframes wow-anim-rev {
    0%   { transform: translateX(0px)   translateY(0px)   rotate(0deg);     }
    10%  { transform: translateX(-1.5px) translateY(-1px) rotate(-0.5deg);  }
    20%  { transform: translateX(1px)   translateY(-2px)  rotate(0.4deg);   }
    30%  { transform: translateX(-1px)  translateY(0px)   rotate(-0.3deg);  }
    40%  { transform: translateX(1.5px) translateY(-1px)  rotate(0.5deg);   }
    50%  { transform: translateX(-0.5px) translateY(-2px) rotate(-0.4deg);  }
    60%  { transform: translateX(1px)   translateY(0px)   rotate(0.3deg);   }
    70%  { transform: translateX(-1.5px) translateY(-1px) rotate(-0.5deg);  }
    80%  { transform: translateX(0.5px) translateY(-2px)  rotate(0.4deg);   }
    90%  { transform: translateX(-1px)  translateY(-1px)  rotate(-0.3deg);  }
    100% { transform: translateX(0px)   translateY(0px)   rotate(0deg);     }
}

/*
 * TURBO — launch/boost: the vehicle squats back (weight transfer on acceleration),
 * pitches forward into a slight nose-down attitude, then snaps back to neutral.
 * The scaleX compression on squat mimics tyre deformation under load.
 * Best at 0.6–1s duration.
 */
@keyframes wow-anim-turbo {
    0%   { transform: translateX(0px)  translateY(0px)  rotate(0deg)    scaleX(1)    scaleY(1);    }
    10%  { transform: translateX(-3px) translateY(2px)  rotate(2deg)    scaleX(0.97) scaleY(1.03); }
    20%  { transform: translateX(-5px) translateY(3px)  rotate(2.5deg)  scaleX(0.96) scaleY(1.04); }
    35%  { transform: translateX(4px)  translateY(-4px) rotate(-1.5deg) scaleX(1.03) scaleY(0.97); }
    50%  { transform: translateX(8px)  translateY(-2px) rotate(-0.8deg) scaleX(1.02) scaleY(0.99); }
    65%  { transform: translateX(3px)  translateY(-1px) rotate(-0.3deg) scaleX(1.01) scaleY(1);    }
    80%  { transform: translateX(1px)  translateY(0px)  rotate(0.2deg)  scaleX(1)    scaleY(1);    }
    100% { transform: translateX(0px)  translateY(0px)  rotate(0deg)    scaleX(1)    scaleY(1);    }
}

/*
 * SKID — rear-end drift/slide: the vehicle swings its tail out laterally with a
 * yaw rotation, holds the slide, then snaps back to straight. Combines horizontal
 * translation with rotation around an offset pivot to mimic oversteer.
 * Best at 0.8–1.4s duration.
 */
@keyframes wow-anim-skid {
    0%   { transform: translateX(0px)   rotate(0deg);    }
    15%  { transform: translateX(-4px)  rotate(-6deg);   }
    30%  { transform: translateX(-8px)  rotate(-10deg);  }
    45%  { transform: translateX(-6px)  rotate(-8deg);   }
    55%  { transform: translateX(-3px)  rotate(-4deg);   }
    65%  { transform: translateX(2px)   rotate(2deg);    }
    75%  { transform: translateX(5px)   rotate(5deg);    }
    85%  { transform: translateX(3px)   rotate(3deg);    }
    92%  { transform: translateX(1px)   rotate(1deg);    }
    100% { transform: translateX(0px)   rotate(0deg);    }
}

/* ── Separator animation keyframes ─────────────────────── */
@keyframes wow-anim-bounce {
    0%,100%{ transform:translateY(0);     animation-timing-function:cubic-bezier(.215,.61,.355,1); }
    30%    { transform:translateY(-20px); animation-timing-function:cubic-bezier(.755,.05,.855,.06); }
    60%    { transform:translateY(-10px); animation-timing-function:cubic-bezier(.755,.05,.855,.06); }
    75%    { transform:translateY(-4px); }
    90%    { transform:translateY(-2px); }
}
@keyframes wow-anim-float {
    0%,100%{ transform:translateY(0); }
    50%    { transform:translateY(-10px); }
}
@keyframes wow-anim-pulse {
    0%,100%{ transform:scale(1); }
    50%    { transform:scale(1.25); }
}
@keyframes wow-anim-ping {
    0%  { transform:scale(1);   opacity:1; }
    70% { transform:scale(1.6); opacity:0; }
    100%{ transform:scale(1.6); opacity:0; }
}
@keyframes wow-anim-heartbeat {
    0%,100%{ transform:scale(1); }
    14%    { transform:scale(1.3); }
    28%    { transform:scale(1); }
    42%    { transform:scale(1.3); }
    56%    { transform:scale(1); }
}
@keyframes wow-anim-spin {
    from{ transform:rotate(0deg); }
    to  { transform:rotate(360deg); }
}
@keyframes wow-anim-spin-ccw {
    from{ transform:rotate(0deg); }
    to  { transform:rotate(-360deg); }
}
@keyframes wow-anim-wobble {
    0%,100%{ transform:translateX(0); }
    15%    { transform:translateX(-8px) rotate(-4deg); }
    30%    { transform:translateX(7px)  rotate(3deg); }
    45%    { transform:translateX(-5px) rotate(-2deg); }
    60%    { transform:translateX(4px)  rotate(1deg); }
    75%    { transform:translateX(-2px) rotate(-1deg); }
}
@keyframes wow-anim-swing {
    0%,100%{ transform:rotate(0deg);  transform-origin:top center; }
    20%    { transform:rotate(12deg); transform-origin:top center; }
    40%    { transform:rotate(-8deg); transform-origin:top center; }
    60%    { transform:rotate(4deg);  transform-origin:top center; }
    80%    { transform:rotate(-3deg); transform-origin:top center; }
}
@keyframes wow-anim-rubber-band {
    0%,100%{ transform:scaleX(1)    scaleY(1); }
    30%    { transform:scaleX(1.3)  scaleY(.75); }
    40%    { transform:scaleX(.8)   scaleY(1.1); }
    50%    { transform:scaleX(1.1)  scaleY(.95); }
    65%    { transform:scaleX(.95)  scaleY(1.02); }
    75%    { transform:scaleX(1.02) scaleY(.98); }
}
@keyframes wow-anim-tada {
    0%,100%            { transform:scale(1)    rotate(0deg); }
    10%,20%            { transform:scale(.9)   rotate(-4deg); }
    30%,50%,70%,90%    { transform:scale(1.15) rotate(4deg); }
    40%,60%,80%        { transform:scale(1.15) rotate(-4deg); }
}
@keyframes wow-anim-jello {
    0%,100%{ transform:skewX(0)      skewY(0); }
    22.5%  { transform:skewX(-15deg) skewY(-15deg); }
    33.3%  { transform:skewX(11deg)  skewY(11deg); }
    44.4%  { transform:skewX(-7deg)  skewY(-7deg); }
    55.5%  { transform:skewX(4deg)   skewY(4deg); }
    66.6%  { transform:skewX(-2deg)  skewY(-2deg); }
    77.7%  { transform:skewX(1deg)   skewY(1deg); }
    88.8%  { transform:skewX(-.5deg) skewY(-.5deg); }
}
@keyframes wow-anim-shake {
    0%,100%            { transform:translateX(0); }
    10%,30%,50%,70%,90%{ transform:translateX(-6px); }
    20%,40%,60%,80%    { transform:translateX(6px); }
}
@keyframes wow-anim-flash {
    0%,50%,100%{ opacity:1; }
    25%,75%    { opacity:0; }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .wow-marquee-inner,
    .wow-marquee-sep img {
        animation: none !important;
    }
}