/* ==========================================================================
   Page transitions and smooth motion (inc/performance.php).
   Reference: the WooCommerce mini-cart drawer = 300ms, transform and opacity only.
   Page change: 300ms fade, the new page comes up 8px (the same move as chasseur-fade-up).
   Only transform and opacity animate. No layout change. RTL safe.
   ========================================================================== */
:root {
	--chs-nav-dur: 300ms;
	--chs-nav-ease: var(--wp--custom--motion--ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}

/* ---------- Cross-document View Transitions (Chrome/Edge 126+, Safari 18.2+). Other browsers: a normal page change. ---------- */
@view-transition { navigation: auto; }

::view-transition-group(root) { animation-duration: var(--chs-nav-dur); animation-timing-function: var(--chs-nav-ease); }
::view-transition-old(root) { animation: chs-vt-out 200ms var(--chs-nav-ease) both; }
::view-transition-new(root) { animation: chs-vt-in var(--chs-nav-dur) var(--chs-nav-ease) both; }
@keyframes chs-vt-out { to { opacity: 0; } }
@keyframes chs-vt-in { from { opacity: 0; transform: translateY(8px); } }

/* The header stays in place while the page under it changes. JS sets the class only when the header is on screen. */
html.chs-vt-header .chasseur-header { view-transition-name: chs-header; }
::view-transition-group(chs-header) { animation-duration: var(--chs-nav-dur); animation-timing-function: var(--chs-nav-ease); }
::view-transition-old(chs-header), ::view-transition-new(chs-header) { animation-duration: 150ms; }

/* ---------- Loader bar: 2px enamel line at the top. It shows only when the next page takes more than 150 ms. ---------- */
.chs-loader {
	position: fixed; z-index: 100000; inset-block-start: 0; inset-inline: 0; height: 2px;
	background: var(--wp--preset--color--enamel, #6C2620);
	transform: scaleX(0); transform-origin: right center; opacity: 0;
	pointer-events: none; contain: strict;
}
[dir="ltr"] .chs-loader { transform-origin: left center; }
.admin-bar .chs-loader { inset-block-start: var(--wp-admin--admin-bar--height, 32px); }
.chs-loader.is-active {
	opacity: 1;
	transition: opacity 200ms ease 150ms;
	animation: chs-loader-grow 10s cubic-bezier(0.08, 0.7, 0.2, 1) 150ms forwards;
}
@keyframes chs-loader-grow {
	0% { transform: scaleX(0); }
	10% { transform: scaleX(0.35); }
	100% { transform: scaleX(0.92); }
}

/* ---------- Smoother hover motion ----------
   style.css animates background-size for the 1px link lines. That repaints every frame.
   Here the line is a ::after element that scales (GPU, no repaint). Same look, same 600ms timing. */
.chasseur-header .chasseur-header__nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.chasseur-header__b2b a,
.chasseur-cat-chips__list a {
	position: relative; background: none !important;
}
.chasseur-header .chasseur-header__nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after,
.chasseur-header__b2b a::after,
.chasseur-cat-chips__list a::after {
	content: ""; position: absolute; inset-inline: 0; inset-block-end: 10px; height: 1px;
	background: currentColor; pointer-events: none;
	transform: scaleX(0); transform-origin: right center;
	transition: transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease);
}
.chasseur-header__b2b a::after { inset-inline: 6px; inset-block-end: 11px; }
.chasseur-cat-chips__list a::after { inset-block-end: 8px; }
[dir="ltr"] .chasseur-header .chasseur-header__nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after,
[dir="ltr"] .chasseur-header__b2b a::after,
[dir="ltr"] .chasseur-cat-chips__list a::after { transform-origin: left center; }
.chasseur-header .chasseur-header__nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
.chasseur-header .chasseur-header__nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after,
.chasseur-header .chasseur-header__nav .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content::after,
.chasseur-header .chasseur-header__nav .wp-block-navigation__container > .wp-block-navigation-item > [aria-current="page"]::after,
.chasseur-header__b2b a:hover::after,
.chasseur-cat-chips__list a:hover::after,
.chasseur-cat-chips__list .current-cat > a::after { transform: scaleX(1); }

/* Image hover zoom: keep the image on its own layer while it scales, so the edges do not shimmer. */
@media (hover: hover) {
	.chasseur-cards .wc-block-product-template > li:hover .wc-block-components-product-image img,
	.chasseur-cat-tile:hover .chasseur-cat-tile__img img,
	.chasseur-explore__card:hover .chasseur-explore__img img,
	.chasseur-promo:hover .chasseur-promo__img img,
	.chs-cat:hover .chs-cat__img img,
	.chs-card:hover .chs-card__img img { backface-visibility: hidden; }
}

/* ---------- Reduced motion: no page animation, no growing bar (a still bar shows instead). ---------- */
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	.chs-loader.is-active { animation: none; transform: scaleX(1); transition: opacity 0s linear 150ms; }
}