/* ============================================================
   بصماتي — Motion utilities
   transform/opacity only · GPU-friendly · RTL-safe (uses
   translateY/scale, no left/right keyframe offsets so it mirrors).
   Append after the tokens block in BOTH index.html & admin.html.
   ============================================================ */

/* ---------- keyframes ---------- */
@keyframes bs-fade-up   {from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none}}
@keyframes bs-fade-in   {from{opacity:0} to{opacity:1}}
@keyframes bs-scale-in  {from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)}}
@keyframes bs-pop       {0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1}}
@keyframes bs-ring-pulse{0%,100%{filter:drop-shadow(0 0 0 rgba(63,111,230,0))} 50%{filter:drop-shadow(0 0 6px rgba(63,111,230,.45))}}
@keyframes bs-spin      {to{transform:rotate(360deg)}}
@keyframes bs-shimmer   {0%{background-position:200% 0} 100%{background-position:-200% 0}}
@keyframes bs-shake     {0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)}}
@keyframes bs-glow      {0%,100%{box-shadow:0 0 0 0 rgba(63,111,230,0)} 50%{box-shadow:0 0 0 6px rgba(63,111,230,.14)}}

/* ---------- entrance utilities ---------- */
.anim-up    {animation:bs-fade-up   var(--t) var(--ease) both}
.anim-in    {animation:bs-fade-in   var(--t) var(--ease) both}
.anim-scale {animation:bs-scale-in  var(--t) var(--ease-snap) both}
.anim-pop   {animation:bs-pop       var(--t) var(--ease-snap) both}
/* stagger children: add .stagger to a container */
.stagger>*  {animation:bs-fade-up var(--t) var(--ease) both}
.stagger>*:nth-child(1){animation-delay:.04s}
.stagger>*:nth-child(2){animation-delay:.10s}
.stagger>*:nth-child(3){animation-delay:.16s}
.stagger>*:nth-child(4){animation-delay:.22s}
.stagger>*:nth-child(5){animation-delay:.28s}
.stagger>*:nth-child(6){animation-delay:.34s}

/* cards entering on load — applies alongside existing .card */
.card{animation:bs-fade-up var(--t) var(--ease) both}

/* ---------- hover / lift (pointer devices only) ---------- */
@media (hover:hover){
  .lift{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
  .lift:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
  .chip:hover,.tbtn:hover,.pbtn:hover,.iconedit:hover{transform:translateY(-2px)}
}

/* ---------- button / cell press (touch-friendly) ---------- */
.btn,.btn-primary,.btn-ghost,.chip,.tbtn,.pbtn,.cell,.iconedit{
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.btn:active,.btn-primary:active,.btn-ghost:active,.chip:active,
.tbtn:active,.pbtn:active,.iconedit:active{transform:scale(.95)}

/* calendar/fingerprint cell pop when it becomes ص/م */
.cell:active{transform:scale(.9)}
.cell.s-ص,.cell.s-م{animation:bs-pop var(--t-fast) var(--ease-snap)}

/* selected chip / type button gets a soft brand glow */
.chip.sel,.tbtn.sel-m,.tbtn.sel-n,.pbtn.psel{animation:bs-glow var(--t-slow) var(--ease)}

/* ---------- status ring pulse (the score/total ring) ---------- *
 * add class .ring-live to the element wrapping the progress ring  *
 * so it breathes while incomplete; remove it when total==12.     */
.ring-live{animation:bs-ring-pulse 2.4s var(--ease) infinite}

/* ---------- modal entrance ---------- */
.modal{transition:opacity var(--t) var(--ease)}
.modal>*,.modal .sheet,.modal .mbox{animation:bs-scale-in var(--t) var(--ease-snap) both}

/* ---------- invalid field nudge ---------- */
.field input.invalid,.field select.invalid{animation:bs-shake .4s var(--ease)}

/* ---------- skeleton / loading shimmer ---------- */
.skeleton{background:linear-gradient(90deg,var(--line) 25%,var(--card-2) 37%,var(--line) 63%);
  background-size:200% 100%;animation:bs-shimmer 1.3s linear infinite;border-radius:var(--r-sm)}
.spin{animation:bs-spin .8s linear infinite}

/* ---------- hero subtle live sheen ---------- */
.hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.10) 50%,transparent 70%);
  background-size:250% 100%;animation:bs-shimmer 6s linear infinite;pointer-events:none}

/* ---------- accessibility: honor reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}