/**
 * Page-level accent decorations and footer wave lines.
 *
 * Coloured SVG assets in assets/decorations/ — no grey mask tinting.
 */

.lh-page-decoration {
	clip-path: inset(0);
	inset: 0;
	max-width: 100%;
	overflow: hidden;
	pointer-events: none;
	position: fixed;
	z-index: 0;
}

.lh-has-page-decoration .lh-header,
.lh-has-page-decoration main,
.lh-has-page-decoration .lh-footer {
	position: relative;
}

.lh-has-page-decoration .lh-header {
	z-index: 100;
}

@media (min-width: 1024px) {
	.lh-has-page-decoration .lh-header {
		position: sticky;
		top: 0;
	}
}

.lh-has-page-decoration main,
.lh-has-page-decoration .lh-footer {
	z-index: 1;
}

.lh-page-decoration::before,
.lh-page-decoration::after {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	pointer-events: none;
	position: absolute;
}

/* Corner accents — fixed page layer only
   ========================================================================== */

.lh-has-page-decoration .lh-page-decoration::before {
	background-image: url("../decorations/accent-corner-green.svg");
	height: min(52vw, 22rem);
	right: 0;
	top: max(-2rem, -4vw);
	transform: translateX(30%);
	width: min(52vw, 22rem);
}

.lh-has-page-decoration .lh-page-decoration::after {
	background-image: url("../decorations/accent-corner-gold.svg");
	bottom: 6rem;
	height: min(46vw, 20rem);
	left: 0;
	transform: translateX(-30%);
	width: min(46vw, 20rem);
}

/* Home — extra sweep behind mid-page content
   ========================================================================== */

.page-home .lh-page-decoration {
	background-image: url("../decorations/accent-wave-sweep.svg");
	background-position: center 42%;
	background-repeat: no-repeat;
	background-size: 140% auto;
}

.page-home .lh-page-decoration::before {
	height: min(58vw, 26rem);
	right: 0;
	top: max(-3rem, -6vw);
	transform: translateX(35%);
	width: min(58vw, 26rem);
}

/* About
   ========================================================================== */

.page-about .lh-page-decoration::before {
	height: min(54vw, 24rem);
	right: 0;
	top: 0;
	transform: translateX(28%);
	width: min(54vw, 24rem);
}

.page-about .lh-page-decoration::after {
	bottom: 10rem;
	height: min(42vw, 18rem);
	opacity: 0.92;
	width: min(42vw, 18rem);
}

/* Instrument pages
   ========================================================================== */

.page-piano .lh-page-decoration,
.page-violin .lh-page-decoration {
	background-image: none;
}

.page-piano .lh-page-decoration::before {
	opacity: 0.88;
}

.page-violin .lh-page-decoration::after {
	opacity: 0.95;
}

/* Responsive
   ========================================================================== */

@media (max-width: 767px) {
	.lh-has-page-decoration .lh-page-decoration::before {
		height: min(44vw, 14rem);
		right: 0;
		top: -1rem;
		transform: translateX(35%);
		width: min(44vw, 14rem);
	}

	.lh-has-page-decoration .lh-page-decoration::after {
		bottom: 4rem;
		height: min(40vw, 12rem);
		left: 0;
		transform: translateX(-35%);
		width: min(40vw, 12rem);
	}

	.page-home .lh-page-decoration {
		background-size: 220% auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lh-has-page-decoration .lh-page-decoration::before,
	.lh-has-page-decoration .lh-page-decoration::after,
	.page-home .lh-page-decoration {
		opacity: 0.72;
	}
}