/* L44 Gallery — reveal. Ported from the approved prototype. */

.l44g-rv { --rv-ink: #181617; --rv-page: #dcdcdc; --at: 50%;
	position: relative; width: var(--rv-w, 600px); max-width: 100%; aspect-ratio: var(--rv-ar, 1 / 1); margin: 0 auto;
	overflow: hidden; background: #cfcfcf; user-select: none; touch-action: pan-y; cursor: ew-resize; }

.l44g-rv__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.l44g-rv__top { -webkit-clip-path: inset(0 calc(100% - var(--at)) 0 0); clip-path: inset(0 calc(100% - var(--at)) 0 0); }

.l44g-rv__line { position: absolute; top: 0; bottom: 0; left: var(--at); width: 3px; margin-left: -1.5px; background: var(--rv-ink); pointer-events: none; }

/* Stops short of either edge by its radius, so it is always a whole circle. */
.l44g-rv__knob { position: absolute; top: 50%; left: clamp(15px, var(--at), calc(100% - 15px)); width: 30px; height: 30px;
	margin: -15px 0 0 -15px; box-sizing: border-box; border: 3px solid var(--rv-ink); border-radius: 50%; background: var(--rv-page); pointer-events: none; }

.l44g-rv.is-showing .l44g-rv__top,
.l44g-rv.is-showing .l44g-rv__line,
.l44g-rv.is-showing .l44g-rv__knob { transition: clip-path 1300ms cubic-bezier(.22,.61,.36,1), -webkit-clip-path 1300ms cubic-bezier(.22,.61,.36,1), left 1300ms cubic-bezier(.22,.61,.36,1); }

@media (prefers-reduced-motion: reduce) {
	.l44g-rv.is-showing .l44g-rv__top, .l44g-rv.is-showing .l44g-rv__line, .l44g-rv.is-showing .l44g-rv__knob { transition: none; }
}