/**
 * Menu motion, Nov 2026. Hidden tests only (`?gm_v2=1`, `?gm_pdp=v2`).
 * Square, stepped movement in the same language as the floating buttons:
 * - top items: a bar that grows under the label, the icon rolls through its block;
 * - mega panel: opens as a blind from the top, palette band runs across,
 *   the lead block slides in and the family cards arrive one after another;
 * - phone menu: rows arrive in a cascade.
 * Nothing moves when the visitor asks for reduced motion.
 */

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-site-header {
	--mm-ease: cubic-bezier(0.2, 0.9, 0.2, 1);
	--mm-amber: #de881f;
}

/* ── Top row ───────────────────────────────────────────────────────────── */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu--mega .gm-primary-menu__label {
	position: relative;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu--mega .gm-primary-menu__label::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -7px;
	height: 3px;
	background: var(--mm-amber);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 240ms steps(6, end);
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu--mega :is(.gm-primary-menu__link, .gm-primary-menu__summary):is(:hover, :focus-visible) .gm-primary-menu__label::after,
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu--mega .gm-primary-menu__details[open] > summary .gm-primary-menu__label::after {
	transform: scaleX(1);
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu--mega .gm-menu-icon--top {
	overflow: hidden;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu--mega :is(.gm-primary-menu__link, .gm-primary-menu__summary):is(:hover, :focus-visible) .gm-menu-icon--top :is(svg, .gm-icon) {
	animation: gm-mm-roll 440ms var(--mm-ease);
}

@keyframes gm-mm-roll {
	0% { transform: translateY(0); }
	45% { transform: translateY(-32px); }
	46% { transform: translateY(32px); }
	100% { transform: translateY(0); }
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu--mega .gm-primary-menu__chevron {
	transition: transform 260ms var(--mm-ease);
}

/* ── Mega panel ────────────────────────────────────────────────────────── */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu__details[open] > .gm-mega-menu__panel {
	animation: gm-mm-blind 320ms var(--mm-ease) both;
}

@keyframes gm-mm-blind {
	0% { clip-path: inset(0 0 100% 0); }
	100% { clip-path: inset(0 0 -40px 0); }
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__panel-inner {
	position: relative;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__panel-inner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	height: 5px;
	background: linear-gradient(90deg, #de881f 0 40%, #f9b233 40% 56%, #ea5b0c 56% 70%, #aa230e 70% 82%, #7d3b12 82% 92%, #4e1e04 92% 100%);
	transform-origin: 0 50%;
	pointer-events: none;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu__details[open] .gm-mega-menu__panel-inner::before {
	animation: gm-mm-band 560ms steps(10, end) 120ms both;
}

@keyframes gm-mm-band {
	0% { transform: scaleX(0); }
	100% { transform: scaleX(1); }
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu__details[open] .gm-mega-menu__lead {
	animation: gm-mm-lead 380ms var(--mm-ease) 100ms both;
}

@keyframes gm-mm-lead {
	0% { opacity: 0; transform: translateX(-22px); }
	100% { opacity: 1; transform: translateX(0); }
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu__details[open] .gm-mega-menu__card {
	animation: gm-mm-card 340ms var(--mm-ease) both;
	animation-delay: calc(140ms + var(--mm-i, 0) * 34ms);
}

@keyframes gm-mm-card {
	0% { opacity: 0; transform: translateY(14px); }
	100% { opacity: 1; transform: translateY(0); }
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card:nth-child(1) { --mm-i: 0; }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card:nth-child(2) { --mm-i: 1; }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card:nth-child(3) { --mm-i: 2; }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card:nth-child(4) { --mm-i: 3; }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card:nth-child(5) { --mm-i: 4; }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card:nth-child(6) { --mm-i: 5; }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card:nth-child(7) { --mm-i: 6; }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card:nth-child(8) { --mm-i: 7; }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card:nth-child(9) { --mm-i: 8; }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card:nth-child(n + 10) { --mm-i: 9; }

/* Family card: the icon rolls through its block when the card is selected. */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card .gm-menu-icon {
	overflow: hidden;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card a:is(:hover, :focus-visible) .gm-menu-icon :is(svg, .gm-icon) {
	animation: gm-mm-roll 440ms var(--mm-ease);
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__lead-link {
	transition: background-color 140ms ease, color 140ms ease, padding-right 220ms var(--mm-ease);
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__lead-link:is(:hover, :focus-visible) {
	padding-right: 26px;
}

/* ── Phone menu ────────────────────────────────────────────────────────── */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-site-header__mobile-menu[open] .gm-mobile-menu__list > * {
	animation: gm-mm-row 320ms var(--mm-ease) both;
	animation-delay: calc(var(--mm-r, 0) * 38ms);
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mobile-menu__details[open] .gm-mobile-menu__children li {
	animation: gm-mm-row 280ms var(--mm-ease) both;
	animation-delay: calc(var(--mm-r, 0) * 30ms);
}

@keyframes gm-mm-row {
	0% { opacity: 0; transform: translateX(26px); }
	100% { opacity: 1; transform: translateX(0); }
}

:is(body.gm-site-v2, body.gm-pdp-v2) :is(.gm-mobile-menu__list > *, .gm-mobile-menu__children li):nth-child(2) { --mm-r: 1; }
:is(body.gm-site-v2, body.gm-pdp-v2) :is(.gm-mobile-menu__list > *, .gm-mobile-menu__children li):nth-child(3) { --mm-r: 2; }
:is(body.gm-site-v2, body.gm-pdp-v2) :is(.gm-mobile-menu__list > *, .gm-mobile-menu__children li):nth-child(4) { --mm-r: 3; }
:is(body.gm-site-v2, body.gm-pdp-v2) :is(.gm-mobile-menu__list > *, .gm-mobile-menu__children li):nth-child(5) { --mm-r: 4; }
:is(body.gm-site-v2, body.gm-pdp-v2) :is(.gm-mobile-menu__list > *, .gm-mobile-menu__children li):nth-child(6) { --mm-r: 5; }
:is(body.gm-site-v2, body.gm-pdp-v2) :is(.gm-mobile-menu__list > *, .gm-mobile-menu__children li):nth-child(7) { --mm-r: 6; }
:is(body.gm-site-v2, body.gm-pdp-v2) :is(.gm-mobile-menu__list > *, .gm-mobile-menu__children li):nth-child(8) { --mm-r: 7; }
:is(body.gm-site-v2, body.gm-pdp-v2) :is(.gm-mobile-menu__list > *, .gm-mobile-menu__children li):nth-child(n + 9) { --mm-r: 8; }

@media (prefers-reduced-motion: reduce) {
	:is(body.gm-site-v2, body.gm-pdp-v2) .gm-site-header *,
	:is(body.gm-site-v2, body.gm-pdp-v2) .gm-site-header *::before,
	:is(body.gm-site-v2, body.gm-pdp-v2) .gm-site-header *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* One line only: the bar under the label. The older lines (inset amber strip at the bottom
   of the block and the 3px border under the item) are switched off in every state. */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu--mega :is(.gm-primary-menu__link, .gm-primary-menu__summary),
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu--mega :is(.gm-primary-menu__link, .gm-primary-menu__summary):is(:hover, :focus-visible, [aria-current]),
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu--mega .is-active > :is(.gm-primary-menu__link, .gm-primary-menu__details > summary),
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu--mega .gm-primary-menu__details[open] > summary {
	border-bottom-color: transparent !important;
	box-shadow: none !important;
}

/* The current section keeps its bar. */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu--mega .is-active > :is(a, details > summary) .gm-primary-menu__label::after,
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu--mega [aria-current] .gm-primary-menu__label::after {
	transform: scaleX(1);
}