/**
 * Gallery OS — App lifecycle visibility (paint gate + boot + shell loading).
 * Loaded early from index.html; works with gos-paint-gate.js and gos-lifecycle.js.
 */


/* —— Boot overlay base (owned here; index.html keeps login brand-intro only) —— */
#gos-app-boot {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gos-bg, #fff);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Stack any boot children so a future exclusivity race cannot lay panels side-by-side */
#gos-app-boot > [data-gos-boot-lite],
#gos-app-boot > [data-gos-brand-intro],
#gos-app-boot > .gos-brand-intro {
    position: absolute;
    inset: 0;
}

#gos-app-boot [data-gos-brand-intro].is-hidden,
#gos-app-boot .gos-brand-intro.is-hidden,
#gos-app-boot [data-gos-boot-lite].is-hidden,
#gos-app-boot .gos-boot-lite-panel.is-hidden {
    display: none !important;
}

/* Never paint the route overlay on top of / beside the boot mask */
html.gos-boot-lite #page-loading-overlay,
html.gos-app-shell-loading #page-loading-overlay,
html.gos-boot-active #page-loading-overlay,
#gos-app-boot:not(.is-hidden) ~ #page-loading-overlay,
#gos-app-boot.is-fading-out ~ #page-loading-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

html.gos-boot-active #gos-app-boot,
html.gos-boot-lite #gos-app-boot:not(.is-hidden),
html.gos-app-shell-loading #gos-app-boot:not(.is-hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: flex;
}

html.gos-boot-active body.gos-app > :not(#gos-app-boot) {
    visibility: hidden;
}

/* —— Not ready: hide entire app shell until fonts/CSS are ready —— */
html.gos-app-not-ready body.gos-app > :not(#gos-app-boot) {
    visibility: hidden;
}

/* —— Paint ready but app not revealed: shell may paint, content stays masked —— */
html.gos-app-paint-ready:not(.gos-app-ready):not(.gos-boot-active) body.gos-app > :not(#gos-app-boot) {
    visibility: visible;
}

html.gos-app-paint-ready:not(.gos-app-ready):not(.gos-boot-active) #gos-main,
html.gos-app-paint-ready:not(.gos-app-ready):not(.gos-boot-active) #content-area {
    opacity: 0;
    pointer-events: none;
}

/* —— Shell loading (returning users): lite boot overlay —— */
html.gos-app-shell-loading body.gos-app > :not(#gos-app-boot) {
    visibility: hidden;
}

html.gos-app-shell-loading #gos-app-boot:not(.is-hidden),
html.gos-boot-lite #gos-app-boot:not(.is-hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: flex;
}

#gos-app-boot.is-hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Smooth cross-fade on reveal: keep the overlay painted while it fades to 0,
   then it is removed from layout by .is-hidden. */
#gos-app-boot.is-fading-out {
    display: flex !important;
    visibility: visible !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.gos-boot-lite #gos-app-boot [data-gos-boot-lite],
html.gos-app-shell-loading #gos-app-boot [data-gos-boot-lite] {
    display: flex;
}

.gos-boot-lite-panel {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    width: 100%;
    height: 100%;
}

.gos-boot-lite-panel:not(.is-hidden) {
    display: flex;
}

.gos-boot-lite-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    animation: gos-boot-lite-brand-in 480ms ease both;
}

.gos-boot-lite-mark img {
    display: block;
    width: 20px;
    height: 20px;
}

.gos-boot-lite-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--gos-text-primary, #1c1c1a);
    color: var(--gos-bg, #fff);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

html.dark .gos-boot-lite-mark {
    background: #fff;
    color: #1c1c1a;
}

.gos-boot-lite-wordmark {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--gos-text-primary, #1c1c1a);
}

.gos-boot-lite-wordmark-muted {
    color: var(--gos-text-secondary, rgba(28, 28, 26, 0.5));
}

.gos-boot-lite-spinner {
    width: 30px;
    height: 30px;
    border: 2px solid color-mix(in srgb, var(--gos-accent, #1B4DFF) 18%, transparent);
    border-top-color: var(--gos-accent, #1B4DFF);
    border-radius: 50%;
    animation: gos-boot-lite-spin var(--gos-spinner-speed, 0.7s) linear infinite;
}

.gos-boot-lite-label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--gos-text-secondary, rgba(28, 28, 26, 0.62));
}

@keyframes gos-boot-lite-brand-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes gos-boot-lite-spin {
    to { transform: rotate(360deg); }
}

/* —— App fully ready —— */
html.gos-app-ready body.gos-app > * {
    visibility: visible;
}

html.gos-app-ready #gos-main,
html.gos-app-ready #content-area,
html.gos-auth-token-present #gos-main,
html.gos-auth-token-present #content-area {
    opacity: 1;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .gos-boot-lite-spinner {
        animation: none;
        border-top-color: var(--gos-accent, #1B4DFF);
    }

    .gos-boot-lite-brand {
        animation: none;
    }

    #gos-app-boot.is-fading-out {
        transition: none;
    }

    html.gos-app-paint-ready:not(.gos-app-ready):not(.gos-boot-active) #gos-main,
    html.gos-app-paint-ready:not(.gos-app-ready):not(.gos-boot-active) #content-area {
        transition: none;
    }

    html.gos-app-not-ready body.gos-app > :not(#gos-app-boot),
    html.gos-app-shell-loading body.gos-app > :not(#gos-app-boot) {
        transition: none;
    }
}