/*
 * designmatic website CSS — About page principle cards
 *
 * Cards are laid out with CSS Grid Lanes (https://gridlanes.webkit.org), which
 * packs items into the shortest lane instead of a rigid row-by-row grid, and
 * falls back to a regular grid where Grid Lanes is not supported.
 */


/* ==========================================================================
   Principles section
   ========================================================================== */

.principles {
	margin-bottom: 5.2rem;

	padding-left: max(15%, env(safe-area-inset-left));
	padding-right: max(15%, env(safe-area-inset-right));
}

.principles-heading {
	margin: 0 0 2.6rem;
	padding-left: 3.2rem;
	font-size: 4.2rem;
	font-weight: bold;
	color: var(--label);
}

.principles-lanes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
	gap: 2.4rem;

	margin: 0;
	padding: 0;
	list-style: none;
}

@supports (display: grid-lanes) {
	.principles-lanes {
		display: grid-lanes;
	}
}


/* ==========================================================================
   Flip cards
   ========================================================================== */

/* The flip and the pointer tilt share one transform on the card, so each part
   is registered separately: that way the transform can be composed from them
   while every part still animates at its own speed. */
@property --principle-flip {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@property --principle-tilt-x {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@property --principle-tilt-y {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@property --principle-lift {
	syntax: "<number>";
	inherits: false;
	initial-value: 1;
}

/* The card box itself rotates, so nothing is left standing at full size behind
   the faces during the flip. The perspective is part of the rotation rather
   than a `perspective` property, which would need a further wrapper. */
.principle-card {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: 13px;

	/* Card-relative units (cqw) let the type and padding on both faces scale
	   with the lane width instead of overflowing narrow cards. */
	container-type: inline-size;

	/* The tilt is applied outside the flip, so it stays in screen space and
	   reads the same whichever side of the card is showing. */
	transform:
		perspective(1400px)
		rotateX(var(--principle-tilt-x))
		rotateY(var(--principle-tilt-y))
		scale(var(--principle-lift))
		rotateY(var(--principle-flip));
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;

	/* Symmetric easing on the flip, so the rotation passes edge-on at exactly
	   half of the duration, which is where the faces are swapped. The tilt
	   follows the pointer far more closely, hence its own short duration. */
	transition:
		--principle-flip 0.7s cubic-bezier(0.45, 0, 0.55, 1),
		--principle-tilt-x 0.15s ease-out,
		--principle-tilt-y 0.15s ease-out,
		--principle-lift 0.25s ease-out,
		box-shadow 0.3s ease;
}

.principle-card.is-flipped {
	--principle-flip: 180deg;
}

/* Hover state only on devices that really hover: touch browsers apply :hover on
   tap and keep it there, which left tapped cards sitting enlarged. */
@media (hover: hover) and (pointer: fine) {

	.principle-card:hover {
		--principle-lift: 1.03;
		box-shadow: 0 1.6rem 3.6rem rgba(0, 0, 0, 0.3);
	}

}

.principle-card-face {
	position: absolute;
	inset: 0;

	display: flex;
	flex-direction: column;

	border-radius: 13px;

	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	/* Faces are also swapped outright at the halfway point of the flip, so a
	   browser that ignores backface-visibility while compositing the animation
	   still cannot show the hidden face through the card. */
	transition: visibility 0s linear 0.35s;
}

.principle-card .principle-card-front,
.principle-card.is-flipped .principle-card-back {
	visibility: visible;
}

.principle-card .principle-card-back,
.principle-card.is-flipped .principle-card-front {
	visibility: hidden;
}

/* Front: the title over the card's background image, which is set per card
   through the --principle-image custom property. */
.principle-card-front {
	align-items: center;
	justify-content: center;

	background-color: var(--designmaticblue);
	background-image: var(--principle-image, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.principle-card-title {
	margin: 0;
	padding: 0 1.6rem;

	text-align: center;
	font-size: clamp(2.0rem, 9cqw, 3.4rem);
	font-weight: 600;
	color: white;
	text-shadow: 2px 2px black;
}

/* Back: the principle's text, rotated so it faces the viewer once flipped. */
.principle-card-back {
	transform: rotateY(180deg);

	justify-content: flex-start;
	padding: clamp(1.6rem, 7cqw, 2.8rem);
	overflow: hidden;

	background-color: var(--secondaryBackground);
	color: var(--label);
}

.principle-card-back-title {
	margin: 0 0 0.8em;
	font-size: clamp(2.5rem, 6cqw, 2.2rem);
	font-weight: 600;
}

.principle-card-text {
	margin: 0;
	font-size: clamp(1.4rem, 4.2cqw, 1.7rem);
	line-height: 1.45;
}

/* Transparent hit area covering both faces, so a click anywhere on the card
   flips it in either direction. */
.principle-card-toggle {
	position: absolute;
	inset: 0;
	z-index: 2;

	appearance: none;
	-webkit-appearance: none;
	padding: 0;
	border: 0;
	border-radius: 13px;
	background: none;

	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.principle-card-toggle:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 3px;
}

/* Button label exists for assistive technology only; the visible title lives
   on the card faces. */
.principle-card-toggle-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.principle-card,
	.principle-card-face {
		transition: none;
	}

	/* The tilt is purely decorative motion. The script does not apply it under
	   this preference; !important also clears any inline values it had already
	   set, should the preference change mid-session. */
	.principle-card {
		--principle-tilt-x: 0deg !important;
		--principle-tilt-y: 0deg !important;
		--principle-lift: 1 !important;
	}
}


/* ==========================================================================
   Mobile adjustments
   ========================================================================== */

@media screen and (max-width: 767px) {

	.principles {
		padding-left: max(12px, env(safe-area-inset-left));
		padding-right: max(12px, env(safe-area-inset-right));
	}

	.principles-heading {
		padding-left: max(5%, env(safe-area-inset-left));
		font-size: 3.6rem;
	}

}