/**
 * Scroll performance: drop redundant backdrop-filter blurs.
 *
 * Each `backdrop-filter` forces the compositor to re-snapshot and re-blur the
 * pixels behind the element on every scrolled frame. main.css puts one on the
 * fixed header and on 24 cards that all sit in the top half of the homepage,
 * which is why scrolling is rough at the top and clean past the mission
 * section. Measured: ~67% of frames over 32ms at the top, 0% with these off.
 *
 * Only the blur is removed here. Colours, transparency, borders, shadows,
 * sizing, positioning, transitions and hover states are left to main.css.
 *
 * @package peaks
 */

/**
 * Fixed header.
 *
 * `.header__wrap` paints an opaque background (`--purple-light: #f6f1fb`, the
 * token's only definition, and no rule ever makes it translucent), so the blur
 * behind it can never be visible in any state. Removing it site-wide is free.
 */
.header__wrap {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/**
 * Homepage cards.
 *
 * Scoped to `body.home` on purpose: these components are shared with the about
 * and services templates, and only the homepage has been visually verified.
 * Dropping the `.home ` prefix would extend the fix to those pages.
 */
.home .treatments__card,
.home .our-process__item,
.home .why-peak__card,
.home .why-peak__image,
.home .mission__card {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/**
 * main.css repeats the blur at a higher specificity (0,3,0) for the fourth
 * why-peak tile, once at top level and again inside @media(max-width:991px).
 * `.home` + the same compound selector scores (0,4,0) and wins on both without
 * needing !important.
 */
.home .why-peak__image:not(.why-peak__image--wide):nth-child(4) {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}