/* =============================================================
   Picsin Full-Page Loader Overlay  v1.0
   Phase T.12 (2026-05-02) — used during cropper compression
   T.15 will extend this for upload / save-project / edit-load flows.

   API (vanilla JS, no framework):
     window.PicsinLoader.show('Optimising your photo…')
     window.PicsinLoader.hide()
     Reference-counted — show/hide pairs nest safely.

   Theme: Picsin Teal palette (matches global picsin-teal.css)
   ============================================================= */

.picsin-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;            /* above cropper modal (9999) and shadcn dialogs */
    background: rgba(20, 20, 22, 0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 180ms ease-out;
    pointer-events: none;
}
.picsin-loader.is-visible {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.picsin-loader-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 36px 44px;
    min-width: 280px;
    max-width: 380px;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    transform: translateY(8px) scale(0.98);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.picsin-loader.is-visible .picsin-loader-card {
    transform: translateY(0) scale(1);
}

.picsin-loader-spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid rgba(27, 156, 133, 0.18);    /* Picsin Teal @ 18% */
    border-top-color: #1B9C85;                     /* Picsin Teal */
    margin: 0 auto 20px;
    animation: picsin-loader-spin 0.9s linear infinite;
}

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

.picsin-loader-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 6px;
    letter-spacing: 0.005em;
}

.picsin-loader-sub {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    line-height: 1.45;
}

/* Accessibility — respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .picsin-loader,
    .picsin-loader-card { transition: none; }
    .picsin-loader-spinner { animation-duration: 1.6s; }
}