/* Background surfaces only. Typography, content, artwork and layout stay in style.css. */
body.miyazaki-lp {
	--lp-grain: url("images/img/miyazaki/backgrounds/paper-grain.svg");
	--lp-orange-grain: url("images/img/miyazaki/backgrounds/orange-grain.svg");
	--lp-navy-grain: url("images/img/miyazaki/backgrounds/navy-grain.svg");
	--lp-grid: url("images/img/miyazaki/backgrounds/survey-grid.svg?v=stronger-02");
	--lp-routes: url("images/img/miyazaki/backgrounds/route-lines.svg");
}

/* The first three panels already have a full-size background element. */
body.miyazaki-lp.swipe-mode :is(.lp-hero, .lp-message, .lp-reason) > .lp-full-bg,
body.miyazaki-lp.swipe-mode :is(.lp-difference, .lp-job, .lp-point, .lp-entry) {
	background-image:
		var(--lp-artwork-clearance, linear-gradient(transparent, transparent)),
		var(--lp-grain),
		var(--lp-surface);
	/* Only the grain tiles; every other layer spans the whole panel. */
	background-size: 100% 100%, 180px 180px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
	background-repeat: no-repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

body.miyazaki-lp .lp-hero {
	--lp-color-grain: var(--lp-orange-grain);
	--lp-grain-mask: radial-gradient(ellipse at 0% 100%, #000, transparent 65%);
	--lp-grain-strength: .65;
	--lp-surface:
		var(--lp-grid),
		radial-gradient(ellipse at 100% 0%, rgba(23, 50, 77, .07), transparent 58%),
		radial-gradient(ellipse at 0% 100%, rgba(255, 201, 40, .13), transparent 55%);
}

body.miyazaki-lp .lp-message {
	--lp-color-grain: var(--lp-navy-grain);
	--lp-grain-strength: .9;
	--lp-surface:
		linear-gradient(125deg, transparent 48%, rgba(255, 249, 237, .035) 48.1%, rgba(255, 249, 237, .035) 69%, transparent 69.1%),
		radial-gradient(ellipse at 100% 0%, #264761, transparent 68%),
		linear-gradient(160deg, transparent 50%, rgba(5, 20, 35, .22));
}

body.miyazaki-lp .lp-reason {
	/* Fade to the original paper color beside the existing opaque JPG artwork. */
	--lp-artwork-clearance: radial-gradient(ellipse 120% 80% at 100% 80%, #fff9ed 80%, transparent 100%);
	--lp-surface:
		var(--lp-grid),
		linear-gradient(150deg, rgba(255, 201, 40, .10), transparent 36%);
}

body.miyazaki-lp .lp-difference {
	--lp-color-grain: var(--lp-navy-grain);
	--lp-grain-mask: linear-gradient(145deg, transparent 68%, #000 68.1%);
	--lp-grain-strength: .65;
	--lp-surface:
		var(--lp-grid),
		var(--lp-routes),
		radial-gradient(ellipse at 100% 0%, rgba(255, 201, 40, .12), transparent 55%),
		linear-gradient(145deg, transparent 68%, rgba(23, 50, 77, .035) 68.1%);
}

body.miyazaki-lp .lp-job {
	--lp-color-grain: var(--lp-orange-grain);
	--lp-grain-mask: radial-gradient(ellipse at 0% 100%, #000 10%, transparent 72%);
	--lp-grain-strength: .8;
	--lp-surface:
		var(--lp-grid),
		radial-gradient(ellipse at 0% 100%, rgba(255, 201, 40, .13), transparent 55%);
}

/* All three Point panels share the same orange corner and grain. */
body.miyazaki-lp :is(.lp-point-flow, .lp-point2, .lp-career) {
	--lp-color-grain: var(--lp-orange-grain);
	--lp-grain-mask: linear-gradient(155deg, transparent 75%, #000 75.1%);
	--lp-grain-strength: 1;
	--lp-surface:
		var(--lp-grid),
		linear-gradient(155deg, transparent 75%, rgba(255, 201, 40, .10) 75.1%);
}

/* Let the staircase's light backing merge with the new orange surface. */
body.miyazaki-lp.swipe-mode .lp-career-steps {
	mix-blend-mode: darken;
}

/* Company artwork has its own opaque area below the details. */
body.miyazaki-lp.swipe-mode .lp-company {
	--lp-color-grain: var(--lp-navy-grain);
	--lp-grain-mask: linear-gradient(180deg, #000, rgba(0, 0, 0, .65) 30%, transparent 60%);
	--lp-grain-strength: .4;
	background-image: var(--lp-grain), var(--lp-grid);
	background-size: 180px 180px, 100% 100%;
	background-repeat: repeat, no-repeat;
}

/* Keep a light backing where recruitment details sit. */
body.miyazaki-lp.swipe-mode .lp-requirements::before {
	background-image:
		var(--lp-grain),
		linear-gradient(180deg, #fff9ed 0%, rgba(255, 249, 237, .97) 24%, rgba(255, 249, 237, .93) max(64%, 445px), rgba(255, 249, 237, .48) max(82%, 520px), rgba(255, 249, 237, .12) 100%);
	background-size: 180px 180px, 100% 100%;
}

body.miyazaki-lp .lp-entry {
	--lp-color-grain: var(--lp-orange-grain);
	--lp-grain-mask: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 75%);
	--lp-grain-strength: .75;
	--lp-surface:
		var(--lp-grid),
		radial-gradient(ellipse at 100% 0%, rgba(255, 201, 40, .24), transparent 48%),
		radial-gradient(ellipse at 0% 100%, rgba(23, 50, 77, .07), transparent 50%),
		linear-gradient(110deg, transparent 70%, rgba(23, 50, 77, .035) 70.1%);
}

/* Colored grain stays behind the content, within each panel's background area. */
body.miyazaki-lp.swipe-mode :is(.lp-hero, .lp-message) > .lp-full-bg::after,
body.miyazaki-lp.swipe-mode :is(.lp-difference, .lp-job, .lp-point-flow, .lp-point2, .lp-career, .lp-company, .lp-entry)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--lp-color-grain) repeat 0 0 / 180px 180px;
	-webkit-mask-image: var(--lp-grain-mask, none);
	mask-image: var(--lp-grain-mask, none);
	opacity: var(--lp-grain-strength, .6);
	pointer-events: none;
}

/* Lift the blue grain slightly so it remains visible on the dark navy panel. */
body.miyazaki-lp.swipe-mode .lp-message > .lp-full-bg::after {
	mix-blend-mode: screen;
}

/* Match the surrounding desktop photograph without touching the side controls. */
@media (min-width: 769px) {
	body.miyazaki-lp {
		background-image:
			var(--lp-grain),
			linear-gradient(90deg, rgba(255, 249, 237, .22), rgba(255, 249, 237, .52) 42%, rgba(255, 249, 237, .52) 58%, rgba(255, 249, 237, .22)),
			url("images/img/miyazaki/pc_bg.jpg");
		background-size: 180px 180px, cover, cover;
		background-position: 0 0, center, center;
		background-repeat: repeat, no-repeat, no-repeat;
		background-attachment: fixed;
	}
}