/*!
 * 9wickets Pro — Cricket Polish
 * Stadium spotlights, floating cricket ball, animated stat counters,
 * subtle cricket-themed micro-interactions.
 * Loaded after nine-wickets-home.css on the front page.
 */

/* ============================================================
   1. STADIUM SPOTLIGHT BACKDROP for the hero
   ============================================================ */
body.vk-home .nw-hero {
    isolation: isolate;
}
body.vk-home .nw-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        /* Top-left floodlight */
        radial-gradient(36% 28% at 18% -8%,
            rgba(255, 230, 163, 0.16),
            transparent 70%),
        /* Top-right floodlight */
        radial-gradient(34% 26% at 82% -6%,
            rgba(255, 230, 163, 0.14),
            transparent 70%),
        /* Crowd haze at bottom */
        radial-gradient(70% 35% at 50% 110%,
            rgba(211, 32, 48, 0.08),
            transparent 75%);
    mix-blend-mode: screen;
    opacity: 0.85;
}

/* Subtle horizontal "pitch lines" — very faint */
body.vk-home .nw-hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 240px;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(
        180deg,
        transparent 0%,
        rgba(245, 177, 0, 0.045) 30%,
        rgba(245, 177, 0, 0.085) 50%,
        rgba(245, 177, 0, 0.045) 70%,
        transparent 100%);
    opacity: 0.4;
    transform: perspective(900px) rotateX(72deg) translateY(80px);
    transform-origin: 50% 100%;
}

/* ============================================================
   2. FLOATING CRICKET BALL — decorative, top-right of hero
   ============================================================ */
body.vk-home .nw-hero__inner::after {
    content: "";
    position: absolute;
    top: -10%;
    right: -2%;
    width: 84px;
    height: 84px;
    border-radius: 999px;
    background:
        /* highlight */
        radial-gradient(circle at 30% 28%,
            rgba(255, 230, 200, 0.6) 0%,
            rgba(220, 60, 60, 0.0) 28%),
        /* main ball body */
        radial-gradient(circle at 50% 50%,
            #C8202B 0%,
            #8B141C 65%,
            #4A0810 100%);
    box-shadow:
        0 24px 56px -12px rgba(211, 32, 48, 0.45),
        0 0 0 1px rgba(0, 0, 0, 0.55) inset;
    pointer-events: none;
    z-index: -1;
    animation: nw-ball-float 6s cubic-bezier(.45,0,.55,1) infinite;
    opacity: 0.9;
}
/* Ball seam — single stitched line across the equator */
body.vk-home .nw-hero__inner::before {
    content: "";
    position: absolute;
    top: -10%;
    right: -2%;
    width: 84px;
    height: 84px;
    border-radius: 999px;
    pointer-events: none;
    z-index: -1;
    background-image:
        repeating-linear-gradient(90deg,
            transparent 0 4px,
            rgba(255, 230, 200, 0.55) 4px 6px),
        linear-gradient(180deg,
            transparent calc(50% - 1px),
            rgba(0, 0, 0, 0.3) calc(50% - 1px),
            rgba(0, 0, 0, 0.3) calc(50% + 1px),
            transparent calc(50% + 1px));
    background-size: 18px 4px, 100% 100%;
    background-position: center 50%, center;
    background-repeat: no-repeat, no-repeat;
    -webkit-mask: radial-gradient(circle at 50% 50%, #000 56%, transparent 56%);
    mask: radial-gradient(circle at 50% 50%, #000 56%, transparent 56%);
    transform: rotate(-12deg);
    animation: nw-ball-float 6s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes nw-ball-float {
    0%, 100% { transform: translate(0, 0) rotate(-12deg); }
    50%      { transform: translate(-6px, 14px) rotate(-8deg); }
}

@media (max-width: 980px) {
    body.vk-home .nw-hero__inner::before,
    body.vk-home .nw-hero__inner::after { display: none; }
}

/* ============================================================
   3. STAT COUNTERS — premium roll-in (data-count animated by JS)
   ============================================================ */
body.vk-home .nw-stat__num {
    display: inline-block;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
body.vk-home [data-revealed] .nw-stat__num {
    transform: translateY(0);
}

/* ============================================================
   4. PRIMARY CTA — ball-glow pulse on idle
   ============================================================ */
body.vk-home .nw-btn--primary,
body.vk .nw-cta-band__btn {
    animation: nw-cta-glow 4.5s ease-in-out infinite;
}
@keyframes nw-cta-glow {
    0%, 100% {
        box-shadow:
            0 14px 36px rgba(245, 177, 0, 0.30),
            0 0 0 1px rgba(245, 177, 0, 0.50) inset;
    }
    50% {
        box-shadow:
            0 18px 48px rgba(245, 177, 0, 0.45),
            0 0 0 1px rgba(245, 177, 0, 0.78) inset;
    }
}

/* ============================================================
   5. LIVE DOT — small spark pulse cadence (more cricket-like)
   ============================================================ */
@keyframes nw-pulse-cricket {
    0%   { box-shadow: 0 0 0 0   rgba(211,32,48,0.7),  0 0 14px rgba(211,32,48,0.55); }
    35%  { box-shadow: 0 0 0 10px rgba(211,32,48,0.0), 0 0 14px rgba(211,32,48,0.55); }
    50%  { box-shadow: 0 0 0 0   rgba(211,32,48,0.0),  0 0 14px rgba(211,32,48,0.55); }
    100% { box-shadow: 0 0 0 0   rgba(211,32,48,0.0),  0 0 14px rgba(211,32,48,0.55); }
}
body.vk .nw-pulse,
body.vk .nw-hero__chip-dot,
body.vk .nw-hero__panel-live::before {
    animation: nw-pulse-cricket 2.4s cubic-bezier(.4,0,.6,1) infinite;
}

/* ============================================================
   6. REVEAL POLISH — gentler stagger with cricket-bounce feel
   ============================================================ */
body.vk-home [data-reveal] {
    transition:
        opacity .7s cubic-bezier(.2,.7,.2,1),
        transform .7s cubic-bezier(.2,.7,.2,1);
}
body.vk-home [data-reveal][data-revealed] {
    transform: translateY(0) !important;
}

/* ============================================================
   7. AGENT CARD — gold rail draws faster on hover
   ============================================================ */
body.vk-home .nw-agent-card::before {
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

/* ============================================================
   8. WHY CARD — icon disc reacts with subtle "bowl" twist
   ============================================================ */
body.vk-home .nw-why-card .nw-why-card__icon {
    transition:
        background .4s cubic-bezier(.34, 1.56, .64, 1),
        color .35s ease,
        transform .55s cubic-bezier(.34, 1.56, .64, 1);
}

/* ============================================================
   9. RESPECT REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    body.vk-home .nw-hero__inner::before,
    body.vk-home .nw-hero__inner::after,
    body.vk-home .nw-btn--primary,
    body.vk .nw-cta-band__btn,
    body.vk .nw-pulse,
    body.vk .nw-hero__chip-dot,
    body.vk .nw-hero__panel-live::before {
        animation: none !important;
    }
}