/* ============================================
   SEASONAL SPLASH OVERLAY — JHILKO (EWNET-WEB-057)
   Centred two-panel festival window:
     art panel ~44% · content panel ~56% · navy + cream · festival accents.
   Pre-added designs keyed by the `design` column — dashain and tihar.
   No free-form operator CSS is ever emitted; design keys only pick between
   pre-built themes. Fonts, icons and vector art are all self-hosted / inline.

   R1 polish (EWNET-WEB-057-R1): real brand lockup, quiet ghost close,
   two-line support copy, offer-tile hierarchy, restrained CTA, navy
   atmospheric backdrop, hairline inner ring + soft seams, mobile CTA sizing.
   ============================================ */

/* ---------- SELF-HOSTED SUBTET DEVANAGARI WEbfont ----------
   Subsetted Mukta (OFL) — main Devanagari block + digits + common punct
   (~18 KB each). Loaded only with this stylesheet (i.e. only when a splash
   actually renders). `font-display: swap` keeps CLS ~0 while it streams. */
@font-face {
    font-family: 'Jhilkho Devanagari';
    src: url('/assets/fonts/mukta-400-splash.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0900-097F, U+A8E0-A8FF, U+200C-200D, U+20B9, U+2010-2027;
}
@font-face {
    font-family: 'Jhilkho Devanagari';
    src: url('/assets/fonts/mukta-700-splash.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0900-097F, U+A8E0-A8FF, U+200C-200D, U+20B9, U+2010-2027;
}

/* ---------- PALETTE TOKENS ---------- */
.ewnet-splash {
    /* JHILKO shared spine (site navy) + cream base */
    --jh-navy-0: #081220;
    --jh-navy-1: #0B1F36;
    --jh-navy-2: #10345D;
    --jh-navy-3: #2472BF;
    --jh-cream: #F6F1E7;
    --jh-cream-dim: rgba(246, 241, 231, 0.78);
    --jh-ink: #0B1F36;
    /* accent: filled per theme; defaults to a neutral marigold */
    --jh-accent: #F59E0B;
    --jh-accent-soft: rgba(245, 158, 11, 0.14);
    --jh-accent-ink: #B45309;
    /* seam = the warm dusk light that bleeds from art panel to content,
       so the two panels read as one scene. Filled per theme. */
    --jh-seam: rgba(150, 60, 45, 0.16);
}

/* ---------- BASE OVERLAY ---------- */
.ewnet-splash {
    box-sizing: border-box;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--jh-cream);
    width: min(88vw, 1200px);
    max-width: min(88vw, 1200px);
    max-height: min(660px, calc(100dvh - 64px));
    margin: auto;
    inset: 0;
    border-radius: var(--radius-xl, 28px);
    overflow: hidden;
    box-shadow:
        0 40px 90px -24px rgba(4, 10, 20, 0.6),
        0 12px 32px -16px rgba(4, 10, 20, 0.5),
        /* hairline cream inner ring — quiet micro depth, no heavy borders */
        inset 0 1px 0 rgba(246, 241, 231, 0.07),
        inset 0 0 0 1px rgba(246, 241, 231, 0.04);
    outline: none;
    /* Every splash glyph travels through the bundled Devanagari font;
       unicode-range keeps Latin text on Inter automatically. */
    --jh-font: 'Jhilkho Devanagari', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Dense, reusable two-panel canvas. 44% art / 56% content. */
.ewnet-splash__canvas {
    display: grid;
    grid-template-columns: 44fr 56fr;
    min-width: 0;
    min-height: 0;
    border-radius: inherit;
    overflow: hidden;
}

.ewnet-splash::backdrop {
    /* Homepage stays perceptible through the sheet — a navy atmospheric
       veil (the site's own navy, deepened) rather than plain gray/fog. */
    background: linear-gradient(180deg, rgba(16, 52, 93, 0.46) 0%, rgba(8, 18, 32, 0.72) 100%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* ---------- ART PANEL ---------- */
.ewnet-splash__art {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: linear-gradient(160deg, var(--jh-navy-0) 0%, var(--jh-navy-1) 55%, var(--jh-navy-2) 100%);
}

.ewnet-splash__art-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Gentle vignette + blend toward the content edge — pure decorative shade.
   Softer than before so the artwork keeps breathing up to the seam. */
.ewnet-splash__art-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 90% at 20% 12%, transparent 64%, rgba(5, 12, 22, 0.22) 100%),
        linear-gradient(90deg, transparent 74%, rgba(11, 31, 54, 0.28) 100%);
}

/* ---------- CONTENT PANEL ---------- */
.ewnet-splash__content {
    position: relative;
    min-width: 0;
    min-height: 0;
    max-height: min(660px, calc(100dvh - 64px));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    padding: 44px 48px 34px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(246, 241, 231, 0.35) transparent;
    background:
        /* warm dusk feather on the panel edge — the art's light continues in */
        linear-gradient(90deg, var(--jh-seam) 0%, transparent 26%),
        radial-gradient(140% 90% at 95% 0%, var(--jh-accent-soft) 0%, transparent 46%),
        linear-gradient(165deg, var(--jh-navy-1) 0%, var(--jh-navy-0) 100%);
    color: var(--jh-cream);
}

.ewnet-splash__eyebrow {
    margin: 0;
    padding: 6px 14px;
    font-family: var(--jh-font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jh-accent);
    background: var(--jh-accent-soft);
    border: 1px solid rgba(245, 158, 11, 0.32);
    border: 1px solid color-mix(in srgb, var(--jh-accent) 32%, transparent);
    border-radius: 9999px;
}

.ewnet-splash__greeting {
    margin: 2px 0 0;
    font-family: var(--jh-font);
    font-weight: 700;
    font-size: clamp(2.1rem, 3.2vw, 3.05rem);
    line-height: 1.14;
    letter-spacing: 0.01em;
    color: var(--jh-cream);
    text-wrap: balance;
}

.ewnet-splash__greeting--fallback {
    font-family: var(--jh-font);
    color: var(--jh-cream);
    font-weight: 800;
}

.ewnet-splash__support {
    margin: 0;
    max-width: 52ch;
    font-family: var(--jh-font);
    font-size: 0.95rem;
    line-height: 1.66;
    color: var(--jh-cream-dim);
}

/* When the message is a paired EN + (नेपाली) body, the Devanagari line
   gets its own block so it breathes at its natural size. */
.ewnet-splash__support-en { display: block; }
.ewnet-splash__support-ne {
    display: block;
    margin-top: 6px;
    font-size: 0.9rem;
    opacity: 0.86;
}

/* ---------- FEATURED OFFERS (non-clickable tiles) ---------- */
.ewnet-splash__offers {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.ewnet-splash__offer {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    padding: 14px 13px 12px;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(246, 241, 231, 0.09) 0%, rgba(246, 241, 231, 0.05) 100%);
    border: 1px solid rgba(246, 241, 231, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: var(--jh-cream);
}

/* Restrained warm top-edge highlight — a sliver of the CTA accent, never a
   full border or loud "sale ribbon". */
.ewnet-splash__offer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 24%;
    right: 24%;
    height: 2px;
    border-radius: 9999px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--jh-accent) 62%, transparent) 50%, transparent);
    opacity: 0.7;
    pointer-events: none;
}

.ewnet-splash__offer-top {
    display: flex;
    width: 100%;
}

.ewnet-splash__offer-speed {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--jh-font);
    font-style: normal;
    font-weight: 800;
    font-size: 1.62rem;
    line-height: 1;
    color: var(--jh-accent);
}

.ewnet-splash__offer-speed small {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--jh-cream-dim);
}

.ewnet-splash__offer-name {
    font-family: var(--jh-font);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--jh-cream-dim);
    opacity: 0.82;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.ewnet-splash__offer-price {
    font-family: var(--jh-font);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--jh-cream);
}

.ewnet-splash__offer-price small {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--jh-cream-dim);
}

.ewnet-splash__offer-perk {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--jh-font);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--jh-accent);
    letter-spacing: 0.02em;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ewnet-splash__offer-perk i {
    font-size: 0.62rem;
    flex-shrink: 0;
}

/* The gift line is quieter than the bonus-days perk — it ticks over the
   festive detail, it does not shout. */
.ewnet-splash__offer-perk--gift {
    color: var(--jh-cream-dim);
    font-weight: 500;
    opacity: 0.82;
}

.ewnet-splash__offer-perk--gift i {
    color: currentColor;
}

/* ---------- CTA + BRAND ---------- */
.ewnet-splash__actions {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    width: 100%;
}

.ewnet-splash__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    line-height: 1;
    padding: 12px 26px;
    border-radius: var(--radius-full, 9999px);
    font-family: var(--jh-font);
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--jh-navy-0);
    background: linear-gradient(135deg, var(--jh-accent), #fff3c4);
    background: linear-gradient(135deg, var(--jh-accent), color-mix(in srgb, var(--jh-accent) 78%, #fff));
    text-decoration: none;
    box-shadow: 0 8px 22px -10px rgba(245, 158, 11, 0.62);
    box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--jh-accent) 62%, transparent);
    transition: transform var(--transition, 0.3s), box-shadow var(--transition, 0.3s), filter var(--transition, 0.3s);
}

.ewnet-splash__cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 12px 26px -12px rgba(245, 158, 11, 0.72);
    box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--jh-accent) 72%, transparent);
    color: var(--jh-navy-0);
}

.ewnet-splash__cta:focus-visible {
    outline: 3px solid var(--jh-cream);
    outline-offset: 3px;
}

.ewnet-splash__cta .bi {
    transition: transform 0.2s ease;
}

.ewnet-splash__cta:hover .bi,
.ewnet-splash__cta:focus-visible .bi {
    transform: translateX(3px);
}

.ewnet-splash__brand {
    margin: 0 0 0 auto;
    line-height: 0;
}

/* The official full-colour lockup (logo-splash.png) — same artwork/colours
   the navbar/footer render (blue symbol + red accent), only down-scaled.
   No filter/blend/opacity treatment: the logo renders naturally. Intrinsic
   WxH on the <img> keep CLS ~0. */
.ewnet-splash__brand-logo {
    display: block;
    width: 150px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

/* ---------- CLOSE (quiet ghost, ≥44px hit area) ---------- */
.ewnet-splash__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(246, 241, 231, 0.16);
    border-radius: var(--radius-full, 9999px);
    background: rgba(10, 22, 40, 0.28);
    color: rgba(246, 241, 231, 0.78);
    font-size: 1rem;
    cursor: pointer;
    transition: background var(--transition, 0.3s), border-color var(--transition, 0.3s), color var(--transition, 0.3s), transform var(--transition, 0.3s);
}

.ewnet-splash__close i {
    font-size: 0.95rem;
    line-height: 1;
}

.ewnet-splash__close:hover {
    background: rgba(8, 18, 32, 0.5);
    border-color: rgba(246, 241, 231, 0.38);
    color: var(--jh-cream);
}

.ewnet-splash__close:focus-visible {
    outline: 3px solid var(--jh-accent);
    outline-offset: 2px;
    border-color: rgba(246, 241, 231, 0.38);
    color: var(--jh-cream);
}

/* ---------- THEME MODIFIERS ----------
   Festival colours are accents ONLY — the navy + cream spine never changes. */

/* DASHAIN: marigold + restrained tika crimson, warm dusk lights. */
.ewnet-splash--dashain {
    --jh-accent: #F59E0B;
    --jh-accent-soft: rgba(245, 158, 11, 0.16);
    --jh-accent-ink: #B45309;
    --jh-seam: rgba(150, 60, 45, 0.18);
}

/* TIHAR / DEEPAWALI: warm gold + restrained teal, diya light. */
.ewnet-splash--tihar {
    --jh-accent: #FBBF24;
    --jh-accent-soft: rgba(16, 185, 129, 0.16);
    --jh-accent-ink: #92400E;
    --jh-seam: rgba(251, 191, 36, 0.12);
}

/* ---------- ENTRANCE (single pass, ≤800ms, no loops) ----------
   Gated behind prefers-reduced-motion which receives the fully static
   presentation instead. */
.ewnet-splash::backdrop {
    animation: jh-backdrop-in 0.28s ease-out both;
}

.ewnet-splash[open] {
    animation: jh-canvas-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ewnet-splash[open] .ewnet-splash__greeting {
    animation: jh-step-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}

.ewnet-splash[open] .jh-thread {
    animation: jh-thread-in 0.4s ease-out 0.32s both;
}

.ewnet-splash[open] .ewnet-splash__offer {
    animation: jh-step-in 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ewnet-splash[open] .ewnet-splash__offer:nth-child(1) { animation-delay: 0.36s; }
.ewnet-splash[open] .ewnet-splash__offer:nth-child(2) { animation-delay: 0.42s; }
.ewnet-splash[open] .ewnet-splash__offer:nth-child(3) { animation-delay: 0.48s; }

.ewnet-splash[open] .ewnet-splash__actions {
    animation: jh-step-in 0.36s cubic-bezier(0.16, 1, 0.3, 1) 0.52s both;
}

@keyframes jh-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes jh-canvas-in {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes jh-step-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes jh-thread-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- MOBILE / SHORT-VIEWPORT BOTTOM SHEET (<992px) ---------- */
@media (max-width: 991.98px) {
    .ewnet-splash {
        width: 100%;
        max-width: 100%;
        max-height: min(86dvh, calc(100dvh - 24px));
        border-radius: 24px 24px 0 0;
        margin: auto 0 0 0;
        align-self: end;
        inset: auto 0 0 0;
    }

    .ewnet-splash__canvas {
        grid-template-columns: 1fr;
        grid-template-rows: 96px 1fr;
    }

    .ewnet-splash__art {
        min-height: 96px;
    }

    .ewnet-splash__content {
        padding: 26px 22px 22px;
        gap: 12px;
    }

    .ewnet-splash__greeting {
        font-size: clamp(1.7rem, 6.4vw, 2.3rem);
    }

    .ewnet-splash__support {
        font-size: 0.9rem;
    }

    .ewnet-splash__offers {
        grid-template-columns: 1fr;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-right: -22px;
        padding-right: 22px;
        padding-bottom: 4px;
    }

    .ewnet-splash__offers::-webkit-scrollbar { display: none; }

    .ewnet-splash__offer {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }

    .ewnet-splash__cta {
        min-height: 48px;
        padding: 13px 24px;
    }

    .ewnet-splash__brand {
        margin-left: 0;
    }

    .ewnet-splash__brand-logo {
        width: 115px;
    }

    .ewnet-splash__close {
        top: 12px;
        right: 12px;
    }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    .ewnet-splash[open],
    .ewnet-splash[open] *,
    .ewnet-splash::backdrop {
        animation: none !important;
        transition: none !important;
    }

    .ewnet-splash__cta:hover .bi,
    .ewnet-splash__cta .bi {
        transform: none;
    }

    .ewnet-splash__cta:hover {
        transform: none;
        filter: none;
    }
}