/* Section transition triangles — shared across Kirby projects
   Used with snippet: elements/shapes/section-triangle */

section:has(> .section-triangle) {
	position: relative;
}

section:has(> .section-triangle--2) {
	isolation: isolate;
	overflow: visible !important;
}

.section-triangle {
	display: none;
	pointer-events: none;
}

@media only screen and (min-width: 993px) {
	.section-triangle {
		display: block;
		position: absolute;
		z-index: 0;
		--section-triangle-height: calc(var(--section-triangle-width) * tan(var(--section-triangle-angle)));
		--section-triangle-aspect: calc(1 / tan(var(--section-triangle-angle)));
	}

	/* Position 1 — bottom-right, horizontal base, outgoing */
	.section-triangle--1 {
		right: 0;
		bottom: 0;
		width: var(--section-triangle-width);
		height: var(--section-triangle-height);
		background: var(--section-triangle-fill);
		clip-path: polygon(0 100%, 100% 0, 100% 100%);
	}

	/* Position 2 — top, offset by width, mirrored + scaled */
	.section-triangle--2 {
		top: 0;
		right: var(--section-triangle-width);
		width: auto;
		height: var(--section-triangle-height-scale, 400%);
		aspect-ratio: var(--section-triangle-aspect);
		background: var(--section-triangle-surface);
		clip-path: polygon(0 0, 0 100%, 100% 0);
		overflow: hidden;
	}

	.section-triangle--2.section-triangle--has-bg {
		background: transparent;
	}

	.section-triangle--2 .section-triangle__bg {
		position: absolute;
		top: 0;
		right: 0;
		height: var(--section-triangle-inner-height, 50%);
		width: auto;
	}

	.section-triangle--2 .section-triangle__bg picture {
		display: block;
		height: 100%;
		width: auto;
	}

	.section-triangle--2 .section-triangle__bg img {
		display: block;
		height: 100%;
		width: auto;
		max-width: none;
		object-fit: unset;
		object-position: top left;
	}

	.section-triangle--2 .section-triangle__inner {
		width: 100%;
		height: var(--section-triangle-inner-height, 50%);
		background: var(--section-triangle-inner);
	}

	/* Position 3 — top-right, incoming / closing */
	.section-triangle--3 {
		top: 0;
		right: 0;
		width: var(--section-triangle-width);
		height: var(--section-triangle-height);
		background: var(--section-triangle-fill);
		clip-path: polygon(0 0, 100% 0, 100% 100%);
	}

	section:has(> .section-triangle) > .container-content,
	section:has(> .section-triangle) > .container-text.main,
	section:has(> .section-triangle--2) > :not(.section-triangle) {
		position: relative;
		z-index: 1;
	}
}