/* Home page furniture (S01): scroll ruler on the left edge, section index rail on the right edge, custom cursor.
   All three are decoration or navigation helpers; the page works without them. Ported from prototypes/home.html. */

.ruler {
	position: fixed;
	inset-inline-start: calc(var(--margin) / 2 - 14px);
	inset-block: 30vh;
	height: 40vh;
	width: 28px;
	z-index: 40;
	pointer-events: none;
	mix-blend-mode: difference;
	color: var(--white);
}

.ruler .ticks {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 12px;
	width: 14px;
	background: repeating-linear-gradient(to bottom, currentcolor 0 1px, transparent 1px 8px);
	opacity: 0.5;
}

.ruler .mk {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	width: 28px;
	height: 1px;
	background: currentcolor;
	will-change: transform;
}

.rail {
	position: fixed;
	inset-inline-end: calc(var(--margin) / 2 - 20px);
	inset-block-start: 50%;
	transform: translateY(-50%);
	z-index: 40;
	display: grid;
	gap: 2px;
	mix-blend-mode: difference;
	color: var(--white);
}

.rail a {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	height: 24px;
	font: 500 11px var(--font-mono);
	letter-spacing: 0.12em;
	opacity: 0.6;
	transition: opacity 0.3s;
}

.rail a i {
	font-style: normal;
}

.rail a b {
	display: block;
	width: 12px;
	height: 1px;
	background: currentcolor;
	transition: width 0.5s var(--ease);
}

.rail a span {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-transform: uppercase;
	transition: max-width 0.5s var(--ease);
}

:lang(ar) .rail a span {
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--font-ar);
}

.rail a:hover,
.rail a:focus-visible,
.rail a.on {
	opacity: 1;
}

.rail a.on b {
	width: 24px;
}

.rail a:hover span,
.rail a:focus-visible span {
	max-width: 130px;
}

/* Cursor: a ring that follows the pointer, grows over links, says DRAG over sliders. Fine pointers on wide screens only. */
.cur {
	opacity: 0;
	transition: opacity 0.4s;
	position: fixed;
	inset: 0 auto auto 0;
	z-index: 300;
	pointer-events: none;
	width: 0;
	height: 0;
	mix-blend-mode: difference;
	color: var(--white);
}

.cur i {
	position: absolute;
	inset-inline-start: -18px;
	inset-block-start: -18px;
	width: 36px;
	height: 36px;
	border: 1px solid currentcolor;
	border-radius: 50%;
	transition:
		transform 0.45s var(--ease),
		background 0.3s;
}

.cur b {
	position: absolute;
	inset-inline-start: -2px;
	inset-block-start: -2px;
	width: 4px;
	height: 4px;
	background: currentcolor;
	border-radius: 50%;
}

.cur em {
	position: absolute;
	inset-block-start: 26px;
	inset-inline-start: -20px;
	width: 40px;
	text-align: center;
	font: 500 10px var(--font-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 0.3s;
	font-style: normal;
}

.cur.on {
	opacity: 1;
}

.cur.link i {
	transform: scale(1.9);
	background: rgb(var(--white-rgb) / 0.18);
}

.cur.drag i {
	transform: scale(2.2);
}

.cur.drag em {
	opacity: 1;
}

@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
	html.cursor-on,
	html.cursor-on a,
	html.cursor-on button {
		cursor: none;
	}

	html.cursor-on.cursor-sys,
	html.cursor-on.cursor-sys *,
	html.cursor-on.cursor-sys a,
	html.cursor-on.cursor-sys button {
		cursor: auto;
	}

	html.cursor-on.cursor-sys a,
	html.cursor-on.cursor-sys button,
	html.cursor-on.cursor-sys [role='button'],
	html.cursor-on.cursor-sys label {
		cursor: pointer;
	}

	html.cursor-sys .cur {
		opacity: 0;
	}
}

@media (hover: none), (pointer: coarse) {
	.cur {
		display: none;
	}
}

/* the rail needs room beside the content; ruler too */
@media (max-width: 1100px) {
	.rail,
	.ruler {
		display: none;
	}
}

.rm .cur,
.rm .cur i,
.rm .rail a,
.rm .rail a b,
.rm .rail a span {
	transition: none;
}