/* ==========================================================================
   NAGI — motion
   transform and opacity only. Nothing here animates a layout property.
   ========================================================================== */

/* --------------------------------------------------------------------------
   No-JS safety.

   The hidden start-state only exists once JS has confirmed it is running by
   stamping data-motion="ready" on <html>. If the module fails to load, every
   reveal element renders at its final state and the page is fully readable.
   This is the whole reason the attribute exists — do not move these rules
   out from under it.
   -------------------------------------------------------------------------- */

[data-motion="ready"] [data-reveal] {
	opacity: 0;
}

[data-motion="ready"] [data-reveal][data-revealed] {
	opacity: 1;
}

/* Elements mid-flight get the hint; JS strips it on transitionend. */
.nagi-will-change {
	will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   Shared transition base
   -------------------------------------------------------------------------- */

[data-motion="ready"] [data-reveal] {
	transition-property: opacity, transform, clip-path, filter;
	transition-timing-function: var(--nagi-ease);
	transition-duration: var(--nagi-dur-l);
	transition-delay: var(--nagi-reveal-delay, 0ms);
}

/* --------------------------------------------------------------------------
   fade-up — the default for text blocks, cards and list items. 700ms.
   -------------------------------------------------------------------------- */

[data-motion="ready"] [data-reveal="fade-up"] {
	transform: translate3d(0, 24px, 0);
	transition-duration: var(--nagi-dur-l);
}

[data-motion="ready"] [data-reveal="fade-up"][data-revealed] {
	transform: translate3d(0, 0, 0);
}

/* --------------------------------------------------------------------------
   fade-in — backgrounds, scrims, low-priority items. 600ms.
   -------------------------------------------------------------------------- */

[data-motion="ready"] [data-reveal="fade-in"] {
	transition-duration: 600ms;
}

/* --------------------------------------------------------------------------
   split-lines — per-line clip-up, 90ms stagger, 900ms.
   The wrapper itself stays visible; the lines do the moving.
   -------------------------------------------------------------------------- */

[data-motion="ready"] [data-reveal="split-lines"] {
	opacity: 1;
}

.nagi-split__line {
	display: block;
	overflow: hidden;
}

.nagi-split__inner {
	display: block;
	transform: translate3d(0, 0, 0);
}

[data-motion="ready"] [data-reveal="split-lines"] .nagi-split__inner {
	transform: translate3d(0, 105%, 0);
	transition: transform 900ms var(--nagi-ease);
	transition-delay: calc(var(--nagi-reveal-delay, 0ms) + var(--nagi-line-i, 0) * 90ms);
}

[data-motion="ready"] [data-reveal="split-lines"][data-revealed] .nagi-split__inner {
	transform: translate3d(0, 0, 0);
}

/* --------------------------------------------------------------------------
   mask-up — every editorial and category image. 900ms.
   The clip and the scale run on one timeline, not two.
   -------------------------------------------------------------------------- */

[data-motion="ready"] [data-reveal="mask-up"] {
	opacity: 1;
	clip-path: inset(100% 0 0 0);
	transition: clip-path 900ms var(--nagi-ease);
	transition-delay: var(--nagi-reveal-delay, 0ms);
}

[data-motion="ready"] [data-reveal="mask-up"][data-revealed] {
	clip-path: inset(0 0 0 0);
}

[data-motion="ready"] [data-reveal="mask-up"] > img,
[data-motion="ready"] [data-reveal="mask-up"] .nagi-img {
	transform: scale(1.06);
	transition: transform 900ms var(--nagi-ease);
	transition-delay: var(--nagi-reveal-delay, 0ms);
}

[data-motion="ready"] [data-reveal="mask-up"][data-revealed] > img,
[data-motion="ready"] [data-reveal="mask-up"][data-revealed] .nagi-img {
	transform: scale(1);
}

/* --------------------------------------------------------------------------
   mask-left — wide banners and full-bleed strips. 800ms.
   -------------------------------------------------------------------------- */

[data-motion="ready"] [data-reveal="mask-left"] {
	opacity: 1;
	clip-path: inset(0 100% 0 0);
	transition: clip-path 800ms var(--nagi-ease);
	transition-delay: var(--nagi-reveal-delay, 0ms);
}

[data-motion="ready"] [data-reveal="mask-left"][data-revealed] {
	clip-path: inset(0 0 0 0);
}

/* --------------------------------------------------------------------------
   stagger — product grids, category grids, feature rows. 700ms per child.
   The parent is only a controller; it never hides itself.
   -------------------------------------------------------------------------- */

[data-motion="ready"] [data-reveal="stagger"],
[data-motion="ready"] [data-reveal="rail-in"] {
	opacity: 1;
}

[data-motion="ready"] [data-reveal="stagger"] > * {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	transition: opacity var(--nagi-dur-l) var(--nagi-ease), transform var(--nagi-dur-l) var(--nagi-ease);
	transition-delay: calc(var(--nagi-reveal-delay, 0ms) + var(--nagi-stagger-i, 0) * var(--nagi-stagger-step, 70ms));
}

[data-motion="ready"] [data-reveal="stagger"][data-revealed] > * {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* --------------------------------------------------------------------------
   rail-in — horizontal product rails. translateX, 60ms stagger.
   -------------------------------------------------------------------------- */

[data-motion="ready"] [data-reveal="rail-in"] > * {
	opacity: 0;
	transform: translate3d(40px, 0, 0);
	transition: opacity var(--nagi-dur-l) var(--nagi-ease), transform var(--nagi-dur-l) var(--nagi-ease);
	transition-delay: calc(var(--nagi-reveal-delay, 0ms) + var(--nagi-stagger-i, 0) * var(--nagi-stagger-step, 60ms));
}

[data-motion="ready"] [data-reveal="rail-in"][data-revealed] > * {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* --------------------------------------------------------------------------
   line-draw — dividers, underlines, timeline rules. 600ms from the left.
   -------------------------------------------------------------------------- */

[data-motion="ready"] [data-reveal="line-draw"] {
	opacity: 1;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 600ms var(--nagi-ease);
	transition-delay: var(--nagi-reveal-delay, 0ms);
}

[data-motion="ready"] [data-reveal="line-draw"][data-revealed] {
	transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   blur-in — used once, on the Origin Story quote. Nowhere else.
   -------------------------------------------------------------------------- */

[data-motion="ready"] [data-reveal="blur-in"] {
	filter: blur(6px);
	transition-duration: 800ms;
}

[data-motion="ready"] [data-reveal="blur-in"][data-revealed] {
	filter: blur(0);
}

/* --------------------------------------------------------------------------
   Below-fold sections skip layout and paint until they approach the viewport.
   contain-intrinsic-size is set inline per section so the scrollbar is honest.
   -------------------------------------------------------------------------- */

.nagi-deferred {
	content-visibility: auto;
}

/* --------------------------------------------------------------------------
   Reduced motion.

   Everything collapses to its final state. The Trade Line renders fully
   drawn, the marquee freezes, parallax is off, and hover falls back to
   colour changes — all handled in JS. This block is the CSS half.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

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

	[data-motion="ready"] [data-reveal],
	[data-motion="ready"] [data-reveal] > * {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		filter: none !important;
	}

	[data-motion="ready"] [data-reveal="split-lines"] .nagi-split__inner {
		transform: none !important;
	}

	.nagi-marquee__track {
		animation: none !important;
		transform: none !important;
	}
}