/**
 * Page Transition Pro — layers, shade, progress bar, loading cursor.
 *
 * Theming hooks (override on :root via theme glue):
 *   --ptp-bg           layer background while pages slide (default #ffffff)
 *   --ptp-shade-color  shade over the outgoing page in fade mode (defaults to --ptp-bg)
 *   --ptp-flash-color  accent flash on enter
 *   --ptp-accent       fallback for bar / cursor / flash when specific vars unset
 *   --ptp-bar-color    progress bar fill
 *   --ptp-bar-height   progress bar height in px (per breakpoint if theme sets it)
 *   --ptp-cursor-color loading circle stroke
 *   --ptp-cursor-size  loading circle diameter in px
 *   --ptp-scrim-color  full-screen dim during transitions (nav overlay match)
 */

/* ------------------------------------------------------------------ */
/* Full-screen dim for the whole transition (like nav hover overlay)    */
/* ------------------------------------------------------------------ */

.ptp-scrim {
	position: fixed;
	inset: 0;
	z-index: 92;
	pointer-events: none;
	background: rgba(0, 0, 0, var(--ptp-scrim-opacity, 0.18));
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.16s ease, visibility 0.16s ease;
}

.ptp-scrim.is-active {
	opacity: 1;
	visibility: visible;
}

/* ------------------------------------------------------------------ */
/* Transition layers                                                    */
/* ------------------------------------------------------------------ */

/* Below the theme's persistent chrome (bottom nav: 999, top header: 1000)
   so header + nav stay visible while pages slide, like on jeton.com. */
.ptp-layer {
	position: fixed;
	inset: 0;
	overflow: hidden;
	z-index: 90;
	background: var(--ptp-bg, #ffffff);
	will-change: transform;
}

.ptp-layer.is-incoming {
	z-index: 91;
}

/* WordPress admin bar (logged-in only) is position:fixed at the top and offsets
   normal-flow content downward by its height (html gets margin-top:32px/46px).
   The transition layers are position:fixed inset:0, so without this the layered
   content sits under the admin bar during the slide and then drops by the bar
   height at commit — a jump only logged-in users see (visitors have no bar).
   Offsetting the layers' top to the bar height keeps the outgoing pin aligned
   and removes the commit jump. WordPress-generic, so it lives in the module. */
body.admin-bar .ptp-layer {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .ptp-layer {
		top: 46px;
	}
}

.ptp-inner {
	position: relative;
	min-height: 100vh;
	will-change: transform;
}


/* One pseudo per layer: shade on the outgoing page, flash on the incoming. */
.ptp-layer::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0;
	transition: background-color 0.4s ease;
}

.ptp-layer.is-outgoing::after {
	background: var(--ptp-shade-color, var(--ptp-bg, #ffffff));
	opacity: var(--ptp-shade, 0);
}

/* Darken: black overlay — same --ptp-shade timing/values, no fade-to-bg tint. */
.ptp-layer.is-outgoing.is-shade-darken::after {
	background: #000;
}

/* Prepare phase: the shade warms toward the accent before the new page rises. */
.ptp-layer.is-outgoing.is-warm::after {
	background: color-mix(
		in srgb,
		var(--ptp-shade-color, var(--ptp-bg, #ffffff)) calc((100 - var(--ptp-warm-accent-percent, 35)) * 1%),
		var(--ptp-flash-color, var(--ptp-accent, #3366cc)) calc(var(--ptp-warm-accent-percent, 35) * 1%)
	);
}

.ptp-layer.is-incoming::after {
	background: var(--ptp-flash-color, var(--ptp-accent, #3366cc));
	opacity: var(--ptp-flash, 0);
}

/* Accent flash overlay — fixed viewport layer during enter (above page layers). */
.ptp-flash-overlay {
	pointer-events: none;
	background: var(--ptp-flash-color, var(--ptp-accent, #3366cc));
	opacity: 0;
}

.ptp-flash-overlay--viewport {
	position: fixed;
	inset: 0;
	z-index: 94;
}

.ptp-anchor {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Staged progress bar                                                  */
/* ------------------------------------------------------------------ */

.ptp-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--ptp-bar-height, 6px);
	z-index: 950;
	pointer-events: none;
	background: var(--ptp-bar-color, var(--ptp-accent, #3366cc));
	transform: scaleX(0);
	transform-origin: 0 50%;
	opacity: 0;
	transition: opacity 0.3s ease;
}

html[dir="rtl"] .ptp-bar {
	transform-origin: 100% 50%;
}

/* ------------------------------------------------------------------ */
/* During transition: scroll is locked via the JS lockFlag (default ptpTransitionLock;
   no overflow lock on desktop, so the scrollbar stays). is-transitioning drives
   the progress bar + scrim only. */
html.is-transitioning .ptp-bar {
	opacity: 1;
	transition-delay: 0.05s;
}

/* Mobile: scroll.js only blocks wheel, so touch scrolling would still drag the
   incoming page during its enter (it lives in a fixed layer, but the window
   still scrolls). The JS blocks touchmove for the whole transition; these hints
   stop rubber-banding / scroll chaining before the handler fires. Scoped to
   coarse-pointer (touch) devices so the desktop scrollbar — and its width —
   stays put. */
@media (pointer: coarse) {
	html.is-transitioning,
	html.is-transitioning body {
		touch-action: none;
		overscroll-behavior: none;
	}
}

.ptp-bar.is-fade-out {
	opacity: 0 !important;
	transition-delay: 0s;
}

.ptp-cursor.is-fade-out {
	opacity: 0 !important;
}

body.ptp-hide-native-cursor,
body.ptp-hide-native-cursor * {
	cursor: none !important;
}

/* ------------------------------------------------------------------ */
/* Cursor-following loading circle (desktop)                            */
/* ------------------------------------------------------------------ */

.ptp-cursor {
	position: fixed;
	top: calc(var(--ptp-cursor-size, 56px) / -2);
	left: calc(var(--ptp-cursor-size, 56px) / -2);
	width: var(--ptp-cursor-size, 56px);
	height: var(--ptp-cursor-size, 56px);
	z-index: 1200;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.ptp-cursor.is-active {
	opacity: 1;
}

.ptp-cursor svg {
	display: block;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.ptp-cursor circle {
	fill: none;
	stroke-width: 3;
	stroke-linecap: round;
}

.ptp-cursor .ptp-cursor-track {
	stroke: var(--ptp-cursor-color, var(--ptp-accent, #3366cc));
	opacity: 0.25;
}

/* r=24 → circumference 2π·24 ≈ 150.8; --p (0→1) draws the arc. */
.ptp-cursor .ptp-cursor-fill {
	stroke: var(--ptp-cursor-color, var(--ptp-accent, #3366cc));
	stroke-dasharray: 150.8;
	stroke-dashoffset: calc(150.8 * (1 - var(--p, 0)));
}

/* ------------------------------------------------------------------ */
/* Boot mask (backup of the inline critical CSS printed in wp_head)     */
/* PHP boot_css() also hides footerSelector when the glue sets one.     */
/* ------------------------------------------------------------------ */

body.pt-pro-boot #content {
	visibility: hidden;
	animation: ptp-auto-reveal 0s 3s forwards;
}

@keyframes ptp-auto-reveal {
	to {
		visibility: visible;
	}
}

/* ------------------------------------------------------------------ */
/* Reduced motion: no layers, no parallax, no cursor — instant swap     */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.ptp-cursor,
	.ptp-bar,
	.ptp-scrim {
		display: none;
	}

	.ptp-layer,
	.ptp-inner {
		transform: none !important;
		will-change: auto;
	}

	body.pt-pro-boot #content {
		animation-delay: 0.5s;
	}
}