/* ============================================ */
/* Beautiful Loading Overlay                    */
/* ============================================ */

/* Lock page scroll while any overlay is visible */
html:has(.app-loading-overlay.is-visible),
body:has(.app-loading-overlay.is-visible) {
   overflow: hidden;
}

.app-loading-overlay {
   position: fixed;
   inset: 0;
   z-index: 9999;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   justify-content: stretch;
   background: #ffffff;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.35s ease;
   overflow: hidden;
}

/* Inner section fills the whole overlay and centers the card */
.app-loading-overlay > section {
   flex: 1 1 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   min-height: 100%;
}

/* Pattern container fills the overlay (positioned by theme rules) */
.app-loading-overlay > .pattern-square {
   position: absolute;
   inset: 0;
   pointer-events: none;
}

.app-loading-overlay.is-visible {
   opacity: 1;
   pointer-events: auto;
}

/* Inner card grouping the image, spinner and text - floats as a whole */
.app-loading-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1.25rem;
   padding: 2rem 2.5rem;
   text-align: center;
   /*animation: app-float 3s ease-in-out infinite;*/
}

/* Floating cat image */
.app-loading-overlay .app-loading-image {
   width: 13em;
   height: auto;
   max-width: 60vw;
   /*filter: drop-shadow(0 12px 18px rgba(139, 61, 255, 0.18));*/
   /*animation: app-float 3s ease-in-out infinite;*/
   user-select: none;
   pointer-events: none;
}

@keyframes app-float {
   0%, 100% { transform: translateY(0); }
   50%      { transform: translateY(-12px); }
}

/* Spinner sits just under the image */
.app-loading-overlay .app-spinner {
   width: 48px;
   height: 48px;
   position: relative;
}

.app-loading-overlay .app-spinner::before,
.app-loading-overlay .app-spinner::after {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: 50%;
   border: 3px solid transparent;
}

.app-loading-overlay .app-spinner::before {
   border-top-color: #8b3dff;
   border-right-color: #8b3dff;
   animation: app-spin 1.5s linear infinite;
}

.app-loading-overlay .app-spinner::after {
   border: 3px solid rgba(139, 61, 255, 0.15);
}

@keyframes app-spin {
   to { transform: rotate(360deg); }
}

.app-loading-overlay .app-loading-text {
   font-size: 1.05rem;
   font-weight: 500;
   color: #1f1f2e;
   text-align: center;
   max-width: 420px;
   line-height: 1.5;
   margin: 0;
   animation: app-pulse 1.8s ease-in-out infinite;
}

@keyframes app-pulse {
   0%, 100% { opacity: 0.75; }
   50% { opacity: 1; }
}

.app-loading-overlay .app-loading-dots {
   display: inline-flex;
   gap: 4px;
   margin-left: 4px;
   vertical-align: middle;
}

.app-loading-overlay .app-loading-dots span {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: #8b3dff;
   animation: app-dot-bounce 1.4s ease-in-out infinite;
}

.app-loading-overlay .app-loading-dots span:nth-child(2) { animation-delay: 0.16s; }
.app-loading-overlay .app-loading-dots span:nth-child(3) { animation-delay: 0.32s; }

@keyframes app-dot-bounce {
   0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
   40% { transform: scale(1); opacity: 1; }
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
   .app-loading-overlay .app-loading-card,
   .app-loading-overlay .app-loading-text,
   .app-loading-overlay .app-loading-dots span,
   .app-loading-overlay .app-spinner::before {
      animation: none;
   }
}