/* ==========================================================================
   9wickets — "Premium Video Hero" splash intro (2026-07)
   --------------------------------------------------------------------------
   NEW section, sits BEFORE the existing compact hero-v6 banner (that one
   stays untouched — this is a slim cinematic intro on top of it, English
   copy by request, everything else on the page stays Bangla). The header
   (#masthead) is `position:sticky`, not fixed/overlaid, so it just sits in
   normal flow above this section like it does above every other — no
   special top-offset math needed here.

   Bandwidth/motion: the <video> ships with NO <source> and NO autoplay/
   preload attributes in the server HTML — video-hero.js decides at runtime
   whether to actually fetch it. Plays on every viewport size now (by
   request); only prefers-reduced-motion still gets the static gradient-only
   fallback (`.vk-vhero--static`) and skips the download. `.vk-vhero__media`
   itself carries a dark gradient background so the section always reads as
   an intentional dark hero even with no video loaded — this file doesn't
   need a `--static` variant background rule.

   Scoped entirely under .vk-vhero / .vk-vhero__*. Markup: post 11, new
   widget vpv0001, inserted as the first child of container vp0011 (i.e.
   immediately before vp0001, the hero-v6 widget).
   ========================================================================== */

/* Slimmed down (2026-07): was a full min-height:100vh cinematic splash —
   still a real "moment" with the video visible, but a shorter one so the
   real (Bangla) hero isn't pushed a whole extra screen down. */
body.vk .vk-vhero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58vh;
    min-height: 58svh;
    padding: clamp(56px, 8vh, 84px) var(--vk-pad) clamp(40px, 6vh, 60px);
    text-align: center;
    background: #0E0C09;
}

/* ---------- media layer ---------- */
body.vk .vk-vhero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: linear-gradient(160deg, #17150F 0%, #0E0C09 100%);
}
body.vk .vk-vhero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* static/no-video fallback (mobile + reduced-motion): the empty <video> has
   no dimensions worth rendering, hide it outright and lean on the gradient
   background + scrim below for a still dark hero. */
body.vk .vk-vhero--static .vk-vhero__video { display: none; }

body.vk .vk-vhero__scrim {
    position: absolute;
    inset: 0;
    /* Darkened a bit past what one still frame needs — the video keeps
       moving, so the text has to stay legible across every frame of the
       loop, not just a bright one. */
    background:
        linear-gradient(180deg, rgba(8, 6, 4, .76) 0%, rgba(8, 6, 4, .64) 42%, rgba(8, 6, 4, .88) 100%),
        radial-gradient(55% 60% at 50% 40%, rgba(8, 6, 4, .3), transparent 70%),
        radial-gradient(60% 55% at 50% 38%, rgba(232, 162, 0, .12), transparent 68%);
}

/* ---------- content ---------- */
body.vk .vk-vhero__inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.vk .vk-vhero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: var(--vk-r-pill, 999px);
    background: rgba(249, 233, 0, .14);
    border: 1px solid rgba(249, 233, 0, .32);
    color: #F9E900;
    font-family: var(--vk-font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

/* wickets-home.css's "PREMIUM REBALANCE" layer forces ALL h1/h2/h3 tags
   (bare-tag selector, not just .vk-h1 etc.) to dark ink with !important —
   catches this section's real <h1> too. Needs matching !important + higher
   specificity to repaint white on this dark video backdrop. */
body.vk .vk-vhero__title {
    font-family: var(--vk-font-en);
    font-size: clamp(30px, 4.6vw, 54px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: #FFFFFF !important;
    margin: 0 0 14px;
}
body.vk .vk-vhero__title em {
    font-style: normal;
    background: linear-gradient(95deg, #FFE066 0%, #F9E900 50%, #FFC72C 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.vk .vk-vhero__lead {
    font-family: var(--vk-font-en);
    font-size: clamp(14.5px, 1.4vw, 16.5px);
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    max-width: 60ch;
    margin: 0 0 22px;
}

body.vk .vk-vhero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 22px;
}
/* base .vk-btn--glass is dark-on-transparent (styled for light backgrounds
   site-wide) — invisible on this dark video, same fix as cta-premium.css's
   ghost-button override. */
body.vk .vk-vhero .vk-btn--glass {
    background: rgba(255, 255, 255, .06) !important;
    border: 1.5px solid rgba(255, 255, 255, .4) !important;
    color: #FFFFFF !important;
}
body.vk .vk-vhero .vk-btn--glass:hover {
    background: rgba(255, 255, 255, .14) !important;
    border-color: rgba(255, 255, 255, .7) !important;
    color: #FFFFFF !important;
}

body.vk .vk-vhero__trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}
body.vk .vk-vhero__trust li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--vk-font-en);
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .74);
}
body.vk .vk-vhero__trust svg { flex: none; width: 16px; height: 16px; color: #F9E900; }

/* ---------- entrance (always-in-view on load, not scroll-gated) ---------- */
@keyframes vk-vhero-rise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}
body.vk .vk-vhero__badge { animation: vk-vhero-rise .6s cubic-bezier(.2, .7, .15, 1) both .05s; }
body.vk .vk-vhero__title { animation: vk-vhero-rise .7s cubic-bezier(.2, .7, .15, 1) both .15s; }
body.vk .vk-vhero__lead  { animation: vk-vhero-rise .7s cubic-bezier(.2, .7, .15, 1) both .28s; }
body.vk .vk-vhero__cta   { animation: vk-vhero-rise .7s cubic-bezier(.2, .7, .15, 1) both .40s; }
body.vk .vk-vhero__trust { animation: vk-vhero-rise .7s cubic-bezier(.2, .7, .15, 1) both .52s; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
    body.vk .vk-vhero { padding: clamp(64px, 12vh, 96px) var(--vk-pad) clamp(32px, 5vh, 48px); }
    body.vk .vk-vhero__trust { gap: 8px 18px; }
    body.vk .vk-vhero__trust li { font-size: 12px; }
}
@media (max-width: 480px) {
    body.vk .vk-vhero__cta { flex-direction: column; width: 100%; }
    body.vk .vk-vhero__cta .vk-btn { width: 100%; text-align: center; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    body.vk .vk-vhero__badge,
    body.vk .vk-vhero__title,
    body.vk .vk-vhero__lead,
    body.vk .vk-vhero__cta,
    body.vk .vk-vhero__trust { animation: none !important; }
}