/* ══════════════════════════════════════════════════════════════════
   Kirk SPA — Melt Transition Overlay
   A full-screen div (#kir-tx) lives on top of everything.
   The router drives it through three phases:
     1. idle      → invisible, pointer-events:none
     2. melt-out  → captures a screenshot via html2canvas (or CSS
                    snapshot fallback), applies a liquid displacement
                    filter while fading to opaque, then signals done
     3. melt-in   → fades the overlay back out, then becomes idle
   ══════════════════════════════════════════════════════════════════ */

/* Hidden SVG filter bank — never renders visually */
#kir-tx-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* ── Overlay container ─────────────────────────────────────────── */
#kir-tx {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    /* Fully transparent by default */
    opacity: 0;
    /* The canvas snapshot will be placed as background */
    background: transparent center / cover no-repeat;
    /* Filter starts neutral; JS animates the seed via CSS custom prop */
    will-change: opacity, filter;
}

/* ── Phase: melt-out ───────────────────────────────────────────── */
#kir-tx.kir-tx--melting {
    pointer-events: all;  /* block interaction during transition */
    animation: kirTxMeltOut 0.55s cubic-bezier(0.4, 0, 0.8, 0.6) forwards;
}

/* ── Phase: melt-in (new page reveals) ─────────────────────────── */
#kir-tx.kir-tx--revealing {
    pointer-events: all;
    animation: kirTxMeltIn 0.5s cubic-bezier(0.2, 0.85, 0.25, 1) forwards;
}

/* ═══════════════════════════════════════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════════════════════════════════════ */

/* Melt out: fade in the snapshot, then warp + fade to black */
@keyframes kirTxMeltOut {
    0% {
        opacity: 0;
        filter: url(#kir-melt-filter) brightness(1);
        transform: scale(1) translateY(0px);
    }
    /* Snapshot snaps in */
    8% {
        opacity: 1;
        filter: url(#kir-melt-filter) brightness(1);
        transform: scale(1) translateY(0px);
    }
    /* Warp builds up — displacement is animated via JS on the SVG element */
    55% {
        opacity: 1;
        filter: url(#kir-melt-filter) brightness(0.8) saturate(0.6);
        transform: scale(1.015) translateY(4px);
    }
    /* Dissolve to black */
    100% {
        opacity: 0;
        filter: url(#kir-melt-filter) brightness(0.2) saturate(0);
        transform: scale(1.04) translateY(14px);
    }
}

/* Melt in: start from black warp, reveal new page cleanly */
@keyframes kirTxMeltIn {
    0% {
        opacity: 1;
        filter: url(#kir-melt-filter) brightness(0.15) saturate(0);
        transform: scale(1.04) translateY(-10px);
    }
    40% {
        opacity: 0.6;
        filter: url(#kir-melt-filter) brightness(0.75) saturate(0.5);
        transform: scale(1.01) translateY(-3px);
    }
    100% {
        opacity: 0;
        filter: none brightness(1) saturate(1);
        transform: scale(1) translateY(0px);
    }
}

/* ── Accessibility: respect reduced-motion preference ─────────── */
@media (prefers-reduced-motion: reduce) {
    #kir-tx.kir-tx--melting {
        animation: kirTxFadeOut 0.25s ease forwards;
    }
    #kir-tx.kir-tx--revealing {
        animation: kirTxFadeIn 0.25s ease forwards;
    }

    @keyframes kirTxFadeOut {
        from { opacity: 0; }
        to   { opacity: 0; }
    }
    @keyframes kirTxFadeIn {
        from { opacity: 0; }
        to   { opacity: 0; }
    }
}