/* ==========================================================================
   VAYA — animations.css
   الحركات والانتقالات  /  Motion, transitions & the splash screen
   القاعدة: 150ms – 400ms، مع احترام تفضيل تقليل الحركة.
   ========================================================================== */

/* --------------------------------------------------------- 1. Page enter */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pageOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-6px); }
}

/* ----------------------------------------------------- 2. Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; will-change: auto; }
/* تدرّج بسيط للعناصر المتتابعة */
.reveal[data-d="1"] { transition-delay: 60ms; }
.reveal[data-d="2"] { transition-delay: 120ms; }
.reveal[data-d="3"] { transition-delay: 180ms; }

/* ------------------------------------------------------------ 3. Toasts */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateY(8px) scale(.96); }
}

/* --------------------------------------------------------- 4. Skeletons */
@keyframes shimmer {
  100% { transform: translateX(100%); }
}
html[dir="rtl"] .sk::after { animation-name: shimmerRtl; }
@keyframes shimmerRtl {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* ------------------------------------------------------------- 5. Forms */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* -------------------------------------------------- 6. Micro-interactions */
@keyframes heartPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.32); }
  70%  { transform: scale(.92); }
  100% { transform: scale(1); }
}
.is-popping { animation: heartPop 380ms var(--ease-out); }

@keyframes cartBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}
.badge-count.is-bump { animation: cartBump 380ms var(--ease-out); }

@keyframes flyDot {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to   { opacity: 0; transform: translate(var(--fx, 0), var(--fy, -120px)) scale(.3); }
}
.fly-dot {
  position: fixed; z-index: 130;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink);
  pointer-events: none;
  animation: flyDot 520ms var(--ease-out) forwards;
}

/* ------------------------------------------------------ 7. Hero shimmer */
@keyframes plateShine {
  0%, 62%  { transform: translateX(-60%) skewX(-18deg); }
  100%     { transform: translateX(320%) skewX(-18deg); }
}
.plate::after { animation: plateShine 4.6s var(--ease) infinite; }

@keyframes caretBlink { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }
.plate__caret { animation: caretBlink 1s steps(1) infinite; }

/* ------------------------------------------------------ 8. Success mark */
@keyframes markIn {
  0%   { transform: scale(.5); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes checkDraw { to { stroke-dashoffset: 0; } }
.done__mark { animation: markIn 520ms var(--ease-out) both; }
.done__mark path {
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: checkDraw 420ms var(--ease-out) 300ms forwards;
}

@keyframes ripple {
  from { opacity: .45; transform: scale(.8); }
  to   { opacity: 0;   transform: scale(2.1); }
}
.done__ring {
  position: absolute; inset: 0; border-radius: inherit;
  border: 1px solid var(--ink);
  animation: ripple 1.8s var(--ease-out) 420ms infinite;
}

/* ========================================================================
   9. شاشة البداية / Splash screen
   ملاحظة: نسخة مختصرة من هذه القواعد مضمّنة داخل index.html
   لتظهر فوراً قبل تحميل ملفات CSS.
   ======================================================================== */
.splash {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--bg, #F6F4F1);
  transition: opacity 380ms var(--ease-out), visibility 380ms;
}
.splash.is-done { opacity: 0; visibility: hidden; }

.splash__in { position: relative; display: grid; place-items: center; gap: 26px; }

.splash__logo {
  width: 148px; height: auto;
  animation: splashLogo 900ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes splashLogo {
  0%   { opacity: 0; transform: scale(.94) translateY(6px); letter-spacing: 0; }
  100% { opacity: 1; transform: none; }
}

.splash__bar {
  width: 46px; height: 2px; border-radius: 2px;
  background: rgba(35, 31, 38, .12);
  overflow: hidden;
  animation: splashFadeIn 500ms 220ms both;
}
.splash__bar::after {
  content: ''; display: block; height: 100%; width: 40%;
  border-radius: 2px; background: var(--ink, #231F26);
  animation: splashBar 1.05s var(--ease) infinite;
}
@keyframes splashBar {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(280%); }
}
@keyframes splashFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* توهج خفيف خلف الشعار */
.splash__glow {
  position: absolute; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,188,166,.28), transparent 68%);
  animation: splashGlow 1.4s var(--ease-out) both;
  pointer-events: none;
}
@keyframes splashGlow {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* ------------------------------------------------- 10. Sheet & overlays */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn var(--t) var(--ease) both; }

/* دخول متتابع لبطاقات النتائج */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.card-in { animation: cardIn 340ms var(--ease-out) both; }

/* ================================================= 11. Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .plate::after, .plate__caret { animation: none; }
  .done__ring { display: none; }
}