/* © 2025 iPrime | UiCoreLayers.css — App layer structure and z-index stacking */
/* 
   deps: TokensFixed.css (z-index, spacing tokens)
   provides: .cosmic-canvas, .app-shell, .prime-container
   
   Layer Stack:
   - .cosmic-canvas: z-below (-1) — Fixed background canvas
   - .app-shell: z-base (0) — Main app wrapper
   - .prime-container: Inherits from .app-shell — Content area
*/

/* =============================================================================
   COSMIC CANVAS — Layer 0 (behind everything)
   ============================================================================= */

.cosmic-canvas {
    position: fixed;
    inset: 0;
    inline-size: 100vw;
    block-size: 100vh;
    z-index: var(--token-z-below);
    pointer-events: none;
    
    /* Premium fade-in: Start invisible, reveal when stars are ready */
    opacity: 0;
    will-change: opacity;
    transition: opacity var(--token-duration-2000) var(--token-ease-smooth-out);
    
    /* Revealed state — triggered by JS when worker signals first frame ready */
    &.is-revealed {
        opacity: 1;
    }
}

/* =============================================================================
   APP SHELL — Layer 1 (above canvas)
   ============================================================================= */

.app-shell {
    position: relative;
    z-index: var(--token-z-base);
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
}

/* =============================================================================
   PRIME CONTAINER — Main content area
   ============================================================================= */

.prime-container {
    flex: 1;
    inline-size: 100%;
    max-inline-size: var(--token-max-width-1400);
    margin-inline: auto;
    padding: var(--token-padding-fluid-24-40);
}

/* =============================================================================
   END OF LAYER STYLES
   ============================================================================= */