/* WorkBack page transitions — curtains.
   Two navy panels cover the page on arrival and slide apart to reveal it ("page opening");
   when a visitor follows an internal link they slide back together ("curtains closing")
   and the next page opens the same way.

   Progressive enhancement: the covering state only exists when the inline script in
   app-shell.php has added `crm-curtain-armed` to <html> (never with reduced motion, and
   never without JS), so nobody is ever left staring at a blank page. */

.crm-curtain {
	position: fixed; inset: 0; z-index: 100000; pointer-events: none; visibility: hidden;
	--crm-curtain-ease: cubic-bezier(.77, 0, .175, 1);
	--crm-curtain-time: .8s;
}
.crm-curtain-armed .crm-curtain { visibility: visible; pointer-events: auto; }
.crm-curtain.is-open { pointer-events: none; }
.crm-curtain.is-gone { visibility: hidden; }

.crm-curtain__panel {
	position: absolute; top: 0; bottom: 0; width: 50.2%; overflow: hidden;
	background: var(--crm-navy-deep, #0e1626);
	background-image: radial-gradient(circle at 50% 120%, rgba(169, 129, 46, .22), transparent 60%);
	transition: transform var(--crm-curtain-time) var(--crm-curtain-ease);
	will-change: transform;
}
.crm-curtain__panel--l { left: 0; }
.crm-curtain__panel--r { right: 0; }
/* soft fold shading + gold hem where the two curtains meet */
.crm-curtain__panel::before {
	content: ""; position: absolute; inset: 0;
	background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 46px);
}
.crm-curtain__panel::after {
	content: ""; position: absolute; top: 0; bottom: 0; width: 2px;
	background: linear-gradient(180deg, transparent, #a9812e 25%, #d9b878 50%, #a9812e 75%, transparent);
	opacity: .9;
}
.crm-curtain__panel--l::after { right: 0; }
.crm-curtain__panel--r::after { left: 0; }

/* open = panels parked off-screen */
.crm-curtain.is-open .crm-curtain__panel--l { transform: translate3d(-101%, 0, 0); }
.crm-curtain.is-open .crm-curtain__panel--r { transform: translate3d(101%, 0, 0); }
/* closing = panels travel in from off-screen */
.crm-curtain.is-preparing .crm-curtain__panel { transition: none; }

/* brand mark, centred on the seam */
.crm-curtain__brand {
	position: absolute; left: 50%; top: 50%; z-index: 2; text-align: center;
	transform: translate(-50%, -50%);
	color: #fff; font-family: var(--crm-font-serif, Georgia, serif); font-weight: 700;
	font-size: clamp(1.6rem, 4vw, 2.6rem); letter-spacing: -.02em;
	transition: opacity .35s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.crm-curtain__brand i { font-style: normal; color: #d9b878; }
.crm-curtain__brand::after {
	content: ""; display: block; height: 2px; margin: .55rem auto 0; width: 100%;
	background: linear-gradient(90deg, transparent, #d9b878, transparent);
	transform: scaleX(0); transform-origin: 50% 50%;
	animation: crmCurtainLine 1s cubic-bezier(.2, .8, .2, 1) .15s forwards;
}
.crm-curtain.is-open .crm-curtain__brand { opacity: 0; transform: translate(-50%, -62%) scale(.96); transition-duration: .3s; }
@keyframes crmCurtainLine { to { transform: scaleX(1); } }

/* keep the page still underneath while the curtain is moving */
.crm-curtain-armed:not(.crm-curtain-ready) body { overflow: hidden; }

/* subtle page settle once the curtains part */
.crm-curtain-armed .crm-main { animation: crmPageSettle 1s cubic-bezier(.2, .8, .2, 1) .1s both; }
@keyframes crmPageSettle { from { opacity: .0; transform: translate3d(0, 14px, 0) scale(.995); } to { opacity: 1; transform: none; } }
.crm-curtain-ready .crm-main { animation: none; }

@media (prefers-reduced-motion: reduce) {
	.crm-curtain { display: none !important; }
	.crm-curtain-armed .crm-main { animation: none; }
}