/* ================================================================
   AUTH MODAL PERFORMANCE FIX 2026-04-17 (Hang on login click)
   Goals:
     1) Remove heavy backdrop-filter blur from #auth-modal background.
        backdrop-filter + many animated children = compositor stalls
        on mid-range laptops (the exact symptom: 'الموقع يعلق').
     2) Hide all background animated particles while modal is open.
     3) Promote modal to its own compositing layer for instant paint.
     4) Disable heavy outer shadows / animations on the modal card.
   Loaded LAST so it overrides previous css.
   ================================================================ */
#auth-modal {
  /* Drop the blur entirely — it's the #1 perf killer when hundreds
     of twinkling children are behind it. A solid darker background
     reads just as well. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(8, 4, 24, 0.88) !important;
  /* Own layer = avoid re-paint of the whole page behind us. */
  will-change: opacity;
  contain: layout paint style;
}

/* While modal open, nuke everything that paints continuously. */
body.modal-open #bg-animation,
body.modal-open #ramadan-decorations,
body.modal-open #global-mosque,
body.modal-open .loading-orbit-particle,
body.modal-open .ramadan-particle,
body.modal-open .falling-star,
body.modal-open .ramadan-lantern,
body.modal-open .cursor-particle,
body.modal-open .cursor-star {
  animation-play-state: paused !important;
  visibility: hidden !important;
}

/* Keep the golden ring + dot but hide the soft trail while modal
   is open so user input feels snappier and target is obvious. */
body.modal-open #cursor-trail {
  display: none !important;
}

/* Lighten the scale-in animation — 0.3s is too slow with so many
   siblings repainting. Reduce to a fast opacity-only fade. */
#auth-modal .glass-card-strong.animate-scale-in {
  animation: authCardFadeIn 0.15s ease-out !important;
  will-change: opacity;
  /* Ensure no expensive shadows animate */
  transition: none !important;
}
@keyframes authCardFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hard stop: while body has .modal-open class, no child of
   bg-animation or ramadan-decorations can spawn new DOM nodes —
   but just in case they do, keep them invisible. */
body.modal-open #bg-animation *,
body.modal-open #ramadan-decorations *,
body.modal-open #global-mosque * {
  animation: none !important;
  transition: none !important;
  visibility: hidden !important;
}