/* ============================================================================
   MAXPOINT MOTION SYSTEM v4 — «طلای دقیق»
   Reveal · stagger · micro-interactions · feedback · celebration.
   GPU-friendly (transform/opacity only) · reduced-motion safe.
   ========================================================================== */

/* ---------------------------------------------- reveal primitives */
.js .rv, .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--d-reveal) var(--e-out), transform var(--d-reveal) var(--e-out); }
.js .rv[data-rv="left"], .js .reveal[data-rv="left"] { transform: translateX(26px); }
.js .rv[data-rv="right"], .js .reveal[data-rv="right"] { transform: translateX(-26px); }
.js .rv[data-rv="scale"], .js .reveal[data-rv="scale"] { transform: scale(.92); }
.js .rv[data-rv="flip"] { transform: perspective(800px) rotateX(9deg); }
.js .rv.in, .js .rv.is-in, .js .reveal.in, .js .reveal.is-in, .js .rv.visible, .js .reveal.visible { opacity: 1; transform: none; }

/* stagger children */
.js [data-stagger] > * { opacity: 0; transform: translateY(16px); transition: opacity var(--d-reveal) var(--e-out), transform var(--d-reveal) var(--e-out); }
.js [data-stagger].in > *, .js [data-stagger].is-in > *, .js .stagger.in > *, .js .stagger.is-in > * { opacity: 1; transform: none; }
.js [data-stagger].in > *:nth-child(1), .js .stagger.in > *:nth-child(1) { transition-delay: 40ms; }
.js [data-stagger].in > *:nth-child(2), .js .stagger.in > *:nth-child(2) { transition-delay: 90ms; }
.js [data-stagger].in > *:nth-child(3), .js .stagger.in > *:nth-child(3) { transition-delay: 140ms; }
.js [data-stagger].in > *:nth-child(4), .js .stagger.in > *:nth-child(4) { transition-delay: 190ms; }
.js [data-stagger].in > *:nth-child(5), .js .stagger.in > *:nth-child(5) { transition-delay: 240ms; }
.js [data-stagger].in > *:nth-child(6), .js .stagger.in > *:nth-child(6) { transition-delay: 290ms; }
.js [data-stagger].in > *:nth-child(7), .js .stagger.in > *:nth-child(7) { transition-delay: 340ms; }
.js [data-stagger].in > *:nth-child(8), .js .stagger.in > *:nth-child(8) { transition-delay: 390ms; }
.js [data-stagger].in > *:nth-child(n+9), .js .stagger.in > *:nth-child(n+9) { transition-delay: 430ms; }

/* list enter/exit (filter transitions) */
.enter-exit-list > * { animation: mx-item-in var(--d-base) var(--e-out) both; }
@keyframes mx-item-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------- signatures */
.mx-grad-border { position: relative; border: 1px solid transparent !important; background-clip: padding-box; }
.mx-grad-border::before {
  content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: conic-gradient(from var(--mx-gb-angle, 0deg), var(--gold-2), #fbd465, var(--gold-3), var(--gold-2));
  animation: mx-gb-spin 4.5s linear infinite;
}
@property --mx-gb-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes mx-gb-spin { to { --mx-gb-angle: 360deg; } }

.mx-glow { animation: mx-glow-pulse 2.6s var(--e-inout) infinite; }
@keyframes mx-glow-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(237, 169, 34, .4); } 55% { box-shadow: 0 0 0 9px rgba(237, 169, 34, 0); } }

.mx-shimmer { position: relative; overflow: hidden; }
.mx-shimmer::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .35) 50%, transparent 60%);
  transform: translateX(140%);
}
.mx-shimmer--auto::after { animation: mx-sweep 3.2s var(--e-inout) infinite; }
@keyframes mx-sweep { 60%, 100% { transform: translateX(-140%); } }

.mx-float { animation: mx-float 5s ease-in-out infinite; }
.mx-float--slow { animation-duration: 7s; }
.mx-float--fast { animation-duration: 3.4s; }

.mx-pop { animation: mx-pop-in .55s var(--e-spring) both; }
@keyframes mx-pop-in { 0% { opacity: 0; transform: scale(.8); } 65% { transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }

.mx-bounce-soft { animation: mx-bounce-soft 2.2s var(--e-inout) infinite; }
@keyframes mx-bounce-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.mx-spin-slow { animation: mx-spin 9s linear infinite; }

.mx-wiggle { animation: mx-wiggle 2.4s var(--e-inout) infinite; }
@keyframes mx-wiggle { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(-4deg); } 94% { transform: rotate(4deg); } 98% { transform: rotate(-2deg); } }

.mx-typing { display: inline-flex; gap: 4px; align-items: center; }
.mx-typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .4; animation: mx-typing 1.1s var(--e-inout) infinite; }
.mx-typing i:nth-child(2) { animation-delay: .18s; }
.mx-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes mx-typing { 0%, 100% { opacity: .35; transform: translateY(0); } 45% { opacity: 1; transform: translateY(-4px); } }

.mx-pulse-dot { animation: mx-pulse-dot 1.6s var(--e-inout) infinite; }

.mx-swipe { position: relative; overflow: hidden; }
.mx-swipe::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 34%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold-2) 22%, transparent), transparent);
  animation: mx-swipe 2.8s var(--e-inout) infinite;
}
@keyframes mx-swipe { 0% { inset-inline-start: -40%; } 100% { inset-inline-start: 110%; } }

.mx-flash { animation: mx-flash 1s var(--e-out) 1; }
@keyframes mx-flash { 0% { background-color: var(--gold-soft); } 100% { background-color: transparent; } }

/* marquee (logos / announcements) */
.mx-marquee { overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mx-marquee-track { display: flex; gap: 40px; width: max-content; animation: mx-marquee 26s linear infinite; }
[dir="ltr"] .mx-marquee-track { animation-direction: reverse; }
@keyframes mx-marquee { to { transform: translateX(50%); } }

/* ------------------------------------------------ micro-feedback */
/* add-to-cart: element flies to cart icon (JS clones + positions) */
.mx-fly-to-cart { position: fixed; z-index: 250; pointer-events: none; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--gold-2); color: #241a05; box-shadow: var(--e4); animation: mx-fly .7s var(--e-inout) forwards; }
@keyframes mx-fly {
  0% { opacity: 1; transform: translate(var(--mx-fly-x0, 0), var(--mx-fly-y0, 0)) scale(1); }
  70% { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--mx-fly-x1, 0), var(--mx-fly-y1, -240px)) scale(.25); }
}

/* button success morph */
.btn.is-success { background: var(--ok) !important; color: #fff !important; }
.btn.is-success svg { animation: mx-pop-in .4s var(--e-spring); }

/* number bump (cart counter update) */
.mx-bump { animation: mx-bump .45s var(--e-spring); }
@keyframes mx-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* progress bars animate on reveal (JS sets --w) */
.js .hbar-fill { width: 0; }
.js .hbar-fill.is-in { width: var(--w, 0%); }
.js .exam-progress-fill { width: 0; }
.js .exam-progress-fill.is-in { width: var(--w, 0%); }

/* chart draw-in */
.js .line-path { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.js .is-drawn .line-path, .js .line-path.is-in { animation: mx-draw 1.4s var(--e-out) forwards; }
@keyframes mx-draw { to { stroke-dashoffset: 0; } }
.js .curve-path { stroke-dasharray: 1600; stroke-dashoffset: 1600; }
.js .is-drawn .curve-path { animation: mx-draw 1.5s var(--e-out) forwards; }

/* confetti pieces (MXMotion.confetti) */
.mx-confetti-host { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 60; }
.mx-confetti-piece { position: absolute; width: 9px; height: 13px; top: -16px; border-radius: 2px; opacity: 0; animation: mx-confetti-fall var(--mx-cf-dur, 2.6s) var(--e-inout) forwards; }
@keyframes mx-confetti-fall {
  0% { opacity: 1; transform: translate(0, -10px) rotate(0); }
  100% { opacity: 0; transform: translate(var(--mx-cf-x, 40px), 105%) rotate(var(--mx-cf-rot, 540deg)); }
}

/* skeleton wave while loading lists */
.mx-loading-dots { display: inline-flex; gap: 5px; }
.mx-loading-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-2); animation: mx-typing 1s var(--e-inout) infinite; }
.mx-loading-dots i:nth-child(2) { animation-delay: .15s; }
.mx-loading-dots i:nth-child(3) { animation-delay: .3s; }

/* page transition helper (JS toggles on internal nav) */
body.mx-leaving { opacity: 0; transition: opacity 180ms var(--e-exit); }

/* count-up flash */
.mx-count.is-done { animation: mx-bump .4s var(--e-spring); }

/* ------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .reveal, .js [data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mx-grad-border::before, .mx-glow, .mx-shimmer--auto::after, .mx-float, .mx-float--slow, .mx-float--fast,
  .mx-bounce-soft, .mx-spin-slow, .mx-wiggle, .mx-swipe::after, .mx-marquee-track,
  .mx-pulse-dot, .badge-dot--pulse, .timer.is-low, .hero-scroll-cue { animation: none !important; }
  .mx-confetti-piece, .mx-fly-to-cart { display: none !important; }
  .js .line-path, .js .curve-path { stroke-dashoffset: 0 !important; }
  .js .hbar-fill, .js .exam-progress-fill { width: var(--w, 0%) !important; }
}
html[data-reduced-motion="1"] .mx-grad-border::before, html[data-reduced-motion="1"] .mx-glow,
html[data-reduced-motion="1"] .mx-shimmer--auto::after, html[data-reduced-motion="1"] .mx-float,
html[data-reduced-motion="1"] .mx-bounce-soft, html[data-reduced-motion="1"] .mx-wiggle,
html[data-reduced-motion="1"] .mx-marquee-track, html[data-reduced-motion="1"] .mx-confetti-piece,
html[data-reduced-motion="1"] .mx-fly-to-cart { animation: none !important; }