/* ==========================================================================
   Motion system
   Opt-in reveals: data-xn-motion="fade|slide|scale|reveal|words|image-reveal"
   Groups:         data-xn-stagger (children receive --xn-i)
   Content stays visible unless JS marks the document ready, so a script
   failure never hides content. prefers-reduced-motion disables everything.
   ========================================================================== */

@keyframes xn-spin       { to { transform: rotate(360deg); } }
@keyframes xn-shimmer    { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes xn-pulse      { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes xn-fade-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes xn-fade-out   { from { opacity: 1; } to { opacity: 0; } }
@keyframes xn-dialog-in  { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes xn-dialog-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes xn-sheet-in   { from { transform: translateY(100%); } to { transform: none; } }
@keyframes xn-sheet-out  { from { transform: none; } to { transform: translateY(100%); } }
@keyframes xn-drawer-in      { from { transform: translateX(100%); } to { transform: none; } }
@keyframes xn-drawer-out     { from { transform: none; } to { transform: translateX(100%); } }
@keyframes xn-drawer-in-rtl  { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes xn-drawer-out-rtl { from { transform: none; } to { transform: translateX(-100%); } }
@keyframes xn-toast-in   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes xn-ken        { from { transform: scale(1.06); } to { transform: scale(1); } }

.xn-motion-ready [data-xn-motion] {
	transition:
		opacity var(--xn-dur-4) var(--xn-ease-out),
		transform var(--xn-dur-4) var(--xn-ease-out),
		clip-path var(--xn-dur-5) var(--xn-ease-out);
	transition-delay: calc(var(--xn-i, 0) * var(--xn-stagger));
}
.xn-motion-ready [data-xn-motion]:not(.is-in) { opacity: 0; }
.xn-motion-ready [data-xn-motion="slide"]:not(.is-in)  { transform: translateY(20px); }
.xn-motion-ready [data-xn-motion="scale"]:not(.is-in)  { transform: scale(0.965); }
.xn-motion-ready [data-xn-motion="reveal"]:not(.is-in) { transform: translateY(10px); }
.xn-motion-ready [data-xn-motion="image-reveal"] { overflow: hidden; }
.xn-motion-ready [data-xn-motion="image-reveal"]:not(.is-in) { opacity: 1; clip-path: inset(0 0 100% 0); }
.xn-motion-ready [data-xn-motion="image-reveal"].is-in { clip-path: inset(0 0 0 0); }
.xn-motion-ready [data-xn-motion="image-reveal"] img { transition: transform calc(var(--xn-dur-5) * 1.5) var(--xn-ease-out); }
.xn-motion-ready [data-xn-motion="image-reveal"]:not(.is-in) img { transform: scale(1.08); }

/* Word-by-word — JS wraps words in .xn-word (never splits Arabic words) */
.xn-motion-ready [data-xn-motion="words"] { opacity: 1; }
.xn-word { display: inline-block; white-space: pre; }
.xn-motion-ready [data-xn-motion="words"] .xn-word {
	opacity: 0; transform: translateY(0.35em);
	transition: opacity var(--xn-dur-4) var(--xn-ease-out), transform var(--xn-dur-4) var(--xn-ease-out);
	transition-delay: calc(var(--xn-i, 0) * var(--xn-word-step, 28ms));
}
.xn-motion-ready [data-xn-motion="words"].is-in .xn-word { opacity: 1; transform: none; }

/* Hover micro-interaction helper */
.xn-hover-lift { transition: transform var(--xn-dur-3) var(--xn-ease-out); }
.xn-hover-lift:hover { transform: translateY(var(--xn-lift)); }

/* Page transitions between documents (supporting browsers) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--xn-dur-2); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}
	.xn-motion-ready [data-xn-motion],
	.xn-motion-ready [data-xn-motion] img,
	.xn-motion-ready [data-xn-motion] .xn-word { opacity: 1 !important; transform: none !important; clip-path: none !important; }
	.xn-carousel--hero .xn-carousel__slide img { animation: none !important; }
	@view-transition { navigation: none; }
}