/* «لودینگ استاندارد پنل آژانس عکس» — the panel's one waiting state
   (تسک ۱۴۰۵/۰۶/۱۱/۰۲، بند ۱ تا ۱۷).

   One stylesheet for the whole panel, and no page named in any of it (بند ۳):
   what is drawn is decided by whether the panel is waiting, never by which
   management is open.

   Everything here is the agency's own (بند ۸ و ۹). The card, its colours, the
   words, the mark and its motion are the ones «مدیریت عکس‌ها» has drawn since
   تسک ۱۴۰۵/۰۶/۰۸/۱۶, which is the panel's single correct sample; this only
   gives them to every page. Nothing came from the reference panel. */

/* ── The in-page mark: any wait a page makes of the server ─────────────────── */

/* Hidden until Livewire says otherwise — `wire:loading.delay.flex` writes the
   `display: flex` that turns it on, and takes it away again when the request
   settles however it settles (حالت ششم). */
.fi-panel-loading {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 40;
    align-items: center;
    justify-content: center;
    /* بند ۱۲ — a statement about the page, never a lock on it. */
    pointer-events: none;
}

/* بند ۱۴ — while a window is open, the page beneath it is not what anybody is
   waiting for. The inline `display: flex` is Livewire's, so this has to outrank
   it. */
.fi-panel-loading.fi-panel-loading-stood-down {
    display: none !important;
}

/* ── The between-pages mark: the wait a page cannot see ────────────────────── */

/*
 * بند ۶ و ۷ و ۱۰ — from the click that starts a navigation until the next page
 * can really be looked at, the panel says so. Two classes on the document
 * element rather than one: `fi-panel-navigating` is the page being left,
 * `fi-panel-arriving` is the page being arrived at, and they belong to two
 * different documents.
 *
 * `fi-panel-arriving` is written into the markup by the server, before any
 * script runs, which is the whole point of it: بند ۷ forbids «صفحه سیاه یا
 * خالی», and a state that only begins once JavaScript has loaded begins after
 * the moment it is meant to cover.
 */
.fi-panel-navigation-mark {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background-color: color-mix(in oklab, var(--std-color-gray-900, #111827) 55%, transparent);
    opacity: 0;
    transition: opacity 120ms ease-out;
}

.fi-panel-navigating .fi-panel-navigation-mark,
.fi-panel-arriving .fi-panel-navigation-mark {
    display: flex;
    opacity: 1;
}

/* ── The card, the mark and the words — the agency's own ───────────────────── */

.fi-panel-loading .fi-photo-loading-card,
.fi-panel-navigation-mark .fi-photo-loading-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background-color: color-mix(in oklab, var(--std-color-gray-900, #111827) 85%, transparent);
    color: var(--std-color-white, #ffffff);
}

.fi-panel-loading .fi-photo-loading-mark,
.fi-panel-navigation-mark .fi-photo-loading-mark {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
    animation: fi-panel-loading-breath 1.4s ease-in-out infinite;
}

.fi-panel-loading .fi-photo-loading-text,
.fi-panel-navigation-mark .fi-photo-loading-text {
    font-size: 0.95rem;
}

@keyframes fi-panel-loading-breath {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.45;
        transform: scale(0.88);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-panel-loading .fi-photo-loading-mark,
    .fi-panel-navigation-mark .fi-photo-loading-mark {
        animation: none;
    }
}