/* v3-motion: owned by motion-perf (design doc 10.4, 10.7, 13). Loaded after v3-core.css.
   Everything here is transform/opacity and <= 400 ms (--v3-dur-max); the only infinite animations on the site are the skeleton shimmer
   (.v3-skel::after, v3-core.css) and the ambient glow (wow.css, off for reduced motion, data-wow="off" and below 768 px). */

/* ---------- 1. Page change (React <ViewTransition> in NavigationFrame) ---------- */
/* v3-core.css switches the root animation off. Without a blend reset the old and new root images would be added together (plus-lighter)
   for the length of the transition, so show only the new root: everything outside the animated page swaps instantly. */
::view-transition-old(root) { display: none; }
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* nav-back (breadcrumb up): the same 180 ms fade as nav-forward, rising from the left. Lateral changes use .v3-fade (v3-core.css). */
@keyframes v3-vt-in-up-back { from { opacity: 0; transform: translate(-6px, 6px); } }
::view-transition-old(.v3-in-back) { animation: v3-vt-out 120ms var(--v3-ease-out) both; }
::view-transition-new(.v3-in-back) { animation: v3-vt-in-up-back 180ms var(--v3-ease-out) both; }

/* The sticky header must stay put and stay ABOVE the page groups (groups paint in z-order; an unnamed header would sit in the root image, under the
   old page, and blink out for 120 ms). It is named only while a transition runs: a permanent name would also make the header the containing
   block of anything fixed inside it (mega menu, phone drawer). */
:root:active-view-transition :is(#t_Header, header.t-Header, [data-site-header]) { view-transition-name: site-header; }
::view-transition-group(site-header) { animation: none; }
::view-transition-old(site-header) { display: none; }
::view-transition-new(site-header) { animation: none; mix-blend-mode: normal; }

/* Kill switch: html[data-wow="off"] (also set by WowFx for localStorage / ?wow=off). NavigationFrame already starts no transition then. */
html[data-wow="off"]::view-transition-group(*), html[data-wow="off"]::view-transition-old(*), html[data-wow="off"]::view-transition-new(*) { animation: none !important; }

/* Browser Back/Forward starts no view transition (Next's popstate dispatch is not a React transition): NavigationFrame sets html[data-v3-pop] for
   600 ms and the page that mounts in that window fades in instead. */
@keyframes v3-page-pop { from { opacity: 0; } }

/* The page-in fade of wow.css (.dxb-page opacity .35 -> 1 whenever the page mounted) is replaced by the view transition. */
html body .t-Body-contentInner > .dxb-page:not([hidden]) { animation: none; }
html[data-v3-pop]:not([data-wow="off"]) body .t-Body-contentInner > .dxb-page:not([hidden]) { animation: v3-page-pop var(--v3-dur-base, 180ms) var(--v3-ease-out) both; }

/* ---------- 2. Layout stability (audit P-H6: desktop CLS 0.259, a .t-Footer jump on market overview, area performance, supply) ---------- */
/* Cause: a route's loading state or first paint is shorter than the page it turns into, so the footer sits inside the first screen and jumps
   to the bottom of the real content once the data arrives. Reserve the first screen: the footer then starts below the fold (shifts of
   elements that are off screen before and after do not count) and a short page still ends at the bottom edge instead of mid-screen.
   Works for the old footer (.t-Footer) and for whatever footer nav-search mounts, because it is the page that is reserved. */
html body .t-Body-contentInner > .dxb-page { min-height: calc(100lvh - var(--dxb-header-h, 72px)); }

/* ---------- 3. KPI entrance (wow.css: 480 ms rise, 60 ms stagger) -> 360 ms, 30 ms stagger ---------- */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-wow="off"]) body .t-BadgeList-item { animation-duration: var(--v3-dur-count, 360ms); }
  html:not([data-wow="off"]) body .t-BadgeList-item:nth-child(2) { animation-delay: 30ms; }
  html:not([data-wow="off"]) body .t-BadgeList-item:nth-child(3) { animation-delay: 60ms; }
  html:not([data-wow="off"]) body .t-BadgeList-item:nth-child(4) { animation-delay: 90ms; }
}

/* ---------- 4. Ambient glow (wow.css): nothing to see behind an open dialog or layer, so stop painting it ---------- */
html.dxb-modal-open body::before, body.layer-open::before { animation-play-state: paused; }

/* ---------- 5. Safety net: infinite or slow decoration that is not the shimmer or the glow ---------- */
/* The flashing red "New" badge in the header (inline CSS of generated/SiteFooter.jsx: fa-anim-flash 1s infinite). nav-search removes the badge; until their
   header is live it stops flashing (an infinite 1 s animation breaks the 400 ms rule and a calm header is the point of v3). */
html body .cross_sale_new .t-Button-label::before { animation: none; opacity: 1; }