/*
 * `nomon/image-panel` — the arrow-shaped edge on the image half.
 *
 * The notch is the brand bar's own left edge (`assets/icons/mark-bars.svg`):
 * kink at 41.43% of the height, run/drop 0.691 above it and 0.164 below.
 * `mask-size: auto 100%` scales it by height alone, so the slope stays at the
 * brand angle whatever the panel's aspect ratio; the mask is far wider than
 * the box, so everything right of the notch stays opaque.
 *
 * Spec: `docs/design/DESIGN.md` §5.6.
 */

@container (min-width: 56rem) {
	.nomon-image-panel__visual {
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='469' viewBox='0 0 1200 469'%3E%3Cpath d='M1200 0H134.34L0 194.28L45.1 469H1200Z'/%3E%3C/svg%3E");
		mask-position: left center;
		mask-repeat: no-repeat;
		mask-size: auto 100%;
	}

	.nomon-image-panel__visual--flip {
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='469' viewBox='0 0 1200 469'%3E%3Cpath d='M0 0H1065.66L1200 194.28L1154.9 469H0Z'/%3E%3C/svg%3E");
		mask-position: right center;
	}
}