/* ==========================================================================
   PAGE TRANSITION — OVERLAY
   --------------------------------------------------------------------------
   Three stacked panels (bronze → dark → ink) that wipe up from the bottom
   before the browser navigates to another page on the site.

   Behaviour: assets/js/components/page-transition.js
   Markup:    #kyTr.ky-tr containing .ky-panel.p1, .ky-panel.p2, .ky-panel.p3
              (must be present on every page for the effect to run)
   ========================================================================== */

.ky-tr {
	position: fixed;
	inset: 0;
	z-index: 9998;
	pointer-events: none;
}

/* Each panel starts collapsed to the bottom edge; GSAP scales it up. */
.ky-tr .ky-panel {
	position: absolute;
	inset: 0;
	transform: scaleY(0);
	transform-origin: bottom;
}

/* Panel colours, in the order they appear (p3 first, p1 last). */
.ky-tr .p1 { background: #16130f; } /* ink */
.ky-tr .p2 { background: #241f19; } /* dark */
.ky-tr .p3 { background: #8a7250; } /* bronze */

/* Hidden state, toggled by the script. */
.ky-tr.ky-off {
	display: none;
}

/* No transition for visitors who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.ky-tr {
		display: none;
	}
}