/* ═══════════════════════════════════════════════════════════════════════
   Kaazhagam — stage-curtain intro (home page only)
   The curtain itself is WebGL (js/kz-curtain.js). These panels are the
   fallback, and they also cover the page for the instant before the first
   GL frame draws.
   ═══════════════════════════════════════════════════════════════════════ */

html.kz-curtain-lock,
html.kz-curtain-lock body { overflow: hidden; }

/* Set in <head> before first paint when this session has already seen it */
html.kz-curtain-skip .kz-curtain { display: none !important; }

.kz-curtain {
    position: fixed;
    inset: 0;
    z-index: 2147483000;           /* above the WhatsApp float (9999) and every modal */
    /* Failsafe: if the script never runs, the visitor is never trapped. */
    animation: kzCurtainFailsafe .6s ease 9s forwards;
}
.kz-curtain.is-js { animation: none; }
@keyframes kzCurtainFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Once the fabric is travelling off, clicks belong to the page again */
.kz-curtain.is-open,
.kz-curtain.is-leaving { pointer-events: none; }

/* ── Fallback panels ─────────────────────────────────────────────────── */
.kz-curtain__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 51%;
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .20) 0 2px, transparent 2px 64px),
        linear-gradient(100deg, #3d0c1c 0%, #6b1a3a 45%, #7e2244 70%, #3d0c1c 100%);
    transition: transform 1.45s cubic-bezier(.76, 0, .24, 1);
    will-change: transform;
}
.kz-curtain__panel--l { left: 0; }
.kz-curtain__panel--r { right: 0; }
.kz-curtain.is-open .kz-curtain__panel--l { transform: translate3d(-100%, 0, 0); }
.kz-curtain.is-open .kz-curtain__panel--r { transform: translate3d(100%, 0, 0); }
.kz-curtain--gl .kz-curtain__panel { display: none; }

/* ── WebGL canvas ────────────────────────────────────────────────────── */
.kz-curtain__gl {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
}

/* ── Brand seal ──────────────────────────────────────────────────────── */
.kz-curtain__mark {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    opacity: 0;
    transform: scale(.96);
    transition:
        opacity .9s cubic-bezier(.22, .61, .36, 1) .25s,
        transform 1.2s cubic-bezier(.22, .61, .36, 1) .25s;
}
.kz-curtain.is-armed .kz-curtain__mark { opacity: 1; transform: none; }
.kz-curtain.is-parting .kz-curtain__mark,
.kz-curtain.is-open .kz-curtain__mark {
    opacity: 0;
    transform: scale(1.06);
    transition:
        opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform 1.2s cubic-bezier(.22, .61, .36, 1);
}

/* The logo is maroon-on-light, so it sits on an ivory medallion — a brand
   seal pinned to the curtain — instead of vanishing into the velvet. */
.kz-curtain__seal {
    width: clamp(150px, 24vmin, 220px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 36%, #fffaf2 0%, #f7eee0 58%, #eadbc2 100%);
    box-shadow:
        0 0 0 1px rgba(214, 178, 122, .9),
        0 0 0 6px rgba(61, 12, 28, .55),
        0 0 0 7px rgba(214, 178, 122, .6),
        0 30px 70px rgba(0, 0, 0, .55);
}
.kz-curtain__seal img {
    width: 88%;
    height: auto;
    display: block;
    mix-blend-mode: multiply;      /* drops any white logo background into the ivory */
}

.kz-curtain__ln {
    display: block;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d4b27a, transparent);
    transition: width 1s cubic-bezier(.22, .61, .36, 1) .55s;
}
.kz-curtain.is-armed .kz-curtain__ln { width: 140px; }

@media (prefers-reduced-motion: reduce) {
    .kz-curtain { display: none !important; }
}