/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* container query */

.tri-img-content {
	container-type: inline-size;
	/* named so the fit-to-text triangle wrappers, which are containers too, don't answer these queries */
	container-name: tri-img-content;
	padding: 36px 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*row*/

.tri-img-content__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* triangles */

.tri-img-content__tri {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 474.19 / 528.79;
	overflow: hidden;

	/* Own compositor layer so the continuous tri-drift translate below doesn't
   round independently of the image/cutout overlay it's carrying — that
   mismatch is what let a hairline of bleed show at the edges while moving. */
	transform: translateZ(0);
	backface-visibility: hidden;
}

.tri-img-content__tri__image {
	position: relative;
	width: 100%;
	height: 100%;
}

.tri-img-content__tri__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 3px;
	object-fit: cover;
	object-position: top;

	/* Prevent sub-pixel rendering gaps */
	transform: translateZ(0);
	backface-visibility: hidden;
}

.tri-img-content__tri__image .icon.triangle-right-cutout {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;

	/* Flush against the box, no overscan: the image (above) is the one padded
   inward to cover sub-pixel drift now, so the mask can render its rounded
   corners exactly as drawn instead of getting scaled past the parent's
   overflow and squared off. */
	transform: translateZ(0);
	backface-visibility: hidden;
}

.tri-img-content__tri__image .icon.triangle-right-cutout svg {
	display: block;
	width: 100%;
	height: 100%;
	color: var(--white);
}

/*decorations*/
.tri-img-content__tri__decoration {
	position: absolute;
	z-index: 2;

	width: 25%;
	height: auto;
}

.tri-img-content__tri__decoration svg {
	width: 100%;
	height: 100%;
	color: var(--blue-lt);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* content */

.tri-img-content__header.section-header {
	margin-bottom: 15px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* VARIATION: tri content tri */

/*row*/
.tri-img-content--tri-content-tri .tri-img-content__row {
	gap: 2.5%;
}

/*content*/
.tri-img-content--tri-content-tri .tri-img-content__content-wrapper {
	flex: 0 0 53%;
}

.tri-img-content--tri-content-tri .tri-img-content__header.section-header,
.tri-img-content--tri-content-tri .tri-img-content__content {
	text-align: center;
}

.tri-img-content--tri-content-tri .tri-img-content__buttons .button-row {
	justify-content: center;
}

/*triangles*/
.tri-img-content--tri-content-tri .tri-img-content__tris-wrapper:first-child {
	flex: 0 0 20%;

	margin-bottom: 120px;
}

.tri-img-content--tri-content-tri .tri-img-content__tris-wrapper:last-child {
	flex: 0 0 22%;

	margin-top: 120px;
	padding-left: 3%;
}

/*decoration*/
.tri-img-content--tri-content-tri
	.tri-img-content__tris-wrapper
	.tri-img-content__tri__decoration {
	bottom: 15%;
	right: 18%;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* VARIATION: tri content */

/*row*/
.tri-img-content--tri-content .tri-img-content__row {
	gap: 12%;
}

/*content*/
.tri-img-content--tri-content
	.tri-img-content__row
	.tri-img-content__content-wrapper {
	flex: 0 0 54%;
}

/*triangles*/
.tri-img-content--tri-content .tri-img-content__tris-wrapper {
	flex: 0 0 34%;
}

.tri-img-content--tri-content
	.tri-img-content__tris-wrapper
	.tri-img-content__tri__decoration {
	bottom: 15%;
	right: 18%;
}

/*decoration*/
.tri-img-content--tri-content
	.tri-img-content__tris-wrapper
	.tri-img-content__tri__decoration {
	bottom: 15%;
	right: 18%;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* VARIATION: tri tri content */

/*row*/
.tri-img-content--tri-tri-content .tri-img-content__row {
	gap: 3%;
	align-items: start;
}

/*content*/
.tri-img-content--tri-tri-content
	.tri-img-content__row
	.tri-img-content__content-wrapper {
	flex: 0 0 41%;
}

/*triangles*/
.tri-img-content--tri-tri-content .tri-img-content__tris-wrapper {
	flex: 0 0 56%;
}

.tri-img-content--tri-tri-content .tri-img-content__tris-wrapper {
	display: flex;
	gap: 40px;
}

.tri-img-content--tri-tri-content
	.tri-img-content__tris-wrapper
	.tri-img-content__tri {
	flex: 0 0 calc(50% - 20px);
}

.tri-img-content--tri-tri-content
	.tri-img-content__tris-wrapper
	.tri-img-content__tri--1 {
	margin-bottom: 75px;
}

.tri-img-content--tri-tri-content
	.tri-img-content__tris-wrapper
	.tri-img-content__tri--2 {
	margin-top: 75px;
}

/*decoration*/
.tri-img-content--tri-tri-content
	.tri-img-content__tris-wrapper
	.tri-img-content__tri.tri-img-content__tri--1
	.tri-img-content__tri__decoration {
	bottom: 15%;
	right: 18%;
}

.tri-img-content--tri-tri-content
	.tri-img-content__tris-wrapper
	.tri-img-content__tri.tri-img-content__tri--2
	.tri-img-content__tri__decoration {
	top: 6%;
	right: 18%;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* triangle animations */

/* Simple up/down bob. ease-in-out reads fine here since there's only one
 turnaround at each end (top and bottom) instead of several stops in a row —
 that's what makes a plain float feel smooth rather than stuttery. */
.float-toss-1 {
	animation: float-toss-1 4s ease-in-out infinite;
}
@keyframes float-toss-1 {
	0%,
	100% {
		translate: 0 0;
	}
	50% {
		translate: 0 -12px;
	}
}

.float-toss-2 {
	animation: float-toss-2 4.6s ease-in-out infinite;
}
@keyframes float-toss-2 {
	0%,
	100% {
		translate: 0 0;
	}
	50% {
		translate: 0 12px;
	}
}

/* Tiny idle bob on the image itself (the whole triangle — photo + cutout
 border move as one unit), much smaller than the arrow's float so it reads as
 ambient life rather than a competing motion. The second triangle gets its
 own duration/delay so a paired pair doesn't bob in lockstep. */
.tri-img-content__tri {
	animation: tri-drift 5s ease-in-out infinite;
}
.tri-img-content__tri--2 {
	animation-duration: 5.8s;
	animation-delay: -2s;
}
@keyframes tri-drift {
	0%,
	100% {
		translate: 0 0;
	}
	50% {
		translate: 0 -4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.float-toss-1,
	.float-toss-2,
	.tri-img-content__tri,
	.tri-img-content__tri--2 {
		animation: none;
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* VARIATION: fit to text (desktop only) */

@container tri-img-content (width > 915px) {
	/* size containment keeps the triangles out of the row height, so the stretched wrapper matches the text */
	.tri-img-content--fit-to-text .tri-img-content__tris-wrapper {
		align-self: stretch;
		container-type: size;
	}

	/*single triangle*/
	.tri-img-content--fit-to-text .tri-img-content__tris-wrapper--single {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}

	.tri-img-content--fit-to-text
		.tri-img-content__tris-wrapper--single
		.tri-img-content__tri {
		flex: 0 0 auto;
		width: min(100%, 100cqb * 474.19 / 528.79);
	}

	/*two triangles*/
	.tri-img-content--fit-to-text .tri-img-content__tris-wrapper--double {
		align-items: flex-start;
	}

	/* 75px is the stagger margin on each triangle */
	.tri-img-content--fit-to-text
		.tri-img-content__tris-wrapper--double
		.tri-img-content__tri {
		flex: 0 0 min(50% - 20px, (100cqb - 75px) * 474.19 / 528.79);
	}

	/* left-side triangles hug the content instead of the container edge */
	.tri-img-content--fit-to-text .tri-img-content__tris-wrapper--single:first-child {
		align-items: flex-end;
	}
	.tri-img-content--fit-to-text .tri-img-content__tris-wrapper--double:first-child {
		justify-content: flex-end;
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* CONTAINER QUERIES - MOBILE */

@container tri-img-content (max-width: 915px) {
	.tri-img-content__row {
		flex-direction: column;
	}

	/* triangles hidden on mobile, content only */
	.tri-img-content__tris-wrapper {
		display: none;
	}

	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	/* VARIATION: tri content tri */

	/*content*/
	.tri-img-content--tri-content-tri .tri-img-content__content-wrapper {
		order: -1;
		flex: 0 0 100%;
		margin-bottom: 30px;
	}

	/*triangles*/
	.tri-img-content--tri-content-tri .tri-img-content__tris-wrapper:first-child,
	.tri-img-content--tri-content-tri .tri-img-content__tris-wrapper:last-child {
		width: 100%;
		max-width: 450px;
		margin: 0;
	}

	.tri-img-content--tri-content-tri
		.tri-img-content__tri.tri-img-content__tri--1 {
		width: 60%;
		height: auto;
		margin-right: 40%;
	}

	.tri-img-content--tri-content-tri
		.tri-img-content__tri.tri-img-content__tri--2 {
		width: 65%;
		height: auto;
		margin-left: 35%;
	}

	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	/* VARIATION: tri content */

	/*row*/
	.tri-img-content--tri-content .tri-img-content__row {
		align-items: start;
	}

	/*triangles*/
	.tri-img-content--tri-content .tri-img-content__tris-wrapper {
		order: -1;
		width: 100%;
		max-width: 450px;
		margin-bottom: 30px;
	}

	.tri-img-content--tri-content .tri-img-content__tri {
		width: 70%;
		height: auto;
		margin-right: 30%;
	}

	/*content*/
	.tri-img-content--tri-content .tri-img-content__content-wrapper {
		margin: 0;
	}

	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	/* VARIATION: tri tri content */

	/*triangles*/
	.tri-img-content--tri-tri-content .tri-img-content__tris-wrapper {
		order: -1;
		width: 100%;
		max-width: 450px;
		margin-bottom: 30px;
	}

	/*content*/
	.tri-img-content--tri-tri-content .tri-img-content__content-wrapper {
		margin: 0;
	}
}