/* QKStudio — transición entre páginas. Prefijo .qk-pt (aislado; no toca otros estilos).
   Lavanda con el título en Lacquer. Geometría: panel que sube con una "cúpula" casi semicircular que rebota (elástica) en el borde de ataque y una "panza" que se aplana al salir.
   Estados (clases en .qk-pt): .is-in (cubre) · .is-cover (cubierto/estático) · .is-out (se va hacia arriba). html.qk-pt-cover = página nueva ya cubierta desde el primer pintado. */
.qk-pt{ --pt-bg:var(--ax,#8D8CFF); --pt-ink:#261e25; position:fixed; inset:0; z-index:9999; overflow:hidden; visibility:hidden; pointer-events:none; }
.qk-pt.is-in, .qk-pt.is-cover, .qk-pt.is-out, html.qk-pt-cover .qk-pt{ visibility:visible; }
.qk-pt.is-in, .qk-pt.is-cover, html.qk-pt-cover .qk-pt{ pointer-events:auto; }

.qk-pt__panel{ position:absolute; inset:0; background:var(--pt-bg); transform:translate3d(0,100%,0); will-change:transform; }
.qk-pt__dome{ position:absolute; left:-25%; width:150%; bottom:100%; height:52vw; background:var(--pt-bg); border-radius:50% 50% 0 0 / 100% 100% 0 0; transform-origin:50% 100%; transform:scaleY(0); }
.qk-pt__belly{ position:absolute; left:-25%; width:150%; top:100%; height:46vw; background:var(--pt-bg); border-radius:0 0 50% 50% / 0 0 100% 100%; transform-origin:50% 0; }

.qk-pt__label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:0 5vw; color:var(--pt-ink); font-family:"Lacquer",var(--font-display,"Space Grotesk","Helvetica Neue",Arial,sans-serif); font-weight:400; font-size:clamp(1.15rem,2.3vw,2.3rem); line-height:1; letter-spacing:.03em; opacity:0; }
.qk-pt__text{ display:block; white-space:nowrap; text-align:center; text-transform:lowercase; } /* el título siempre en minúscula (aunque en el contenido esté capitalizado) */
.qk-pt__l{ display:inline-block; overflow:hidden; padding:.18em 0 .16em; margin:-.18em 0 -.16em; vertical-align:top; }
.qk-pt__li{ display:inline-block; transform:translate3d(0,115%,0); will-change:transform; }
.qk-pt__sp{ display:inline-block; width:.28em; }

/* Cubierto (estático): estado final de .is-in y estado inicial de .is-out. */
.qk-pt.is-cover .qk-pt__panel, html.qk-pt-cover .qk-pt__panel{ transform:none; }
.qk-pt.is-cover .qk-pt__dome, html.qk-pt-cover .qk-pt__dome{ transform:none; }
.qk-pt.is-in .qk-pt__label, .qk-pt.is-cover .qk-pt__label, .qk-pt.is-out .qk-pt__label, html.qk-pt-cover .qk-pt__label{ opacity:1; }
.qk-pt.is-cover .qk-pt__li, html.qk-pt-cover .qk-pt__li{ transform:none; }

/* Entrada: el panel sube (expo-out), la cúpula se estira y las letras suben con rebote elástico, una a una. */
.qk-pt.is-in .qk-pt__panel{ animation:qkptUp .72s cubic-bezier(.5,0,.15,1) both; }
.qk-pt.is-in .qk-pt__dome{ animation:qkptDome .72s linear both; }
.qk-pt.is-in .qk-pt__li{ animation:qkptRise .42s cubic-bezier(.34,1.7,.5,1) calc(.06s + var(--i,0) * .018s) both; }

/* Salida: el panel se va hacia arriba (expo in-out); la panza se aplana; las letras se van antes. */
.qk-pt.is-out .qk-pt__panel{ animation:qkptOut .7s cubic-bezier(.87,0,.13,1) both; }
.qk-pt.is-out .qk-pt__belly{ animation:qkptBelly .7s cubic-bezier(.87,0,.13,1) both; }
.qk-pt.is-out .qk-pt__li{ animation:qkptLeave .42s cubic-bezier(.7,0,.84,0) calc(var(--i,0) * .02s) both; }

@keyframes qkptUp{ from{ transform:translate3d(0,100%,0); } to{ transform:translate3d(0,0,0); } }
/* La cúpula crece rápido, se pasa un poco (elástico) y se asienta. */
@keyframes qkptDome{ 0%{ transform:scaleY(0); animation-timing-function:cubic-bezier(.2,.8,.3,1); } 55%{ transform:scaleY(1.14); animation-timing-function:ease-in-out; } 100%{ transform:scaleY(1); } }
@keyframes qkptRise{ from{ transform:translate3d(0,115%,0); } to{ transform:translate3d(0,0,0); } }
@keyframes qkptOut{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,-100%,0); } }
@keyframes qkptBelly{ from{ transform:scaleY(1); } to{ transform:scaleY(0); } }
@keyframes qkptLeave{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,-115%,0); } }

@media (max-width:600px){ .qk-pt__label{ font-size:clamp(1.3rem,6.4vw,1.9rem); } .qk-pt__dome{ height:60vw; } .qk-pt__belly{ height:54vw; } }
@media (prefers-reduced-motion:reduce){ .qk-pt{ display:none; } }