/**
 * Motion.
 *
 * LOCKED: fade in, fade up, button hover and card lift only, at 200–300ms.
 * No parallax, no heavy animation.
 *
 * Every transition and keyframe in the theme lives here so components.css stays
 * purely structural. Loaded after components.css, so these declarations are the
 * last word on motion and no component can silently reintroduce its own.
 *
 * Adding motion to a new component means adding a rule to this file — not a
 * transition property in components.css.
 */

/* ===============================================================
 * Keyframes
 * =============================================================== */
@keyframes mw-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes mw-fade-up {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ===============================================================
 * Entrance utilities
 * =============================================================== */
.fade-in {
	animation: mw-fade-in var(--duration-slow) var(--easing) both;
}

.fade-up {
	animation: mw-fade-up var(--duration-slow) var(--easing) both;
}

/* Stagger helper for grids of cards. Set --delay on the element. */
.fade-up--delayed {
	animation-delay: var(--delay, 0ms);
}

/*
 * Hero entrance.
 *
 * The headline and lead are deliberately NOT animated. One of them is the
 * Largest Contentful Paint element, and .fade-up starts at opacity 0 with
 * animation-fill-mode: both — an element that has not painted yet does not
 * count as contentful, so fading the headline in would push LCP back by the
 * length of the animation. Only the supporting parts move.
 *
 * A real hero image must stay unanimated for the same reason.
 */
.hero__trust {
	animation-delay: 60ms;
}

.hero__visual {
	animation-delay: 120ms;
}

/* ===============================================================
 * Links
 * =============================================================== */
a {
	transition: color var(--duration-fast) var(--easing);
}

/* ===============================================================
 * Buttons — LOCKED: button hover
 * =============================================================== */
.btn {
	transition:
		background-color var(--duration-fast) var(--easing),
		border-color var(--duration-fast) var(--easing),
		color var(--duration-fast) var(--easing),
		box-shadow var(--duration-fast) var(--easing);
}

/* ===============================================================
 * Cards — LOCKED: 4px lift
 *
 * :focus-within is included so keyboard users get the same affordance as
 * pointer users when a link inside the card takes focus.
 * =============================================================== */
.card {
	transition:
		transform var(--duration-base) var(--easing),
		box-shadow var(--duration-base) var(--easing);
}

.card--interactive:hover,
.card--interactive:focus-within {
	transform: translateY(calc(var(--card-lift) * -1));
	box-shadow: var(--shadow-md);
}

/* ===============================================================
 * Form controls
 * =============================================================== */
.form-input,
.form-textarea,
.form-select {
	transition:
		border-color var(--duration-fast) var(--easing),
		box-shadow var(--duration-fast) var(--easing);
}

/* ===============================================================
 * FAQ disclosure
 *
 * Driven by the native [open] state, so the chevron follows the disclosure
 * without a line of JavaScript — the same arrangement as the header chevrons,
 * which key off aria-expanded.
 * =============================================================== */
.faq__chevron {
	transition: transform var(--duration-fast) var(--easing);
}

[open] > .faq__question .faq__chevron {
	transform: rotate(180deg);
}

/* ===============================================================
 * Site header
 *
 * Every header interaction is defined here. All of it keys off a class or an
 * ARIA attribute, so the scripts only flip state — they never add motion.
 * =============================================================== */

/* Sticky state: shadow fades in when the sentinel scrolls out of view. */
.site-header {
	transition:
		box-shadow var(--duration-base) var(--easing),
		background-color var(--duration-base) var(--easing);
}

/* Navigation hover. */
.site-nav__link {
	transition:
		background-color var(--duration-fast) var(--easing),
		color var(--duration-fast) var(--easing);
}

/*
 * Chevron rotation. Driven by aria-expanded on whichever control owns the state
 * — the parent link on desktop, the disclosure button in the drawer — so no
 * JavaScript is needed here beyond setting the attribute.
 */
.site-nav__chevron,
.lang-switcher__chevron {
	transition: transform var(--duration-fast) var(--easing);
}

[aria-expanded="true"] .site-nav__chevron,
[aria-expanded="true"] .lang-switcher__chevron {
	transform: rotate(180deg);
}

/*
 * Dropdown reveal.
 *
 * visibility is included in the transition on purpose: it animates discretely,
 * so on the way out the panel stays visible for the whole fade instead of
 * vanishing on frame one.
 */
.site-nav__list .sub-menu {
	transform: translateY(-4px);
	opacity: 0;
	transition:
		opacity var(--duration-fast) var(--easing),
		transform var(--duration-fast) var(--easing),
		visibility var(--duration-fast) var(--easing);
}

.site-nav__list .sub-menu.is-open {
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	opacity: 1;

	/*
	 * Opening drops visibility from the transition on purpose. If it stayed,
	 * the property would begin animating from hidden and still compute as
	 * hidden for the rest of that task — so ArrowDown could open the panel but
	 * not move focus into it, because hidden elements are not focusable.
	 * Closing keeps visibility (see the base rule) so the panel survives the
	 * fade instead of vanishing on frame one.
	 */
	transition:
		opacity var(--duration-fast) var(--easing),
		transform var(--duration-fast) var(--easing);
}

.site-nav__list .sub-menu a {
	transition:
		background-color var(--duration-fast) var(--easing),
		color var(--duration-fast) var(--easing);
}

/*
 * Mega menu hover. The row, its icon tile and the title settle together, so the
 * whole item reads as one target rather than three things reacting separately.
 */
.mega-item,
.mega-item__figure,
.mega-item__title,
.mega-promo__cta,
.site-footer__seo-list a,
.site-footer__social-link {
	transition:
		background-color var(--duration-fast) var(--easing),
		border-color var(--duration-fast) var(--easing),
		color var(--duration-fast) var(--easing);
}

/* The language panel is a native <details>, so only the chevron needs motion. */
.lang-switcher__chevron {
	transition: transform var(--duration-fast) var(--easing);
}

.lang-switcher[open] .lang-switcher__chevron {
	transform: rotate(180deg);
}

/*
 * CTA hover: restrained brand glow instead of a heavier shadow.
 */
.site-header__cta {
	transition:
		background-color var(--duration-fast) var(--easing),
		border-color var(--duration-fast) var(--easing),
		box-shadow var(--duration-fast) var(--easing);
}

.site-header__cta:hover {
	box-shadow: var(--glow-primary);
}

/* Language switcher hover. */
.lang-switcher {
	transition:
		background-color var(--duration-fast) var(--easing),
		color var(--duration-fast) var(--easing);
}

/* ---------------------------------------------------------------
 * Mobile toggle: three bars morph into a close mark.
 * --------------------------------------------------------------- */
.menu-toggle,
.site-drawer__close {
	transition:
		border-color var(--duration-fast) var(--easing),
		color var(--duration-fast) var(--easing);
}

/* ---------------------------------------------------------------
 * Drawer accordion
 *
 * Collapsing keeps visibility in the transition so the panel survives the fade.
 * Expanding drops it, for the same reason as the desktop dropdown: a
 * transitioning visibility still computes as hidden for the rest of the task,
 * which would make the panel's links unfocusable at the moment they appear.
 * --------------------------------------------------------------- */
.site-drawer__list .sub-menu {
	transition:
		max-block-size var(--duration-base) var(--easing),
		opacity var(--duration-fast) var(--easing),
		visibility var(--duration-base) var(--easing);
}

.site-drawer__list .sub-menu.is-open {
	transition:
		max-block-size var(--duration-base) var(--easing),
		opacity var(--duration-fast) var(--easing);
}

.site-drawer__disclosure {
	transition:
		background-color var(--duration-fast) var(--easing),
		color var(--duration-fast) var(--easing);
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
	transition:
		transform var(--duration-base) var(--easing),
		opacity var(--duration-fast) var(--easing);
}

/* Middle bar disappears; outer bars cross. */
.menu-toggle[aria-expanded="true"] .menu-toggle__bars {
	background-color: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* ---------------------------------------------------------------
 * Overlay and drawer
 *
 * Closed transforms use logical translation so the drawer leaves towards the
 * inline-end edge in LTR and the opposite edge in RTL without a separate rule.
 * --------------------------------------------------------------- */
.site-overlay {
	opacity: 0;
	transition: opacity var(--duration-base) var(--easing);
}

.site-overlay.is-open {
	opacity: 1;
}

.site-drawer {
	transform: translateX(100%);
	transition: transform var(--duration-slow) var(--easing);
}

[dir="rtl"] .site-drawer {
	transform: translateX(-100%);
}

.site-drawer--panel,
[dir="rtl"] .site-drawer--panel {
	transform: translateY(-100%);
}

.site-drawer.is-open,
[dir="rtl"] .site-drawer.is-open {
	transform: none;
}

/* ===============================================================
 * Skip link
 * =============================================================== */
.skip-link {
	transition: transform var(--duration-fast) var(--easing);
}

/* ===============================================================
 * Card scroller
 *
 * Smooth scrolling is declared here rather than passed to scrollBy(), so the
 * reduced-motion block below governs it exactly as it governs every other
 * transition — including the scripted advance, which calls scrollBy() with no
 * behaviour of its own and therefore inherits this.
 * =============================================================== */
.link-cards__track {
	scroll-behavior: smooth;
}

/* ===============================================================
 * Reduced motion
 *
 * All motion here is decorative, so it collapses to a near-instant state
 * change rather than being removed — the end state still applies.
 * =============================================================== */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}