/* ============================================================
   JAI KARNATAKA PARISHAT — HERO BANNER
   Paired with resources/views/partials/hero-banner.blade.php
   and public/js/hero-banner.js

   Plain CSS on purpose. The Tailwind bundle in public/build is
   compiled at deploy time; this file can be edited and shipped
   without a rebuild. It still reads the design tokens declared
   in resources/css/app.css (--color-kempu-500 and friends), so
   the palette stays single-sourced.
   ============================================================ */

.jk-hero {
    --jk-red: var(--color-kempu-500, #d71920);
    --jk-gold: var(--color-haladi-500, #ffd200);
    --jk-ink: var(--color-shile-900, #150e07);
    --jk-cream: var(--color-gandha-200, #fff8e2);
    --jk-ease: var(--ease-kar, cubic-bezier(.22, 1, .36, 1));

    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: clamp(580px, 84vh, 860px);
    display: flex;
    align-items: center;
    background: var(--jk-ink);
    color: #fff;
}

/* ── STAGE ──────────────────────────────────────────────────────
   Held slightly taller than the section so the parallax translate
   never exposes a bare edge at either end of the scroll. */
.jk-hero__stage {
    position: absolute;
    inset: -8% 0;
    z-index: -2;
    will-change: transform;
}

.jk-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 1.5s var(--jk-ease);
}

.jk-slide.is-active { opacity: 1; }

.jk-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Sits still until its slide is active, then drifts. Keeping the
       animation paused off-stage means only one image is ever being
       composited, which matters on low-end phones. */
    transform: scale(1.02);
    animation-play-state: paused;
}

.jk-slide.is-active img {
    animation: jk-kenburns 13s linear forwards;
    animation-play-state: running;
}

@keyframes jk-kenburns {
    /* Kept shallow on purpose. These are wide documentary photographs of
       crowds; zoom past ~1.10 and the crowd is cropped away to one face. */
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to   { transform: scale(1.09) translate3d(-1%, -1.1%, 0); }
}

/* Scrims. The first buys contrast for the headline, the second pulls
   the photograph into the flag palette so it stops looking like stock. */
.jk-hero__scrim {
    position: absolute;
    inset: 0;
    /* Retuned after the mission card was removed. The card used to cover
       the right half, so the scrim could afford to be heavy everywhere.
       Now the photograph IS the right half: the ink is concentrated under
       the text column and released almost entirely by the far edge, which
       also stops the darker indoor photographs reading as a black frame. */
    background:
        linear-gradient(96deg, rgba(10, 6, 2, .93) 0%, rgba(14, 8, 3, .82) 28%,
                               rgba(18, 10, 4, .42) 56%, rgba(18, 10, 4, .10) 100%),
        linear-gradient(180deg, rgba(10, 6, 2, .58) 0%, transparent 24%,
                                transparent 58%, rgba(10, 6, 2, .60) 100%);
}

.jk-hero__wash {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 78% at 88% 12%, rgba(255, 210, 0, .20), transparent 62%),
        radial-gradient(96% 70% at 4% 96%, rgba(215, 25, 32, .30), transparent 64%);
    mix-blend-mode: screen;
}

/* Fine film grain, so the flat gradients above never band on a wide screen. */
.jk-hero__grain {
    position: absolute;
    inset: 0;
    opacity: .16;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ── MOTIFS ─────────────────────────────────────────────────────── */
.jk-hero__berunda {
    position: absolute;
    z-index: -1;
    top: -3rem;
    right: -6rem;
    width: 40rem;
    height: 40rem;
    color: rgba(255, 210, 0, .085);
    pointer-events: none;
    animation: jk-breathe 11s ease-in-out infinite;
}

.jk-hero__rangoli {
    position: absolute;
    z-index: -1;
    bottom: -14rem;
    left: -10rem;
    width: 34rem;
    height: 34rem;
    color: rgba(255, 255, 255, .055);
    pointer-events: none;
    animation: jk-spin 90s linear infinite;
}

@keyframes jk-breathe {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: .9; }
    50%      { transform: scale(1.045) rotate(1.2deg); opacity: 1; }
}

@keyframes jk-spin { to { transform: rotate(360deg); } }

/* Flags drifting up the frame. Seven of them, each with its own lane,
   delay and duration derived from --d so the loop never looks periodic. */
.jk-hero__drift {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.jk-hero__drift svg {
    position: absolute;
    bottom: -8%;
    left: calc(6% + var(--d) * 13.5%);
    width: calc(20px + var(--d) * 5px);
    height: calc(20px + var(--d) * 5px);
    opacity: 0;
    animation: jk-drift calc(17s + var(--d) * 3.5s) linear infinite;
    animation-delay: calc(var(--d) * -4.5s);
}

@keyframes jk-drift {
    0%   { transform: translate3d(0, 0, 0) rotate(-8deg); opacity: 0; }
    12%  { opacity: .5; }
    72%  { opacity: .35; }
    100% { transform: translate3d(70px, -108vh, 0) rotate(14deg); opacity: 0; }
}

/* ── LAYOUT ─────────────────────────────────────────────────────── */
.jk-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    /* Held to the left of the frame so the photograph keeps the right
       half of the composition entirely to itself. */
    max-width: min(1280px, 100%);
    /* Bottom padding clears the absolutely-positioned foot bar. Both
       values are kept tight so the headline, the counts and the captions
       all land above the fold on a laptop. */
    padding-block: clamp(2.25rem, 5vh, 3.75rem) clamp(6.5rem, 12vh, 8.5rem);
}

.jk-hero__inner > * { max-width: 40rem; }

@media (min-width: 1280px) {
    .jk-hero__inner > * { max-width: 44rem; }
}

/* The hero copy is deliberately pulled out of the centred 1280px grid and
   aligned instead with the header's flush gutter, so the headline starts on
   the same vertical line as the logo rather than drifting inward on a wide
   display. Unlayered rules beat app.css's @layer components, so .kar-container
   on the same element is overridden without an !important. */
.jk-hero .jk-hero__inner,
.jk-hero .jk-bar__inner {
    max-width: none;
    margin-inline: 0;
    padding-inline: clamp(18px, 2.4vw, 52px);
}

/* ── EYEBROW ────────────────────────────────────────────────────── */
.jk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .95rem .5rem .55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 210, 0, .28);
    backdrop-filter: blur(10px);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--jk-gold);
    animation: jk-rise .8s var(--jk-ease) both;
}

.jk-eyebrow .kn {
    letter-spacing: .02em;
    text-transform: none;
    font-size: .82rem;
}

/* A two-stripe flag chip that keeps waving. */
.jk-eyebrow__flag {
    width: 26px;
    height: 17px;
    flex: none;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--jk-gold) 0 50%, var(--jk-red) 50% 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
    animation: jk-wave 2.8s ease-in-out infinite;
    transform-origin: left center;
}

@keyframes jk-wave {
    0%, 100% { transform: rotate(0deg) skewY(0deg); }
    35%      { transform: rotate(-4deg) skewY(3deg); }
    65%      { transform: rotate(3deg) skewY(-3deg); }
}

/* ── HEADLINE ───────────────────────────────────────────────────── */
.jk-title {
    margin: clamp(1.25rem, 2.4vw, 1.9rem) 0 0;
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
    font-weight: 900;
    /* Latin sets much wider than Kannada at the same size, so the English
       headline gets its own smaller scale here and the Kannada one
       overrides it below. Sized so both wrap to exactly three lines. */
    font-size: clamp(2.1rem, 4.3vw, 3.45rem);
    line-height: 1.06;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.jk-title .kn {
    font-family: var(--font-kannada-display, 'Noto Serif Kannada', serif);
    font-size: clamp(2.15rem, 4.9vw, 4rem);
    line-height: 1.26;
    letter-spacing: 0;
}

/* The two script blocks are block-level containers of masked lines.
   Declared inside @layer components on purpose: the bilingual hide rule
   in resources/css/app.css lives in that layer, and an UNLAYERED rule
   would beat it outright regardless of specificity — showing Kannada and
   English stacked together. Inside the layer, ordinary specificity
   applies again and the (0,2,1) hide rule wins over this (0,2,0) one. */
@layer components {
    .jk-title > [data-lang] { display: block; }
}

/* Each line is its own overflow-hidden mask, so the text appears to be
   lifted out from behind a solid edge rather than simply fading in. */
.jk-line {
    display: block;
    overflow: hidden;
    padding-bottom: .08em;
}

.jk-line--gold {
    color: var(--jk-gold);
    text-shadow: 0 0 46px rgba(255, 210, 0, .28);
}

html.js-hero .jk-line {
    clip-path: inset(0 0 105% 0);
    transform: translateY(.35em);
    opacity: 0;
    animation: jk-unmask .95s var(--jk-ease) both;
    animation-delay: calc(.24s + var(--i) * .13s);
}

@keyframes jk-unmask {
    to { clip-path: inset(-25% -25% -25% -25%); transform: translateY(0); opacity: 1; }
}

/* ── RULE ───────────────────────────────────────────────────────── */
.jk-rule {
    width: clamp(140px, 22vw, 260px);
    height: 5px;
    margin-top: clamp(1.1rem, 2vw, 1.6rem);
    border-radius: 999px;
    background: linear-gradient(90deg, var(--jk-gold), var(--jk-red));
    transform-origin: left center;
    animation: jk-draw 1s var(--jk-ease) .75s both;
    box-shadow: 0 6px 24px rgba(215, 25, 32, .45);
}

@keyframes jk-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── MOTTO ──────────────────────────────────────────────────────── */
.jk-motto {
    margin-top: clamp(.8rem, 1.4vw, 1.1rem);
    font-family: var(--font-kannada-display, 'Noto Serif Kannada', serif);
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--jk-gold);
    text-shadow: 0 2px 20px rgba(0, 0, 0, .6);
    animation: jk-rise .9s var(--jk-ease) .68s both;
}

/* ── LEDE ───────────────────────────────────────────────────────── */
.jk-lede {
    max-width: 34rem;
    margin-top: clamp(1rem, 1.8vw, 1.45rem);
    font-size: clamp(1rem, 1.14vw, 1.12rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, .86);
    animation: jk-rise .9s var(--jk-ease) .62s both;
}

.jk-lede .kn { line-height: 1.95; }
.jk-lede strong { color: var(--jk-gold); font-weight: 800; }

@keyframes jk-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

/* ── BUTTONS ────────────────────────────────────────────────────── */
.jk-cta {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: clamp(1.4rem, 2.4vw, 2rem);
    animation: jk-rise .9s var(--jk-ease) .78s both;
}

.jk-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .95rem 1.5rem;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 800;
    text-decoration: none;
    overflow: hidden;
    transition: transform .35s var(--jk-ease), box-shadow .35s var(--jk-ease),
                background-color .3s ease, border-color .3s ease;
}

.jk-btn svg { width: 1.05rem; height: 1.05rem; flex: none; transition: transform .35s var(--jk-ease); }
.jk-btn:hover { transform: translateY(-3px); }
.jk-btn:hover svg { transform: translateX(4px); }

.jk-btn--gold {
    background: linear-gradient(135deg, var(--jk-gold), #ffb703);
    color: var(--jk-ink);
    box-shadow: 0 14px 34px -12px rgba(255, 210, 0, .75);
}

.jk-btn--gold:hover { box-shadow: 0 20px 46px -14px rgba(255, 210, 0, .9); }

/* A sheen that sweeps across the primary button on hover. */
.jk-btn--gold::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .65) 50%, transparent 62%);
    transform: translateX(-120%);
    transition: transform .75s var(--jk-ease);
}

.jk-btn--gold:hover::after { transform: translateX(120%); }

.jk-btn--ghost {
    padding-left: .5rem;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .24);
    color: #fff;
    backdrop-filter: blur(10px);
}

.jk-btn--ghost:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 210, 0, .6); }

.jk-btn__avatar {
    width: 2.1rem;
    height: 2.1rem;
    flex: none;
    border-radius: 999px;
    overflow: hidden;
    border: 2px solid var(--jk-gold);
}

.jk-btn__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* ── FOOT BAR ───────────────────────────────────────────────────
   A glass strip across the bottom edge. It sits above the ribbon and
   below the content, so it frames the photograph instead of covering it. */
.jk-bar {
    position: absolute;
    z-index: 3;
    inset: auto 0 12px 0;
    background: linear-gradient(180deg, rgba(10, 6, 2, 0), rgba(10, 6, 2, .82) 46%, rgba(10, 6, 2, .94));
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255, 210, 0, .16);
    animation: jk-rise 1s var(--jk-ease) .95s both;
}

.jk-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    padding-block: .9rem 1rem;
}

/* ── COUNTS ─────────────────────────────────────────────────────── */
.jk-bar__stats {
    display: flex;
    align-items: center;
    gap: clamp(1.1rem, 2.4vw, 2.4rem);
}

/* Hairline separators between the counts, drawn rather than bordered so
   the first one never gets a stray leading rule. */
.jk-bar__stat + .jk-bar__stat {
    padding-left: clamp(1.1rem, 2.4vw, 2.4rem);
    border-left: 1px solid rgba(255, 255, 255, .16);
}

.jk-bar__stat {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.jk-bar__stat b {
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    font-weight: 900;
    line-height: 1;
    color: var(--jk-gold);
}

.jk-bar__stat span {
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 248, 226, .7);
}

.jk-bar__stat .kn { font-size: .8rem; letter-spacing: .01em; text-transform: none; }

/* ── SLIDE RAIL ─────────────────────────────────────────────────── */
.jk-rail {
    display: flex;
    align-items: stretch;
    gap: .25rem;
}

.jk-rail__btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem .65rem;
    border: 0;
    background: transparent;
    font: inherit;
    color: rgba(255, 248, 226, .48);
    cursor: pointer;
    transition: color .3s ease;
}

.jk-rail__btn:hover { color: rgba(255, 248, 226, .85); }
.jk-rail__btn.is-active { color: #fff; }

.jk-rail__no {
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .06em;
    color: var(--jk-gold);
    opacity: .5;
    transition: opacity .3s ease;
}

.jk-rail__btn.is-active .jk-rail__no { opacity: 1; }

.jk-rail__text {
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    white-space: nowrap;
}

.jk-rail__text .kn { font-size: .78rem; letter-spacing: 0; text-transform: none; }

/* A dormant track under every caption; the active one fills across.
   The fill IS the autoplay clock — JS restarts this animation on each
   change, so the bar and the rotation can never drift apart. */
.jk-rail__fill {
    position: absolute;
    inset: auto .75rem 0 .75rem;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .18);
}

.jk-rail__fill::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--jk-gold), var(--jk-red));
    transform: scaleX(0);
    transform-origin: left center;
}

.jk-rail__btn.is-active .jk-rail__fill::after {
    animation: jk-draw var(--jk-slide-duration, 6.5s) linear both;
}

/* ── FLAG RIBBON ────────────────────────────────────────────────── */
.jk-hero__ribbon {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 3;
    height: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.jk-hero__ribbon span { flex: 1; }
.jk-hero__ribbon span:first-child { background: var(--jk-gold); }
.jk-hero__ribbon span:last-child { background: var(--jk-red); }

/* A slow highlight travelling along the ribbon, like light down a sash. */
.jk-hero__ribbon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
    width: 26%;
    animation: jk-sash 6.5s var(--jk-ease) infinite;
}

@keyframes jk-sash {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(500%); }
}

/* ── SMALL SCREENS ──────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .jk-hero { min-height: auto; }
    .jk-hero__rangoli { display: none; }
    /* The mobile app tab bar owns the bottom edge of the viewport now, so
       the hero's foot rail is lifted clear of it and the copy above it
       gains the matching amount of room. */
    .jk-hero__inner { padding-block: 3.25rem 16rem; }
    .jk-bar { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px) + 0.9rem); }

    /* On a narrow screen the emblem would sit directly behind the
       headline, so it drops to the foot of the frame and dims further. */
    .jk-hero__berunda {
        width: 24rem;
        height: 24rem;
        top: auto;
        bottom: -6rem;
        right: -8rem;
        color: rgba(255, 210, 0, .055);
    }

    /* The captions stop being controls worth their width on a phone, so
       the rail scrolls sideways instead of wrapping into a block. */
    .jk-bar__inner { flex-wrap: nowrap; gap: 1rem; overflow: hidden; }
    .jk-rail {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .jk-rail::-webkit-scrollbar { display: none; }
}

@media (max-width: 720px) {
    .jk-hero__scrim {
        background:
            linear-gradient(180deg, rgba(10, 6, 2, .84) 0%, rgba(14, 8, 3, .9) 52%, rgba(10, 6, 2, .96) 100%);
    }

    /* Below this width the counts and the captions cannot share a row, so
       the captions collapse to their numbers alone. */
    .jk-rail__text { display: none; }
    .jk-rail__btn { padding-inline: .55rem; }
    .jk-rail__fill { inset: auto .55rem 0 .55rem; }
    .jk-bar__stat span { font-size: .58rem; letter-spacing: .1em; }
    .jk-bar__stat .kn { font-size: .72rem; }
}

/* ── REDUCED MOTION ─────────────────────────────────────────────────
   Everything decorative stops. The banner still reads exactly the
   same, it simply arrives already assembled. */
@media (prefers-reduced-motion: reduce) {
    .jk-hero *,
    .jk-hero *::before,
    .jk-hero *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }

    html.js-hero .jk-line { clip-path: none; transform: none; opacity: 1; }
    .jk-slide img { transform: scale(1); }
    .jk-hero__drift { display: none; }
    .jk-rule { transform: none; }
    .jk-rail__btn.is-active .jk-rail__fill::after { transform: scaleX(1); }
}