/* ============================================================================
   OUDADEN ART — the embossed cream world, revealed by scrolling
   ----------------------------------------------------------------------------
   The supplied artwork is a 2:5 composition: a carved arch with a lantern down
   the left, dense geometric motifs down the right, and a deliberately quiet
   cream column through the middle where the reading happens.

   WHAT SHIPS, AND WHY IT IS NOT A FRAME SEQUENCE

   The kit's 8-second reveal was measured frame by frame and is a monotonic
   upward wipe of one final relief: extracted frames 48 and 60 have identical
   lower bands while 60 only adds relief higher up, with a soft boundary about
   three bands deep. So the sequence is reproduced by ONE relief asset and one
   soft mask whose edge travels upward with scroll — 134 KB instead of 7.8 MB
   across 96 frames, with no decode cache, no per-frame scheduling, and nothing
   to fall out of sync. The measurement is recorded in the asset manifest.

   The relief itself is a genuine transparency, derived as the difference between
   the two supplied compositions, so it composites over the site's own cream
   token without the tone mismatch an opaque cream image would bring.
   ========================================================================= */

:root {
	/* 0 → the empty cream/fabric surface. 1 → fully emerged carving. */
	--oa-reveal: 0;
	/* Where the relief's own edges sit relative to its width. */
	--oa-relief: url("../../app/assets/reveal/reveal-relief.webp");
	/*
	 * Slice widths are fractions of the relief's OWN rendered width, which the
	 * script measures — not of the viewport. Sized against the viewport instead,
	 * a slice wider than the artwork simply shows the middle of it, which put a
	 * second lantern in the centre of the page the first time.
	 */
	--oa-relief-w: 420px;
	--oa-side-l: calc(var(--oa-relief-w) * 0.34);
	--oa-side-r: calc(var(--oa-relief-w) * 0.44);
	--oa-parallax: 0px;
}

/*
 * A fixed backdrop, not a document-tall element.
 *
 * The composition was authored as a phone wallpaper, so scaling it to the
 * viewport HEIGHT renders it at very nearly the viewport width on a phone —
 * which is exactly how the mobile mockup is framed. Scaling by height also
 * means the geometry is never stretched independently in X and Y, and nothing
 * has to be tiled or repeated to cover a long page.
 *
 * It sits behind everything, takes no pointer input, and is invisible to
 * assistive technology.
 */
#oa-reveal {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	opacity: 0;
	transition: opacity .45s ease;
	/* Its own stacking and paint area, so it never invalidates the page. */
	contain: strict;
}

/* Pale and shallow, as the brief asks: the carving should read as plaster
   catching the light, never as a picture behind the words. */
#oa-reveal.is-on {
	opacity: 0.5;
}

.oa-reveal__side {
	position: absolute;
	top: 0;
	bottom: 0;
	background-image: var(--oa-relief);
	background-repeat: no-repeat;
	/* Height-driven: one uniform scale, ratio preserved. */
	background-size: auto 118%;
	transform: translate3d(0, var(--oa-parallax), 0);
	will-change: transform;

	/*
	 * The reveal itself.
	 *
	 * A single soft-edged gradient whose boundary travels from below the bottom
	 * edge (nothing emerged) to above the top edge (fully emerged). At --oa-reveal
	 * 0 the stop sits at -16%, so the layer is completely clear; at 1 it sits at
	 * 100% and the whole relief is present. The 16% band is what makes the edge
	 * read as carving coming up out of the plaster rather than a wipe.
	 */
	--oa-stop: calc(var(--oa-reveal) * 116% - 16%);
	-webkit-mask-image: linear-gradient(to top, #000 0%, #000 var(--oa-stop), transparent calc(var(--oa-stop) + 16%));
	mask-image: linear-gradient(to top, #000 0%, #000 var(--oa-stop), transparent calc(var(--oa-stop) + 16%));
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* The arch and lantern hold the left edge; the motif field holds the right. The
   inward fade toward the quiet centre is baked into the asset. */
.oa-reveal__side--l {
	left: 0;
	width: var(--oa-side-l);
	background-position: left center;
}

.oa-reveal__side--r {
	right: 0;
	width: var(--oa-side-r);
	background-position: right center;
}

/*
 * Narrow screens get the composition at its intended framing: the ornament runs
 * off both edges at full size rather than the whole wallpaper being squeezed
 * into one phone screen.
 */
@media (max-width: 760px) {
	:root {
		--oa-side-l: calc(var(--oa-relief-w) * 0.40);
		--oa-side-r: calc(var(--oa-relief-w) * 0.50);
	}
	.oa-reveal__side {
		background-size: auto 108%;
	}
}

/*
 * Reduced motion: the relief is simply present and still. It is part of the
 * design, not decoration to be removed — what goes away is the movement.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--oa-reveal: 1;
		--oa-parallax: 0px;
	}
	#oa-reveal {
		transition: none;
	}
	.oa-reveal__side {
		transform: none;
		will-change: auto;
	}
}