/* ===== motion system =====
   html[data-motion] = full | low | off   (JS also forces "off" when prefers-reduced-motion is set)
   off  -> nothing moves, nothing transitions          low -> light transitions only        full -> everything */

html[data-motion="low"] { --t: .14s ease; }
html[data-motion="low"] *, html[data-motion="low"] *::before, html[data-motion="low"] *::after { animation: none !important; }
html[data-motion="low"] .spinner { animation: spin .8s linear infinite !important; }

html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
html[data-motion="off"] { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
  html *, html *::before, html *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes shimmer-rtl { to { transform: translateX(-100%); } }

/* ---- skeleton ---- */
html[data-motion="full"] .skel::after { animation: shimmer 1.4s linear infinite; }
html[data-motion="full"][dir="rtl"] .skel::after { animation-name: shimmer-rtl; }
.spinner { animation: spin .8s linear infinite; }

/* ---- scroll reveal (only hides things when JS has enabled it) ---- */
html[data-reveal="on"] .rv { transition: opacity var(--rv-dur, .6s) var(--ease), transform var(--rv-dur, .6s) var(--ease); }
html[data-reveal="on"] .rv:not(.in) { opacity: 0; transform: translateY(20px) scale(.985); }
/* شكل الظهور (revealStyle): rise = الافتراضي */
html[data-reveal="on"][data-reveal-style="rise"] .rv:not(.in) { transform: translateY(20px) scale(.985); }
html[data-reveal="on"][data-reveal-style="fade"] .rv:not(.in) { transform: none; }
html[data-reveal="on"][data-reveal-style="blur"] .rv { transition-property: opacity, transform, filter; }
html[data-reveal="on"][data-reveal-style="blur"] .rv:not(.in) { transform: translateY(8px); filter: blur(10px); }
html[data-reveal="on"][data-reveal-style="zoom"] .rv:not(.in) { transform: scale(.93); }
html[data-reveal="on"][data-reveal-style="slide"] .rv:not(.in) { transform: translateX(calc(var(--sx, 1) * -26px)); }

/* ---- tempo: إيقاع كل الانتقالات (الظهور · الـ hover · القوايم) — شخصية الثيم، مش حركة زيادة ---- */
html[data-tempo="calm"] { --ease: cubic-bezier(.16, .84, .3, 1); --t: .36s var(--ease); --rv-dur: .95s; }
html[data-tempo="smooth"] { --ease: cubic-bezier(.2, .8, .2, 1); --t: .22s var(--ease); --rv-dur: .6s; }
html[data-tempo="swift"] { --ease: cubic-bezier(.3, .7, .2, 1); --t: .15s var(--ease); --rv-dur: .4s; }
html[data-tempo="spring"] { --ease: cubic-bezier(.34, 1.42, .5, 1); --t: .26s var(--ease); --rv-dur: .62s; }
html[data-motion="low"][data-tempo] { --t: .14s ease; }

/* ---- hover effects on product cards ---- */
html[data-hover="lift"][data-motion="full"] .pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--primary) 50%, transparent); }
html[data-hover="lift"] .pcard:hover { border-color: color-mix(in srgb, var(--primary) 50%, transparent); }
html[data-hover="glow"] .pcard:hover, html[data-hover="glow"] .pcard:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), 0 0 36px var(--glow), 0 0 80px color-mix(in srgb, var(--accent) 18%, transparent); }
/* trace: خط بيلفّ حوالين الكارت (conic + mask) — بدون ميل ولا رفع */
@property --tr-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes trace { to { --tr-a: 360deg; } }
html[data-hover="trace"] .pcard { position: relative; }
html[data-hover="trace"] .pcard:hover, html[data-hover="trace"] .pcard:focus-visible { border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
html[data-hover="trace"] .pcard::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; z-index: 2; transition: opacity var(--t);
  background: conic-gradient(from var(--tr-a), transparent 0 62%, var(--accent) 82%, var(--primary) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
html[data-hover="trace"][data-motion="full"] .pcard:hover::before, html[data-hover="trace"][data-motion="full"] .pcard:focus-visible::before { opacity: 1; animation: trace 2.6s linear infinite; }
html[data-hover="tilt"][data-motion="full"] .pcard { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; will-change: transform; }
html[data-hover="tilt"][data-motion="full"] .pcard.tilting { transition: transform .08s linear, border-color var(--t), box-shadow var(--t); border-color: color-mix(in srgb, var(--primary) 55%, transparent); box-shadow: var(--shadow-2); }
html[data-hover="tilt"][data-motion="full"] .pcard::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--text) 16%, transparent), transparent 60%);
}
html[data-hover="tilt"][data-motion="full"] .pcard.tilting::after { opacity: 1; }
html[data-motion="full"] .pcard:hover .pcard-media img { transform: scale(1.06); }

/* ---- sheen (light sweep) ---- */
:root { --sx: 1; }
[dir="rtl"] { --sx: -1; }
@keyframes sheen { 0% { transform: translateX(0) skewX(-18deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(calc(450% * var(--sx))) skewX(-18deg); opacity: 0; } }
html[data-motion="full"] .pcard:hover .sheen::before { animation: sheen .9s var(--ease); }
html[data-motion="full"] .member-card .sheen::before, html[data-motion="full"] .receipt-card .sheen::before { animation: sheen 4.8s ease-in-out infinite; animation-delay: 1s; }

/* ---- brand/button/logo glow ---- */
@keyframes btnglow { 0%, 100% { box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 30%, transparent); } 50% { box-shadow: 0 8px 34px color-mix(in srgb, var(--primary) 62%, transparent), 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); } }
html[data-button-glow="on"][data-motion="full"] .btn-primary:not([disabled]) { animation: btnglow 2.8s ease-in-out infinite; }
@keyframes logoglow { from { box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 35%, transparent); } to { box-shadow: 0 4px 30px color-mix(in srgb, var(--accent) 75%, transparent), 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); } }
html[data-logo-glow="on"][data-motion="full"] .brand-mark { animation: logoglow 2.6s ease-in-out infinite alternate; }
html[data-logo-glow="on"][data-motion="full"] .brand-mark img { filter: drop-shadow(0 0 8px var(--glow-2)); }

/* ---- balance pill / bell ---- */
@keyframes balpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 70%, transparent); transform: scale(1); } 40% { transform: scale(1.08); } 100% { box-shadow: 0 0 0 16px transparent; transform: scale(1); } }
html[data-motion="full"] .bal-pill.pulse { animation: balpulse .9s var(--ease); }
@keyframes ring { 0%, 18%, 100% { transform: rotate(0); } 2% { transform: rotate(16deg); } 5% { transform: rotate(-14deg); } 8% { transform: rotate(10deg); } 11% { transform: rotate(-8deg); } 14% { transform: rotate(4deg); } }
html[data-motion="full"] .bell.ring .ic { transform-origin: 50% 8%; animation: ring 5s ease-in-out infinite; }
@keyframes badgepop { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
html[data-motion="full"] .badge-dot { animation: badgepop .4s var(--ease); }

/* ---- page / dialog / toast entrances ---- */
@keyframes dlgIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes dlgOut { to { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes sheetIn { from { transform: translateY(60px); opacity: .4; } to { transform: none; opacity: 1; } }
html[data-motion="full"] dialog.dlg[open] { animation: dlgIn .3s var(--ease); }
html[data-motion="full"] dialog.dlg[open]::backdrop { animation: fadeIn .3s ease; }
html[data-motion="full"] dialog.dlg.closing { animation: dlgOut .18s ease forwards; }
@media (max-width: 560px) { html[data-motion="full"] dialog.dlg[open] { animation-name: sheetIn; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }
html[data-motion="full"] .toast { animation: toastIn .32s var(--ease); }
html[data-motion="full"] .toast.out { animation: toastOut .2s ease forwards; }
html[data-motion="full"] .menu-panel { animation: dlgIn .22s var(--ease); transform-origin: top; }
html[data-motion="full"] .bn-link[aria-current="page"] .bn-ic { animation: balpulse .7s var(--ease); }

/* ---- hero visual ---- */
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes orbit-rev { to { transform: rotate(-360deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.03); opacity: 1; } }
html[data-motion="full"] .orb { animation: breathe 6s ease-in-out infinite; }
html[data-motion="full"] .orb-ring { animation: orbit 26s linear infinite; }
html[data-motion="full"] .orb-ring.r2 { animation: orbit-rev 40s linear infinite; }
html[data-motion="full"] .orb-core { animation: floaty 5s ease-in-out infinite; }
html[data-motion="full"] .float-chip.c1 { animation: floaty 6s ease-in-out infinite; }
html[data-motion="full"] .float-chip.c2 { animation: floaty 7s ease-in-out -2s infinite; }
html[data-motion="full"] .float-chip.c3 { animation: floaty 5.5s ease-in-out -4s infinite; }

/* ---- background engines (aurora / grid are CSS; particles / stars are canvas) ---- */
#bg-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.aurora { position: absolute; inset: 0; overflow: hidden; }
.aurora-blob { position: absolute; width: 58vmax; height: 58vmax; border-radius: 50%; filter: blur(90px); opacity: calc(.27 * var(--bgd, 1)); mix-blend-mode: screen; will-change: transform; }
html[data-scheme="light"] .aurora-blob { mix-blend-mode: multiply; opacity: calc(.2 * var(--bgd, 1)); }
.aurora-blob.b1 { background: var(--primary); inset-block-start: -22%; inset-inline-start: -12%; animation: auroraA 24s ease-in-out infinite alternate; }
.aurora-blob.b2 { background: var(--accent); inset-block-start: 18%; inset-inline-end: -18%; animation: auroraB 30s ease-in-out infinite alternate; }
.aurora-blob.b3 { background: var(--success); width: 44vmax; height: 44vmax; inset-block-end: -24%; inset-inline-start: 22%; opacity: calc(.2 * var(--bgd, 1)); animation: auroraC 34s ease-in-out infinite alternate; }
.aurora-blob.b4 { background: var(--primary); width: 36vmax; height: 36vmax; inset-block-start: 42%; inset-inline-start: -10%; opacity: calc(.18 * var(--bgd, 1)); animation: auroraB 38s ease-in-out -9s infinite alternate-reverse; }
@keyframes auroraA { from { transform: translate3d(0, 0, 0) rotate(0) scale(1); } to { transform: translate3d(18vw, 14vh, 0) rotate(40deg) scale(1.25); } }
@keyframes auroraB { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-20vw, 10vh, 0) scale(.85); } }
@keyframes auroraC { from { transform: translate3d(0, 0, 0) scale(.9); } to { transform: translate3d(14vw, -18vh, 0) scale(1.2); } }

.gridbg { position: absolute; inset: 0; overflow: hidden; perspective: 520px; perspective-origin: 50% 36%; opacity: min(1, calc(.45 + var(--bgd, 1) * .35)); -webkit-mask-image: linear-gradient(to bottom, transparent 10%, #000 52%); mask-image: linear-gradient(to bottom, transparent 10%, #000 52%); }
.grid-plane { position: absolute; inset-inline: -60%; inset-block-start: 36%; height: 140%; transform-origin: 50% 0; transform: rotateX(64deg); background-image: linear-gradient(color-mix(in srgb, var(--accent) 45%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--primary) 45%, transparent) 1px, transparent 1px); background-size: 60px 60px; animation: gridmove 3.4s linear infinite; }
html[data-scheme="light"] .grid-plane { background-image: linear-gradient(color-mix(in srgb, var(--primary) 30%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--primary) 30%, transparent) 1px, transparent 1px); }
.gridbg::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 30%; height: 18%; background: radial-gradient(60% 100% at 50% 50%, color-mix(in srgb, var(--accent) 28%, transparent), transparent); }
@keyframes gridmove { to { background-position: 0 60px; } }

/* ---- cursor glow ---- */
#cursor-glow { position: fixed; inset-block-start: 0; inset-inline-start: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .4s; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--primary) 8%, transparent) 55%, transparent); will-change: transform; }
html[data-cursor-glow="on"][data-motion="full"] #cursor-glow.on { opacity: 1; }
@media (hover: none), (pointer: coarse) { #cursor-glow { display: none; } }

/* ---- marquee ---- */
@keyframes marquee { to { transform: translateX(calc(-50% * var(--mdir, 1))); } }
[dir="rtl"] { --mdir: -1; }
html[data-motion="full"] .ticker:not(.static) .ticker-track { animation: marquee var(--dur, 40s) linear infinite; }
html[data-motion="full"] .ticker:not(.static):hover .ticker-track, html[data-motion="full"] .ticker:not(.static):focus-within .ticker-track { animation-play-state: paused; }

/* ---- preloader ---- */
.boot { position: fixed; inset: 0; z-index: 2500; background: var(--bg); display: grid; place-items: center; transition: opacity .55s ease, visibility .55s; }
.boot.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.boot.gone { display: none; }
.pl { display: grid; place-items: center; gap: 18px; color: var(--text); }
.pl-name { font-weight: 700; letter-spacing: .08em; opacity: .75; font-size: 14px; max-inline-size: 90vw; overflow-wrap: anywhere; text-align: center; } /* اسم متجر طويل من غير مسافات مايوسّعش شاشة التحميل */
.pl-grid { display: grid; grid-template-columns: repeat(3, 16px); gap: 7px; }
.pl-grid i { width: 16px; height: 16px; border-radius: 4px; background: var(--grad); animation: plgrid 1.3s ease-in-out infinite; animation-delay: calc(var(--i) * .09s); }
@keyframes plgrid { 0%, 100% { transform: scale(.35); opacity: .35; } 50% { transform: scale(1); opacity: 1; box-shadow: 0 0 16px var(--glow); } }
.pl-pulse { position: relative; width: 84px; height: 84px; display: grid; place-items: center; }
.pl-pulse .core { width: 64px; height: 64px; border-radius: 20px; background: var(--grad); display: grid; place-items: center; color: var(--on-primary); font-weight: 800; font-size: 28px; overflow: hidden; animation: breathe 1.6s ease-in-out infinite; box-shadow: 0 0 40px var(--glow); }
.pl-pulse .core img { width: 100%; height: 100%; object-fit: cover; }
.pl-pulse::before, .pl-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 26px; border: 2px solid var(--accent); animation: plring 1.8s ease-out infinite; }
.pl-pulse::after { animation-delay: .9s; }
@keyframes plring { from { transform: scale(.7); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
.pl-ring { width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 25%, var(--primary), var(--accent)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); animation: spin 1s linear infinite; }

.pl-dots { display: flex; gap: 10px; align-items: center; height: 40px; }
.pl-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--grad); animation: pldots 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * .16s); }
@keyframes pldots { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; box-shadow: 0 0 14px var(--glow); } }
.pl-bars { display: flex; gap: 6px; align-items: center; height: 44px; }
.pl-bars i { width: 6px; height: 100%; border-radius: 3px; background: var(--grad); animation: plbars 1s ease-in-out infinite; animation-delay: calc(var(--i) * .1s); }
@keyframes plbars { 0%, 100% { transform: scaleY(.28); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }

/* glow | orbit | line | scan: وسط شاشة التحميل لوجو المتجر (أو حرفه الأول على مربّع بتدرّج الثيم لو مفيش لوجو) */
.pl-mark { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.pl-mark img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.pl-mark.ini { border-radius: 22px; background: var(--grad); color: var(--on-primary); font-weight: 800; font-size: 30px; }
.pl-glow, .pl-orbit, .pl-scan { position: relative; width: 104px; height: 104px; display: grid; place-items: center; }
.pl-glow::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent 72%); animation: plglow 2s ease-in-out infinite; }
.pl-glow .pl-mark { animation: breathe 2s ease-in-out infinite; }
@keyframes plglow { 0%, 100% { transform: scale(.78); opacity: .45; } 50% { transform: scale(1.12); opacity: 1; } }
.pl-orbit::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.pl-orbit .pl-orb { position: absolute; inset: 0; border-radius: 50%; animation: spin 1.6s linear infinite; }
.pl-orbit .pl-orb::after { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 14px var(--glow); }
.pl-line { display: grid; justify-items: center; gap: 16px; }
.pl-line .pl-bar { inline-size: 132px; block-size: 3px; border-radius: 2px; background: color-mix(in srgb, var(--primary) 22%, transparent) linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat; background-size: 40% 100%; animation: plline 1.3s linear infinite; }
[dir="rtl"] .pl-line .pl-bar { animation-direction: reverse; }
@keyframes plline { from { background-position: -60% 0; } to { background-position: 160% 0; } }
.pl-scan .pl-mark { overflow: hidden; border-radius: 20px; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 40%, transparent); }
.pl-scan .pl-mark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0 38%, color-mix(in srgb, var(--accent) 60%, transparent) 50%, transparent 62% 100%); transform: translateY(-100%); animation: plscan 1.5s ease-in-out infinite; }
@keyframes plscan { from { transform: translateY(-100%); } to { transform: translateY(100%); } }

/* ---- receipt ---- */
@keyframes draw { from { stroke-dasharray: 100; stroke-dashoffset: 100; } to { stroke-dasharray: 100; stroke-dashoffset: 0; } }
@keyframes stamp { 0% { transform: rotate(-14deg) scale(2.6); opacity: 0; } 70% { transform: rotate(-14deg) scale(.92); opacity: 1; } 100% { transform: rotate(-14deg) scale(1); } }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html[data-motion="full"] .receipt-check .ring { animation: draw .7s ease-out both; }
html[data-motion="full"] .receipt-check .tick { animation: draw .45s .55s ease-out both; }
html[data-motion="full"] .receipt-check svg { animation: pop .5s var(--ease) both; }
html[data-motion="full"] .stamp { animation: stamp .5s 1.05s cubic-bezier(.2, 1.4, .4, 1) both; }
html[data-motion="full"] .receipt-lines, html[data-motion="full"] .receipt-keys { animation: rise .55s .9s var(--ease) both; }
@keyframes confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); } }
html[data-motion="full"] .confetti i { animation: confetti 1.4s var(--d, 0s) cubic-bezier(.15, .7, .3, 1) both; }
.confetti i.k1 { background: var(--primary); } .confetti i.k2 { background: var(--accent); } .confetti i.k3 { background: var(--success); } .confetti i.k4 { background: var(--danger); }
html[data-motion="low"] .confetti, html[data-motion="off"] .confetti { display: none; }
html[data-motion="full"] .success-pop { animation: pop .5s var(--ease) both; }
html[data-motion="full"] .state-screen > * { animation: rise .45s var(--ease) both; }
html[data-motion="full"] .state-screen > *:nth-child(2) { animation-delay: .06s; }
html[data-motion="full"] .state-screen > *:nth-child(3) { animation-delay: .12s; }