/**
 * Shape Menu
 * Pretty Well Fit Elements
 *
 * Structure lives here. Every value a user can change comes in as a custom
 * property written by an Elementor style control.
 */

.pwf-shape-menu {
	--pwf-shapes-width: 116%;
	--pwf-shapes-gap: 1.38%;
	--pwf-overlap: 110px;
	--pwf-bar-offset: 60px;
	--pwf-panel-bg: #d9d2fb;
	--pwf-divider-color: #c9bef5;
	--pwf-divider-width: 1px;
	--pwf-bar-direction: row;
	--pwf-item-bg: #f7f1fd;
	--pwf-item-bg-hover: #eadcfb;
	--pwf-item-color: #2e2950;
	--pwf-item-color-hover: #2e2950;
	--pwf-item-justify: center;
	--pwf-item-min-height: 130px;
	--pwf-fade-duration: 350ms;
	--pwf-image-blend: normal;
	--pwf-entrance-distance: 10px;
	--pwf-entrance-fade-duration: 600ms;
	--pwf-entrance-slide-duration: 600ms;
	--pwf-entrance-stagger: 100ms;
	--pwf-entrance-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
	--pwf-entrance-dir: -1;

	--pwf-optical-circle: 0.507%;
	--pwf-optical-square: 0%;
	--pwf-optical-triangle: 0%;
	--pwf-optical-heart: 5.552%;
	--pwf-optical-rhombus: -1.466%;

	--pwf-color-circle: #b3aff9;
	--pwf-color-square: #e1eaf1;
	--pwf-color-triangle: #2e2950;
	--pwf-color-heart: #f6c197;
	--pwf-color-rhombus: #ff9900;

	position: relative;
}

/* ---------------------------------------------------------------------------
 * Shape row
 * ------------------------------------------------------------------------ */

.pwf-shape-menu__shapes {
	position: relative;
	z-index: 2;
	left: 50%;
	transform: translateX(-50%);
	width: var(--pwf-shapes-width);
	display: flex;
	align-items: flex-end;
	gap: var(--pwf-shapes-gap);
}

/*
 * Every shape viewBox is 301 units tall, so setting flex-grow to the artwork
 * width gives each shape its true proportional width and a shared height.
 */
.pwf-shape-menu__shape {
	flex-grow: var(--pwf-shape-grow, 1);
	flex-shrink: 1;
	flex-basis: 0;
	min-width: 0;
}

/*
 * Optical spacing. Each shape meets its own bounding box differently, so equal
 * gaps read as uneven. A positive inset pulls the shape toward its neighbours.
 * Percentages resolve against the row, so the correction holds as it scales.
 */
.pwf-shape-menu__shape--circle {
	margin-inline: calc(var(--pwf-optical-circle) * -1);
}

.pwf-shape-menu__shape--square {
	margin-inline: calc(var(--pwf-optical-square) * -1);
}

.pwf-shape-menu__shape--triangle {
	margin-inline: calc(var(--pwf-optical-triangle) * -1);
}

.pwf-shape-menu__shape--heart {
	margin-inline: calc(var(--pwf-optical-heart) * -1);
}

.pwf-shape-menu__shape--rhombus {
	margin-inline: calc(var(--pwf-optical-rhombus) * -1);
}

/*
 * isolate keeps blending contained to the shape, so an image blends with the
 * shape fill underneath it and never with the panel or the page behind.
 */
.pwf-shape-menu__shape .pwf-shape {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	isolation: isolate;
}

.pwf-shape__img {
	opacity: 0;
	mix-blend-mode: var(--pwf-image-blend);
	transition: opacity var(--pwf-fade-duration) ease;
}

/* Five explicit pairings, one per possible row index. */
.pwf-shape-menu[data-active="0"] .pwf-shape__img[data-row="0"],
.pwf-shape-menu[data-active="1"] .pwf-shape__img[data-row="1"],
.pwf-shape-menu[data-active="2"] .pwf-shape__img[data-row="2"],
.pwf-shape-menu[data-active="3"] .pwf-shape__img[data-row="3"],
.pwf-shape-menu[data-active="4"] .pwf-shape__img[data-row="4"] {
	opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Panel
 * ------------------------------------------------------------------------ */

.pwf-shape-menu__panel {
	position: relative;
	z-index: 1;
	margin-top: calc(var(--pwf-overlap) * -1);
	background-color: var(--pwf-panel-bg);
}

/* ---------------------------------------------------------------------------
 * Label bar
 *
 * The bar background is the divider color and the gap between items lets it
 * show through. That keeps the dividers correct whether the items sit side by
 * side or stack, with no border rules to switch.
 * ------------------------------------------------------------------------ */

.pwf-shape-menu__bar {
	position: relative;
	margin-top: calc(var(--pwf-overlap) + var(--pwf-bar-offset));
	display: flex;
	flex-direction: var(--pwf-bar-direction);
	gap: var(--pwf-divider-width);
	background-color: var(--pwf-divider-color);
	overflow: hidden;
}

.pwf-shape-menu__item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: var(--pwf-item-justify);
	min-height: var(--pwf-item-min-height);
	padding: 32px 24px;
	background-color: var(--pwf-item-bg);
	color: var(--pwf-item-color);
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--pwf-fade-duration) ease,
		color var(--pwf-fade-duration) ease;
}

.pwf-shape-menu__item:hover,
.pwf-shape-menu__item:focus-visible {
	background-color: var(--pwf-item-bg-hover);
	color: var(--pwf-item-color-hover);
	text-decoration: none;
}

.pwf-shape-menu__item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

.pwf-shape-menu__label {
	display: block;
	color: inherit;
}

/* ---------------------------------------------------------------------------
 * Entrance
 * ------------------------------------------------------------------------ */

.pwf-shape-menu--animate .pwf-shape-menu__shape {
	opacity: 0;
	transform: translateY(calc(var(--pwf-entrance-distance) * var(--pwf-entrance-dir)));
	transition:
		opacity var(--pwf-entrance-fade-duration) var(--pwf-entrance-easing),
		transform var(--pwf-entrance-slide-duration) var(--pwf-entrance-easing);
	transition-delay: calc(var(--pwf-entrance-stagger) * var(--pwf-i, 0));
}

.pwf-shape-menu--animate.is-visible .pwf-shape-menu__shape {
	opacity: 1;
	transform: translateY(0);
}

/* ---------------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

	.pwf-shape-menu--animate .pwf-shape-menu__shape {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.pwf-shape__img,
	.pwf-shape-menu__item {
		transition-duration: 1ms;
	}
}