/* ============================================================
   motion.css — Hema la Maarifa
   Presentation only. Nothing here changes behaviour: no layout
   reflow, no element is hidden from assistive tech, and every
   effect is disabled under prefers-reduced-motion at the bottom.
   ============================================================ */

/* ── Reusable keyframes ─────────────────────────────────────── */
@keyframes hemaFadeUp   { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
@keyframes hemaFadeIn   { from { opacity:0; }                              to { opacity:1; } }
@keyframes hemaScaleIn  { from { opacity:0; transform: scale(.96) translateY(8px); } to { opacity:1; transform:none; } }
@keyframes hemaPop      { 0% { transform: scale(.85); opacity:0 } 60% { transform: scale(1.04) } 100% { transform: scale(1); opacity:1 } }
@keyframes hemaShimmer  { 0% { background-position:-460px 0 } 100% { background-position:460px 0 } }
@keyframes hemaToastIn  { from { opacity:0; transform: translateY(14px) scale(.97) } to { opacity:1; transform:none } }
@keyframes hemaToastOut { to   { opacity:0; transform: translateY(8px) scale(.98) } }
@keyframes hemaRing     { 0% { box-shadow:0 0 0 0 rgba(245,200,66,.55) } 100% { box-shadow:0 0 0 14px rgba(245,200,66,0) } }

/* ── Page + card entrances ──────────────────────────────────────
   .reveal is added by motion.js as elements scroll into view, so
   content that is already on screen animates once and the rest
   animates when reached. */
.reveal { opacity:0; }

/* opacity:1 is stated explicitly, not left to the animation's fill mode.
   If the animation never runs — element inside a display:none panel, a
   closed tab, animations disabled — the element must still end up
   visible. The animation is the flourish; this is the guarantee. */
.reveal.is-in {
  opacity: 1;
  animation: hemaFadeUp .5s cubic-bezier(.16,.84,.44,1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}

/* ── Cards ──────────────────────────────────────────────────── */
.card, .stat-card {
  transition: transform .22s cubic-bezier(.16,.84,.44,1), box-shadow .22s ease;
}
.card:hover, .stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15,23,42,.10);
}

/* ── Buttons: lift on hover, settle on press ────────────────── */
.btn {
  transition: transform .16s cubic-bezier(.16,.84,.44,1), box-shadow .16s ease, filter .16s ease;
}
.btn:hover:not(:disabled)  { transform: translateY(-1.5px); box-shadow: 0 6px 16px rgba(15,23,42,.14); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.985); box-shadow:none; }
.btn:disabled              { transform:none !important; }

/* Draw the eye to the primary action the first time it appears. */
.btn-accent.pulse-once { animation: hemaRing 1.4s ease-out 2; }

/* ── Modals ─────────────────────────────────────────────────── */
.modal-overlay {
  animation: hemaFadeIn .2s ease both;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.modal-overlay > .modal-box,
.modal-box { animation: hemaScaleIn .3s cubic-bezier(.16,.84,.44,1) both; }

/* Applied by motion.js just before a modal is hidden. */
.modal-overlay.is-closing { animation: hemaToastOut .18s ease both; }

/* ── Table rows ─────────────────────────────────────────────── */
tbody tr { transition: background-color .15s ease; }
tbody tr:hover { background: rgba(245,200,66,.07); }

/* ── Toasts (replaces bare alert dialogs) ───────────────────── */
#hema-toasts {
  position: fixed; z-index: 4000;
  right: 18px; bottom: 18px;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(380px, calc(100vw - 36px));
  pointer-events: none;
}
.hema-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e2e0d8);
  border-left: 4px solid var(--info, #1a6eb5);
  border-radius: 12px;
  padding: 13px 14px;
  box-shadow: 0 12px 32px rgba(15,23,42,.16);
  font-size: 14px; line-height: 1.5; color: var(--text, #1a1a1a);
  animation: hemaToastIn .32s cubic-bezier(.16,.84,.44,1) both;
}
.hema-toast.out      { animation: hemaToastOut .22s ease both; }
.hema-toast .ht-ico  { flex: 0 0 auto; margin-top: 1px; }
.hema-toast .ht-msg  { flex: 1 1 auto; word-break: break-word; }
.hema-toast .ht-x    {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  color: var(--muted, #7a7a72); font-size: 17px; line-height: 1;
  padding: 0 2px; border-radius: 5px;
}
.hema-toast .ht-x:hover { color: var(--text, #1a1a1a); background: rgba(0,0,0,.05); }

.hema-toast.t-success { border-left-color: var(--success, #2d7a4f); }
.hema-toast.t-error   { border-left-color: var(--danger,  #e05a3a); }
.hema-toast.t-warning { border-left-color: var(--warning, #c47f00); }
.hema-toast.t-info    { border-left-color: var(--info,    #1a6eb5); }
.hema-toast.t-success .ht-ico { color: var(--success, #2d7a4f); }
.hema-toast.t-error   .ht-ico { color: var(--danger,  #e05a3a); }
.hema-toast.t-warning .ht-ico { color: var(--warning, #c47f00); }
.hema-toast.t-info    .ht-ico { color: var(--info,    #1a6eb5); }

@media (max-width: 560px) {
  #hema-toasts { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* ── Skeleton shimmer (for slow panels) ─────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #eceae4 25%, #f6f5f1 37%, #eceae4 63%);
  background-size: 920px 100%;
  animation: hemaShimmer 1.3s linear infinite;
  border-radius: 8px; color: transparent !important;
}

/* ── Count-up numbers land with a small pop ─────────────────── */
.counted { animation: hemaPop .42s cubic-bezier(.16,.84,.44,1) both; }

/* ── Respect the user's motion preference ───────────────────────
   Everything above degrades to plain, instant UI. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal.is-in { opacity: 1 !important; animation: none !important; }
  .card:hover, .stat-card:hover, .btn:hover:not(:disabled) { transform: none; }
  .skeleton { animation: none; }
}