/* ==========================================================================
   Velto swirls — the glowing orange line that loops behind product shots.

   Markup: <div class="v-swirl" data-swirl="ko" aria-hidden="true"></div>
   velto-swirls.js fills it with an SVG and adds .is-in once it scrolls into
   view. The line then draws itself, a bright highlight keeps running along
   it, and the whole thing floats gently.
   ========================================================================== */

.v-swirl {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.v-swirl svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 4px rgba(255, 170, 40, .35));
    opacity: .9;
    transform-origin: 40% 50%;
}
.v-swirl.is-in svg { animation: vSwirlFloat 9s ease-in-out 2s infinite alternate; }

.v-swirl .v-swirl-line,
.v-swirl .v-swirl-spark {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.v-swirl .v-swirl-line {
    stroke-width: var(--v-swirl-width, 4px);
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 2.2s cubic-bezier(.65, 0, .35, 1);
}
.v-swirl.is-in .v-swirl-line { stroke-dashoffset: 0; }

/* a short bright segment that keeps travelling along the line */
.v-swirl .v-swirl-spark {
    stroke: #ffe7a3;
    stroke-width: calc(var(--v-swirl-width, 4px) * .8);
    stroke-dasharray: .045 .955;
    stroke-dashoffset: 1;
    opacity: 0;
}
.v-swirl.is-in .v-swirl-spark {
    opacity: .75;
    transition: opacity .6s ease 2s;
    animation: vSwirlSpark 7s linear 2s infinite;
}

@keyframes vSwirlSpark {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
}
@keyframes vSwirlFloat {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to   { transform: translate3d(-3px, -6px, 0) rotate(-1.5deg); }
}

@media (prefers-reduced-motion: reduce) {
    .v-swirl .v-swirl-line { transition: none; stroke-dashoffset: 0; }
    .v-swirl.is-in svg,
    .v-swirl.is-in .v-swirl-spark { animation: none; opacity: 0; }
}

/* ---- one continuous line across sections (see velto-swirls.js) --------- */
.v-swirl-chain {
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 0;
    --v-swirl-width: 3.5px;
}
.v-swirl-chain svg { transform: none; }
.v-swirl-chain.is-in svg { animation: none; }            /* no drift: it must meet the card line exactly */
.v-swirl-chain .v-swirl-line { transition-duration: 3.4s; }
.v-swirl-chain.is-in .v-swirl-spark { animation-duration: 11s; animation-delay: 3.4s; transition-delay: 3.4s; }

/* the line passes behind the community card, like the original line did */
.community-wrapper { position: relative; z-index: 1; }
/* the copy that runs in front of the stats strip (which sits at z-index 1) */
.v-swirl-front { z-index: 2; }

/* A decorative overlay must never be able to scroll the page. Belt and braces
   alongside the sizing fix in velto-swirls.js: even if a future change
   mis-measures, the swirl cannot extend the document. */
.v-swirl,
.v-swirl-chain {
    max-width: 100vw;
    pointer-events: none;
}