/*
 * Hero collage stage (docs/HOMEPAGE.md, reference R1).
 *
 * The stage is R1's collage region: x 0.405–1.000 of the panel, from the
 * bottom of the header band (y 0.100) to the bottom (1.000). Its aspect ratio
 * is that region's, 0.777, so the layer boxes below keep R1's proportions at
 * every width. Layer boxes are R1 anchors converted to this stage:
 *   x' = (x − 0.405) / 0.595,   y' = (y − 0.100) / 0.900.
 *
 * FROZEN (human review 2026-09-24, PASS): the geometry of the tree, the
 * fish/tree overlap, the landscape band, the foreground ridge and the person is
 * the accepted baseline. Change it only if later typography creates an actual
 * collision (docs/HOMEPAGE.md).
 *
 * Layers never distort: object-fit contain for cut-outs, so a replacement
 * image keeps its box (C02). No filter, shadow or halo is added (C05).
 */

.fct-hero-collage {
	position: relative;
	width: 100%;
	aspect-ratio: 0.777;
	isolation: isolate;
	/* Decoration and metaphor, never a click target (HE06). */
	pointer-events: none;
}

.fct-hero-collage__layer,
.fct-hero-collage__disc {
	position: absolute;
	display: block;
	max-width: none;
	margin: 0;
}

.fct-hero-collage__layer {
	height: auto;
	object-fit: contain;
}

/*
 * Tuned against R1 with the approved source images (Phase 3, HERO-VISUAL).
 * Boxes are fitted to each runtime image's aspect ratio, so object-fit
 * contain leaves no slack; the collage anchors are measured on ink.
 */

/*
 * Landscape: the band R1 cuts from its landscape, traced from the panel
 * (organic-r1.svg, R1 0.494–0.998 × 0.767–0.995, aspect 2.596). The approved
 * photo is a full scene with a sunset sky; R1's band is rock and mountain in
 * muted grey-brown. So the frame holds the torn shape, and inside it the photo
 * is cropped low and zoomed 1.35 × around its focal point (mountains and rock,
 * little sky), then toned down in CSS: less saturation, a little contrast and
 * warmth, and multiplied onto the paper so the grain runs through it. Nothing
 * is baked into the image.
 */
.fct-hero-collage__layer--landscape {
	left: 15%;
	top: 74.1%;
	width: 84.7%;
	height: 25.3%;
	overflow: hidden;
	mix-blend-mode: multiply;
	-webkit-mask: url("../../assets/masks/organic-r1.svg?v=36775fbe25ca") center / 100% 100% no-repeat;
	mask: url("../../assets/masks/organic-r1.svg?v=36775fbe25ca") center / 100% 100% no-repeat;
}

.fct-hero-collage__photo {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transform: scale(1.35);
	filter: saturate(0.55) contrast(1.08) sepia(0.12) brightness(0.98);
}

/* Gold circle: R1 centre (0.550, 0.370), diameter 0.26 of the panel width. */
/*
 * Gold circle, a roughly printed disc as in R1 rather than a perfect CSS
 * circle (assets/masks/disc-r1.svg): a perimeter that wanders, a few worn arcs
 * where the rim fades and larger irregular patches of paint are missing, and a
 * faint screen-print unevenness in the fill; the interior stays solid Learning
 * Gold. The painted edge wanders in and out, so the box is 3 % larger around
 * the same centre and the mask's circle is the former size (43.7 % of the
 * stage at 2.5 % / 13 %). --fct-disc-bleed is that ratio (read by HERO-VISUAL).
 */
.fct-hero-collage__disc {
	--fct-disc-bleed: 1.03;
	left: calc(2.5% - 43.7% * 0.015);
	top: calc(13% - 43.7% * 0.015 * 0.777);
	width: calc(43.7% * 1.03);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	-webkit-mask: url("../../assets/masks/disc-r1.svg?v=b0e4f5febd14") center / 100% 100% no-repeat;
	mask: url("../../assets/masks/disc-r1.svg?v=b0e4f5febd14") center / 100% 100% no-repeat;
}

/*
 * Tree: crown near R1's top, trunk through the fish's rear. Scaled 0.9 around
 * the fish region (stage 45 %, 25 %), 0.6 % right and 2.7 % up, so the fish/trunk
 * overlap holds while the rock base rises to 70 % and stands free of the
 * landscape band (its top edge 74–77 % there): ≥ 50 px of Warm White (1440)
 * between the tree and
 * the lower landscape group (band, ridge, figure), which otherwise read as one
 * photographic mass (review 2026-09-24).
 */
.fct-hero-collage__layer--tree {
	left: 22.1%;
	top: 1.6%;
	width: 58.8%;
	height: 68.4%;
	object-position: 50% 100%;
}

/*
 * Fish (revised source, already rising head-first to the upper left): across
 * the Gold circle from R1's fish region (x 0.405–0.655, y 0.225–0.535), its
 * rear running into the tree. It sits behind the tree in the stack, so the
 * trunk hides the tail, as in R1. No rotation or scaling beyond its box.
 */
/*
 * Fish at 0.89 of its former size (human review 2026-09-24), scaled around
 * the point where it enters the trunk (stage 27.7 % / 43.6 %), so its rear
 * stays behind the tree, more of the Gold circle shows and the head moves
 * away from the headline. Was left −2.5 %, top 20 %, 44 % × 30.2 %.
 */
.fct-hero-collage__layer--fish {
	left: 0.82%;
	top: 22.6%;
	width: 39.16%;
	height: 26.88%;
}

/*
 * Figure (D-012, deliberate deviation from R1's climber on the trunk): the
 * revised person, without a rock of its own, stands on the top of the
 * foreground ridge: the rear boot on the flat peak (ridge 84 % across), the
 * front boot on the start of its right shoulder (88 %), measured from the
 * ridge's alpha edge. Moved and scaled (0.87) with the ridge, keeping that
 * contact point. Smaller than the tree and fish so
 * it stays secondary. Its soles sit a few pixels below the ridge surface, and
 * the ridge is the next layer up, so rock overlaps the boots and ankles.
 * Matched to the mountain photo in CSS/SVG only: a little less saturation and
 * contrast, and the shared grain filter; no shadow or glow.
 */
.fct-hero-collage__layer--figure {
	left: 86.7%;
	top: 79.35%;
	width: 7.26%;
	height: 10%;
	object-position: 50% 100%;
	filter: url("#fct-hero-grain") saturate(0.78) contrast(0.94) brightness(0.97);
}

.fct-hero-collage__defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/*
 * Foreground ridge: in the lower right corner, 0.78 × its earlier size, peak
 * (83 % across the image) at stage x 87 %; it runs past the hero's bottom
 * edge, which clips it. The figure stands on it.
 */
.fct-hero-collage__layer--foreground {
	left: 46.8%;
	top: 87%;
	width: 48.4%;
	height: 13.9%;
	object-position: 100% 100%;
}

/*
 * Hand-drawn arrows from R1, three of its five, each its own drawing: traced
 * from R1's ink as a filled shape (qa/tools/trace-arrows.mjs), so the uneven
 * line, kinks and lopsided heads are R1's, never one arrow turned or mirrored.
 * R1's size (1 R1 px = 2.82 CSS px at 1440, as a share of the stage) and
 * aspect; centred where the approved composition put them:
 *   arch   the loop that rises and drops into the Gold circle (R1 52 × 49 px)
 *   trunk  the double arrow between the fish and the trunk base (R1 33 × 30 px)
 *   land   the double arrow beside the landscape band (R1 27 × 31 px)
 * Ink colour from the theme; decoration only (aria-hidden, no pointer events).
 */
.fct-hero-collage__arrow {
	position: absolute;
	height: auto;
	background-color: var(--wp--preset--color--charcoal);
	-webkit-mask: var(--fct-arrow) center / 100% 100% no-repeat;
	mask: var(--fct-arrow) center / 100% 100% no-repeat;
}

.fct-hero-collage__arrow--arch {
	--fct-arrow: url("../../assets/masks/arrow-r1-arch.svg?v=535e8a7c057b");
	left: 2.42%;
	top: 2.93%;
	width: 17.16%;
	aspect-ratio: 52.06 / 49.38;
}

.fct-hero-collage__arrow--trunk {
	--fct-arrow: url("../../assets/masks/arrow-r1-trunk.svg?v=8b46d428c966");
	left: 20.14%;
	top: 57.72%;
	width: 10.73%;
	aspect-ratio: 32.56 / 29.56;
}

.fct-hero-collage__arrow--land {
	--fct-arrow: url("../../assets/masks/arrow-r1-land.svg?v=251e3848097c");
	left: 8%;
	top: 85.57%;
	width: 8.99%;
	aspect-ratio: 27.29 / 30.67;
}

/*
 * Narrow mobile (FCT_WEB_SPEC.md §11): a compact collage of its own, not the
 * desktop stage scaled down. Fish, tree, Gold circle and the landscape band
 * carry the metaphor; the figure and the foreground ridge drop out. A wider,
 * shorter stage (1.15 : 1) keeps the headline, collage, intro and CTA close.
 * Positions are in this stage's own percentages.
 */
@media (max-width: 599.98px) {
	.fct-hero-collage {
		aspect-ratio: 1.15;
	}

	/* 52 % at 4 % / 8 %, with the painted edge's 3 % bleed (stage 1.15 : 1). */
	.fct-hero-collage__disc {
		left: calc(4% - 52% * 0.015);
		top: calc(8% - 52% * 0.015 * 1.15);
		width: calc(52% * 1.03);
	}

	.fct-hero-collage__layer--tree {
		left: 38%;
		top: 0;
		width: 53%;
		height: 92%;
	}

	/* 0.89 around the trunk entry (45.7 % / 48.5 %); was 2 % / 12 %, 50 % × 50.8 %. */
	.fct-hero-collage__layer--fish {
		left: 6.81%;
		top: 16.02%;
		width: 44.5%;
		height: 45.21%;
	}

	.fct-hero-collage__layer--landscape {
		left: 20%;
		top: 64.5%;
		width: 80%;
		height: 35.5%;
	}

	.fct-hero-collage__layer--figure,
	.fct-hero-collage__layer--foreground,
	.fct-hero-collage__arrow {
		display: none;
	}
}