/* ==========================================================================
   9wickets — "বাংলাদেশের জন্য" (.vk-seo, id="about") ANIMATION PASS v2
   (loads LAST, after home-relayout.css)
   --------------------------------------------------------------------------
   Content-only refresh (no background/layout redesign this round). This
   section's markup shipped with `is-in` hard-baked onto its three
   [data-reveal] wrappers (head / copy column / side panel), which meant it
   always rendered in its post-reveal end-state and never actually played
   the scroll-reveal fade — effectively animation-less. The `is-in` has now
   been removed from the markup so the existing global [data-reveal]
   IntersectionObserver engine (wickets-home.js) drives it like every other
   section; this file adds the motion on top:

   1. The 3 feature rows (.vk-seo__feature) now carry their own
      [data-reveal] + --d stagger so they cascade in one-by-one instead of
      popping together with the copy column.
   2. Each feature icon gets a small entrance "pop" (scale bounce) synced
      to its row's reveal.
   3. The 4 verification checklist ticks draw themselves in with a
      stroke-dashoffset sweep once the side panel reveals (needs
      pathLength="100" added to each check <path>, done in the same
      content pass), staggered by nth-child.
   4. The section's ambient background aura (home-relayout.css §10) now
      breathes slowly and continuously — subtle scale/opacity pulse.
   5. The "verified network" badge pill gets a slow shimmer sweep.

   Scoped under .vk-seo / .vk-seo__* (unchanged classes), body.vk-home
   only where a rule could otherwise leak onto other pages reusing .vk-seo.
   ========================================================================== */

/* ---- 1 & 2. feature-row cascade + icon pop ---- */
body.vk .vk-seo__feature[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .15, 1);
    transition-delay: var(--d, 0s);
}
body.vk .vk-seo__feature[data-reveal].is-in {
    opacity: 1;
    transform: translateY(0);
}
body.vk .vk-seo__feature[data-reveal] .vk-seo__feature-icon {
    transform: scale(.4);
    opacity: 0;
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .35s ease;
    transition-delay: calc(var(--d, 0s) + .15s);
}
body.vk .vk-seo__feature[data-reveal].is-in .vk-seo__feature-icon {
    transform: scale(1);
    opacity: 1;
}

/* ---- 3. checklist tick draw-in ---- */
body.vk .vk-seo__checks li svg path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset .6s ease;
}
body.vk .vk-seo__side.is-in .vk-seo__checks li svg path { stroke-dashoffset: 0; }
body.vk .vk-seo__side.is-in .vk-seo__checks li:nth-child(1) svg path { transition-delay: .15s; }
body.vk .vk-seo__side.is-in .vk-seo__checks li:nth-child(2) svg path { transition-delay: .32s; }
body.vk .vk-seo__side.is-in .vk-seo__checks li:nth-child(3) svg path { transition-delay: .49s; }
body.vk .vk-seo__side.is-in .vk-seo__checks li:nth-child(4) svg path { transition-delay: .66s; }
body.vk .vk-seo__check-ic {
    transform: scale(.5);
    opacity: 0;
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
}
body.vk .vk-seo__side.is-in .vk-seo__checks li:nth-child(1) .vk-seo__check-ic { transform: scale(1); opacity: 1; transition-delay: .05s; }
body.vk .vk-seo__side.is-in .vk-seo__checks li:nth-child(2) .vk-seo__check-ic { transform: scale(1); opacity: 1; transition-delay: .22s; }
body.vk .vk-seo__side.is-in .vk-seo__checks li:nth-child(3) .vk-seo__check-ic { transform: scale(1); opacity: 1; transition-delay: .39s; }
body.vk .vk-seo__side.is-in .vk-seo__checks li:nth-child(4) .vk-seo__check-ic { transform: scale(1); opacity: 1; transition-delay: .56s; }

/* ---- 4. breathing background aura ---- */
body.vk-home .vk-seo::before {
    animation: vk-seo-breathe 7s ease-in-out infinite;
}
@keyframes vk-seo-breathe {
    0%, 100% { opacity: .5; transform: scale(1); }
    50%      { opacity: .8; transform: scale(1.06); }
}

/* ---- 5. badge shimmer ---- */
body.vk .vk-seo__panel-badge {
    position: relative;
    overflow: hidden;
}
body.vk .vk-seo__panel-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .35) 50%, transparent 80%);
    background-size: 200% 100%;
    background-position: 200% 0;
    animation: vk-seo-shimmer 4.5s ease-in-out infinite;
    animation-delay: 1s;
}
@keyframes vk-seo-shimmer {
    0%, 40%  { background-position: 200% 0; }
    60%      { background-position: -40% 0; }
    100%     { background-position: -40% 0; }
}

/* ---- 6. side panel background: same dark aurora stage as the hero ---- */
body.vk .vk-seo__panel {
    background: linear-gradient(180deg, #0B0906 0%, #15110A 60%, #17150F 100%) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
body.vk .vk-seo__panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60% 55% at 18% 0%, rgba(255, 199, 44, .22), transparent 70%),
        radial-gradient(55% 50% at 100% 100%, rgba(200, 134, 11, .18), transparent 70%);
    filter: blur(10px);
    border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
    body.vk .vk-seo__feature[data-reveal],
    body.vk .vk-seo__feature[data-reveal] .vk-seo__feature-icon,
    body.vk .vk-seo__checks li svg path,
    body.vk .vk-seo__check-ic { transition: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
    body.vk-home .vk-seo::before,
    body.vk .vk-seo__panel-badge::after { animation: none !important; }
}