/* Sits above everything, including the admin bar — a page transition
   overlay needs to be the topmost thing on screen regardless of what
   theme/plugin z-index conventions exist elsewhere on the page. Starts
   fully covering the screen by default (no JS needed for the initial
   state), so there's never a flash of uncovered content before the
   reveal script runs. */
.xtool-pt-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.xtool-pt-overlay--fade,
.xtool-pt-overlay--slide-up,
.xtool-pt-overlay--slide-down,
.xtool-pt-overlay--slide-left,
.xtool-pt-overlay--slide-right,
.xtool-pt-overlay--circle,
.xtool-pt-overlay--circle-corner,
.xtool-pt-overlay--zoom {
	background: var(--xtool-pt-bg, #1C1C1E);
}

.xtool-pt-overlay--fade {
	opacity: 1;
	transition: opacity var(--xtool-pt-duration, 500ms) ease;
}
.xtool-pt-overlay--fade.is-revealed {
	opacity: 0;
}

.xtool-pt-overlay--slide-up {
	transform: translateY(0);
	transition: transform var(--xtool-pt-duration, 500ms) ease;
}
.xtool-pt-overlay--slide-up.is-revealed {
	transform: translateY(-100%);
}

.xtool-pt-overlay--slide-down {
	transform: translateY(0);
	transition: transform var(--xtool-pt-duration, 500ms) ease;
}
.xtool-pt-overlay--slide-down.is-revealed {
	transform: translateY(100%);
}

.xtool-pt-overlay--slide-left {
	transform: translateX(0);
	transition: transform var(--xtool-pt-duration, 500ms) ease;
}
.xtool-pt-overlay--slide-left.is-revealed {
	transform: translateX(-100%);
}

.xtool-pt-overlay--slide-right {
	transform: translateX(0);
	transition: transform var(--xtool-pt-duration, 500ms) ease;
}
.xtool-pt-overlay--slide-right.is-revealed {
	transform: translateX(100%);
}

.xtool-pt-overlay--circle {
	clip-path: circle(150% at 50% 50%);
	transition: clip-path var(--xtool-pt-duration, 500ms) ease;
}
.xtool-pt-overlay--circle.is-revealed {
	clip-path: circle(0% at 50% 50%);
}

/* Same clip-path circle mechanism as the template above, just originating
   from a corner instead of dead center — a lower-risk way to add a
   visually distinct new template than inventing a new CSS technique. */
.xtool-pt-overlay--circle-corner {
	clip-path: circle(150% at 0% 0%);
	transition: clip-path var(--xtool-pt-duration, 500ms) ease;
}
.xtool-pt-overlay--circle-corner.is-revealed {
	clip-path: circle(0% at 0% 0%);
}

.xtool-pt-overlay--zoom {
	transform: scale(1);
	opacity: 1;
	transition: transform var(--xtool-pt-duration, 500ms) ease, opacity var(--xtool-pt-duration, 500ms) ease;
}
.xtool-pt-overlay--zoom.is-revealed {
	transform: scale(1.15);
	opacity: 0;
}

/* Wave (Left/Right/Up/Down) — a plain colored div, same as every other
   template; the wavy edge lives entirely in the clip-path polygon itself
   (computed server-side, see Module::wave_polygons()), which is set as
   both the element's own inline `clip-path` (the "covered" shape) and a
   `--xtool-pt-wave-revealed` custom property (the "revealed" shape) —
   `.is-revealed` just swaps to that second polygon and the browser
   animates every point's straight-line path from one to the other, which
   is what makes the whole wave slide as a single rigid shape rather than
   reshaping frame to frame. No extra child element needed, unlike the
   earlier SVG-based version this replaced (confirmed live to get stuck
   partway instead of fully clearing — see CLAUDE.md). */
.xtool-pt-overlay--wave-left,
.xtool-pt-overlay--wave-right,
.xtool-pt-overlay--wave-up,
.xtool-pt-overlay--wave-down {
	background: var(--xtool-pt-bg, #1C1C1E);
	transition: clip-path var(--xtool-pt-duration, 500ms) ease;
}

.xtool-pt-overlay--wave-left.is-revealed,
.xtool-pt-overlay--wave-right.is-revealed,
.xtool-pt-overlay--wave-up.is-revealed,
.xtool-pt-overlay--wave-down.is-revealed {
	clip-path: var(--xtool-pt-wave-revealed);
}

/* Curtain — two half-width panels meeting in the middle, rather than the
   overlay element itself, since a single element can't visually split
   into two independently-animated halves. */
.xtool-pt-overlay--curtain {
	background: transparent;
}

.xtool-pt-panel {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50%;
	background: var(--xtool-pt-bg, #1C1C1E);
	transition: transform var(--xtool-pt-duration, 500ms) ease;
}

.xtool-pt-panel--left {
	left: 0;
	transform: translateX(0);
}

.xtool-pt-panel--right {
	right: 0;
	transform: translateX(0);
}

.xtool-pt-overlay--curtain.is-revealed .xtool-pt-panel--left {
	transform: translateX(-100%);
}

.xtool-pt-overlay--curtain.is-revealed .xtool-pt-panel--right {
	transform: translateX(100%);
}

/* Custom template — deliberately no built-in animation at all here; the
   admin's own Custom CSS (loaded as an inline style right after this
   file, so it always wins the cascade) is expected to define the actual
   covered → .is-revealed transition. */
.xtool-pt-overlay--custom {
	background: var(--xtool-pt-bg, #1C1C1E);
}

.xtool-pt-logo {
	position: relative;
	z-index: 1;
	max-width: 160px;
	max-height: 80px;
}

.xtool-pt-logo img {
	display: block;
	max-width: 100%;
	max-height: 80px;
	object-fit: contain;
}

.xtool-pt-logo-text {
	font-size: 18px;
	font-weight: 600;
	color: #fff;
}