/* ==========================================================================
   Page transition - theatre curtain (assets/js/page-transition.js)
   Two soft drapes in the site's warm brown swing shut from the sides,
   the wordmark pops up on the closed curtain, and on the next page the
   drapes pull apart again like the start of a show.
   ========================================================================== */
.kk-pt {
    position: fixed;
    inset: 0;
    z-index: 100000;
    pointer-events: none;
    visibility: hidden;
    overflow: hidden;
}
html.kk-pt-cover .kk-pt,
.kk-pt.is-active { visibility: visible; pointer-events: auto; }
/* GPU layers only while the curtain is in use - two idle full-screen layers
   cost iPhone memory on every page. */
.kk-pt.is-active .kk-pt__drape,
html.kk-pt-cover .kk-pt__drape { will-change: transform; }

/* ---------- Drapes ---------- */
.kk-pt__drape {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 51%;
    background-color: #7a5a3d;
    /* Kinderkutak doodle pattern (WhatsApp-style), a shade darker than the
       fabric. Relative to the stylesheet: ../images/curtain-pattern.svg. */
    background-image: url("../images/curtain-pattern.svg");
    background-size: 340px 340px;
    background-repeat: repeat;
}
.kk-pt__drape--l { left: 0;  transform: translateX(-101%); transform-origin: 0 100%; }
.kk-pt__drape--r { right: 0; transform: translateX(101%);  transform-origin: 100% 100%; }
/* The right drape starts at 49% of the screen (it is 51% wide, flush right),
   so its pattern is shifted back by that much: closed, the two halves read
   as one continuous pattern across the seam. */
.kk-pt__drape--r { background-position: -49vw 0; }
/* Fabric past the outer edge, so leaning the drapes (skewX) never
   uncovers the outer top corners of the screen. */
.kk-pt__drape::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 60%;
    background: inherit;
}
.kk-pt__drape--l::before { right: 100%; margin-right: -1px; }
.kk-pt__drape--r::before { left: 100%;  margin-left: -1px; }

/* ---------- Sign on the closed curtain ---------- */
.kk-pt__center {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    color: var(--kk-cream, #fbf9f8);
    text-shadow: 0 4px 18px rgba(30, 18, 8, 0.45);
}
.kk-pt__flower {
    width: clamp(64px, 9vw, 96px);
    height: auto;
    transform: scale(0);
    filter: drop-shadow(0 6px 14px rgba(30, 18, 8, 0.4));
}
.kk-pt__word {
    font-family: var(--kk-display, Georgia, serif);
    font-weight: 700;
    font-size: clamp(2.6rem, 1.6rem + 5vw, 6rem);
    letter-spacing: -0.02em;
    line-height: 1;
    display: flex;
    overflow: hidden;
    padding: 0.12em 0.05em;
    font-variation-settings: 'SOFT' 100, 'WONK' 1;
}
.kk-pt__word span { display: inline-block; transform: translateY(130%); white-space: pre; }

/* Closed state painted before JS runs on the incoming page. */
html.kk-pt-cover .kk-pt__drape,
html.kk-pt-cover .kk-pt__word span,
html.kk-pt-cover .kk-pt__flower { transform: none; }

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