/* ==========================================================================
   9wickets — "শুরু করার নিয়ম" ANIMATION PASS v2 (loads LAST, after
   steps-road.css)
   --------------------------------------------------------------------------
   Adds more motion on top of steps-road.css's existing path-draw + pulsing
   badge, without touching its layout/colours (no "same dark background"
   request this time — content + animation only):

   1. Fixes a real cascade bug: the global `[data-reveal].is-in{ transform:
      translateY(0) }` rule (wickets-home.css) is MORE specific than
      steps-road.css's `.vk-hw-step{ transform:translateY(var(--y)) }`, so
      once a step's `.is-in` class lands, the zigzag offset was silently
      flattened to translateY(0) forever — the "alternating up/down"
      design this section is named for wasn't actually surviving reveal.
      Restores the zigzag AND turns the reveal into a proper pop-in
      (opacity + scale) using the step's own --d stagger delay.
   2. A small glowing spark travels along the connecting SVG path on a
      continuous 4s loop (SMIL `animateMotion`, added to the existing
      <path> via a new `id` + a new `<circle>` — the path geometry itself
      is untouched, so this can't desync from the draw-in animation's
      curve even though the SVG is non-uniformly stretched
      (preserveAspectRatio="none") at different viewport widths).
   3. Each step's icon gets a slow continuous float, staggered per step so
      the four don't move in lockstep.

   Scoped under .vk-how--v2 / .vk-hw-* (unchanged classes).
   ========================================================================== */

/* ---- 1. pop-in reveal that preserves the zigzag offset ---- */
body.vk .vk-hw-step[data-reveal] {
    transform: translateY(var(--y)) scale(.86);
    opacity: 0;
    transition: transform .6s cubic-bezier(.2, .7, .15, 1), opacity .5s ease, box-shadow .4s ease, border-color .4s ease;
    transition-delay: var(--d, 0s);
}
body.vk .vk-hw-step[data-reveal].is-in {
    transform: translateY(var(--y)) scale(1);
    opacity: 1;
}
body.vk .vk-hw-step[data-reveal].is-in:hover {
    transform: translateY(calc(var(--y) - 6px)) scale(1);
}

/* ---- 2. traveling spark along the path ---- */
body.vk .vk-hw-spark {
    filter: drop-shadow(0 0 5px rgba(255, 199, 44, .9)) drop-shadow(0 0 10px rgba(255, 199, 44, .5));
}

/* ---- 3. slow continuous icon float, staggered per step ---- */
body.vk .vk-hw-icon {
    animation: vk-hw-icon-float 3.2s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}
@keyframes vk-hw-icon-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-4px) rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
    body.vk .vk-hw-step[data-reveal] { transition: none; opacity: 1; transform: translateY(var(--y)) scale(1); }
    body.vk .vk-hw-icon { animation: none; }
    body.vk .vk-hw-spark { display: none; }
}