/**
 * Reveal line-art layer + branded cursor.
 * Ported from design/prototype/assets/js/{reveal.js,cursor.js} (previously
 * injected inline); logical properties only so both ar (RTL) and en (LTR)
 * render identically.
 */

/* ── reveal line art (reveal.js) ───────────────────────────── */

.rv-host {
	isolation: isolate;
}

/* !important beats WordPress's constrained layout (`.is-layout-constrained > *`
   max-width + auto margins), which otherwise narrows the layer to the content
   width on the menu page's <main>. */
.rv-layer {
	max-inline-size: none !important;
	margin: 0 !important;
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
	--x: -999px;
	--y: -999px;
	--r: 1px;
	color: var(--rv-ink);
	opacity: var(--rv-a);
	-webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0, #000 42%, transparent 100%);
	mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0, #000 42%, transparent 100%);
}

.rv-layer path,
symbol[id^="rv-art-"] path {
	fill: none;
	stroke: currentcolor;
	stroke-width: 1;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.rv-layer[data-tone="light"] {
	--rv-ink: #1D3557;
	--rv-a: .62;
}

.rv-layer[data-tone="dark"] {
	--rv-ink: #E9ECEE;
	--rv-a: .5;
}

@media print {

	.rv-layer {
		display: none;
	}
}

/* ── branded cursor (cursor.js) ────────────────────────────── */

/* Physical left/top on purpose: pointer coordinates (clientX/Y) are physical,
   so logical insets would anchor the cursor to the right edge on RTL pages. */
html.has-cursor,
html.has-cursor * {
	cursor: none !important;
}

html.has-cursor :is(input, textarea, [contenteditable="true"]) {
	cursor: text !important;
}

.sc-dot,
.sc-ring {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2147483646;
	pointer-events: none;
	border-radius: 50%;
	opacity: 0;
	transition:
		opacity .25s ease,
		inline-size .3s cubic-bezier(.22, 1, .36, 1),
		block-size .3s cubic-bezier(.22, 1, .36, 1),
		margin-left .3s cubic-bezier(.22, 1, .36, 1),
		margin-top .3s cubic-bezier(.22, 1, .36, 1),
		background-color .3s,
		border-color .3s;
}

.sc-dot {
	inline-size: 8px;
	block-size: 8px;
	margin-top: -4px;
	margin-left: -4px;
	background: #E63946;
}

.sc-ring {
	inline-size: 36px;
	block-size: 36px;
	margin-top: -18px;
	margin-left: -18px;
	border: 1.5px solid var(--sc-ink, #1D3557);
	background: transparent;
}

.sc-on .sc-dot,
.sc-on .sc-ring {
	opacity: 1;
}

.sc-hot .sc-ring {
	inline-size: 58px;
	block-size: 58px;
	margin-top: -29px;
	margin-left: -29px;
	background: color-mix(in oklab, var(--sc-ink, #1D3557) 10%, transparent);
}

.sc-hot .sc-dot {
	inline-size: 6px;
	block-size: 6px;
	margin-top: -3px;
	margin-left: -3px;
}

.sc-down .sc-ring {
	inline-size: 28px;
	block-size: 28px;
	margin-top: -14px;
	margin-left: -14px;
}

.sc-text .sc-dot,
.sc-text .sc-ring {
	opacity: 0;
}

@media print {

	.sc-dot,
	.sc-ring {
		display: none;
	}
}