/* ==========================================================================
   Ramada Al-Raqi — motion.css  (Brief Y.19)
   Approved set: sticky header hide/show · RTL mask reveal · scroll reveal
   (opacity + 12px, once) · fabric swatch hover/tap · process line ·
   accordion · button micro-interaction · drawer slide.
   Rules: transform + opacity only (clip-path for the single mask reveal),
   tokens only, everything off under prefers-reduced-motion.
   Anything that hides content is gated on html.js (added in <head>), so
   nothing stays invisible if site.js fails to load.
   ========================================================================== */

:root {
	--dur-fast: var(--wp--custom--motion--dur-fast, 140ms);
	--dur: var(--wp--custom--motion--dur, 220ms);
	--dur-slow: var(--wp--custom--motion--dur-slow, 420ms);
	--ease: var(--wp--custom--motion--ease, cubic-bezier(.2, .7, .2, 1));
	--ease-io: var(--wp--custom--motion--ease-io, cubic-bezier(.4, 0, .2, 1));

	/* Direction-aware values. WordPress prints dir="rtl" only for RTL. */
	--mask-from: inset(0 100% 0 0);   /* LTR: reveal left → right */
	--line-origin: left;
	--drawer-from: -100%;
}
html[dir="rtl"] {
	--mask-from: inset(0 0 0 100%);   /* RTL: reveal right → left */
	--line-origin: right;
	--drawer-from: 100%;
}

/* ---------- 1. Sticky header hide / show (class toggled by site.js) ---------- */
/* No will-change here: on the header it would make the fixed-position mobile
   drawer resolve against the header box instead of the viewport. */
.rmd-site-header,
.rmd-subnav {
	transition: transform var(--dur) var(--ease);
}
html.is-header-hidden .rmd-site-header { transform: translateY(-100%); }
html.is-header-hidden .rmd-subnav { transform: translateY(calc(-1 * var(--header-h))); }

/* ---------- 2. Scroll reveal — opacity + 12px, once ---------- */
.js .rmd-reveal {
	transition:
		opacity var(--dur-slow) var(--ease),
		transform var(--dur-slow) var(--ease);
	transition-delay: calc(var(--i, 0) * 60ms);
}
.js .rmd-reveal:not(.is-visible) {
	opacity: 0;
	transform: translateY(12px);
}

/* ---------- 3. RTL mask reveal (single image per section) ---------- */
/* Hero: runs on load, no JS needed, no observer delay on the LCP area. */
.rmd-hero .rmd-mask {
	animation: rmd-mask calc(var(--dur-slow) * 2) var(--ease-io) 80ms both;
}
@keyframes rmd-mask {
	from { clip-path: var(--mask-from); }
	to   { clip-path: inset(0 0 0 0); }
}
/* Other sections: on scroll, once. */
.js .rmd-sec:not(.rmd-hero) .rmd-mask {
	transition: clip-path calc(var(--dur-slow) * 2) var(--ease-io);
}
.js .rmd-sec:not(.rmd-hero) .rmd-mask:not(.is-visible) { clip-path: var(--mask-from); }

/* ---------- 4. Fabric swatch hover / tap ---------- */
.rmd-swatch { transition: transform var(--dur) var(--ease); }
.rmd-swatch::after { /* the single shadow token, faded in (opacity only) */
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: var(--shadow-1), 0 0 0 1px rgba(201, 161, 100, .45);
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
	pointer-events: none;
}
.rmd-swatch .rmd-cloth { transition: transform var(--dur-slow) var(--ease); }
@media (hover: hover) {
	.rmd-swatch:hover { transform: translateY(-4px); }
	.rmd-swatch:hover::after { opacity: 1; }
	.rmd-swatch:hover .rmd-cloth { transform: scale(1.06); }
}
.rmd-swatch:focus-visible { transform: translateY(-4px); }
.rmd-swatch:focus-visible::after { opacity: 1; }
.rmd-swatch:active { transform: scale(.98); transition-duration: var(--dur-fast); }
.rmd-swatch:active .rmd-cloth { transform: scale(1.06); }

/* ---------- 5. Process line ---------- */
/* Desktop: one line draws in the reading direction. */
.js .rmd-process::before {
	transform: scaleX(0);
	transform-origin: var(--line-origin) center;
	transition: transform calc(var(--dur-slow) * 3) var(--ease-io) 150ms;
}
.js .rmd-process.is-visible::before { transform: scaleX(1); }
/* Mobile: each connector draws down after its step appears. */
.js .rmd-process__step::after {
	transform: scaleY(0);
	transform-origin: center top;
	transition: transform calc(var(--dur-slow) * 1.5) var(--ease-io) 200ms;
}
.js .rmd-process__step.is-visible::after { transform: scaleY(1); }

/* ---------- 6. Accordion (<details>) ---------- */
.rmd-faq__q .rmd-icon { transition: transform var(--dur) var(--ease); }
.rmd-faq__item[open] .rmd-faq__q .rmd-icon { transform: rotate(45deg); }
/* Smooth height where the platform supports it; instant elsewhere. */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
	.rmd-faq { interpolate-size: allow-keywords; }
	.rmd-faq__item::details-content {
		block-size: 0;
		overflow: clip;
		transition:
			block-size var(--dur-slow) var(--ease-io),
			content-visibility var(--dur-slow) allow-discrete;
	}
	.rmd-faq__item[open]::details-content { block-size: auto; }
}

/* ---------- 7. Buttons, links, cards ---------- */
.rmd-btn {
	transition:
		background-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease),
		transform var(--dur-fast) var(--ease);
}
.rmd-btn:active { transform: scale(.97); }
.rmd-card,
.rmd-subnav__link { transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.rmd-card .rmd-icon--arrow { transition: translate var(--dur) var(--ease); }
@media (hover: hover) {
	a.rmd-card:hover .rmd-icon--arrow { translate: -3px 0; }
	html:not([dir="rtl"]) a.rmd-card:hover .rmd-icon--arrow { translate: 3px 0; }
}

/* ---------- 8. Mobile drawer ---------- */
.rmd-menu[open] .rmd-menu__panel { animation: rmd-drawer var(--dur) var(--ease) both; }
.rmd-menu[open]::before { animation: rmd-fade var(--dur) var(--ease) both; }
@keyframes rmd-drawer { from { transform: translateX(var(--drawer-from)); } to { transform: none; } }
@keyframes rmd-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Reduced motion (mandatory) ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}
	.js .rmd-reveal:not(.is-visible) { opacity: 1; transform: none; }
	.rmd-mask, .js .rmd-sec .rmd-mask:not(.is-visible) { clip-path: none; animation: none; }
	.js .rmd-process::before { transform: none; }
	.js .rmd-process__step::after { transform: none; }
	.rmd-swatch:hover, .rmd-swatch:focus-visible, .rmd-swatch:active,
	.rmd-swatch:hover .rmd-cloth, .rmd-swatch:active .rmd-cloth { transform: none; }
}