/*
================================================

Space Vanta Theme 1.0

Module:
Featured Functions

File:
public/header/featured-functions/viewport.css

Version:
FEATURED-FUNCTIONS-VIEWPORT-005

Purpose:
Viewport-level Featured Function Layer

Architecture:
- Independent from Header
- Closed state never intercepts pointer events
- Open state owns viewport interaction
- Global layer provides atmospheric separation only
- Vision owns its own spatial structure

Does NOT control:
- Vision transition
- Vision geometry
- Function-specific content

================================================
*/


/* =================================================
   Featured Viewport
   ================================================= */

.sv-featured-viewport {
    position: fixed;
    inset: 0;

    z-index: 900;

    width: 100vw;
    height: 100vh;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    overflow: hidden;

    transition:
        opacity .42s ease,
        visibility 0s linear .42s;
}


.sv-featured-viewport[data-featured-state="open"] {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;

    transition:
        opacity .42s ease,
        visibility 0s linear 0s;
}


/* =================================================
   Global Spatial Backdrop

   Purpose:
   Separate the normal page from the
   floating Vision space without hiding it.

   This layer should remain:
   - bright
   - transparent
   - moderately blurred
   - visually weaker than Vision Ladder
   ================================================= */

.sv-featured-viewport__backdrop {
    position: absolute;
    inset: 0;

    z-index: 1;

    width: 100%;
    height: 100%;

    pointer-events: auto;

    background:
        linear-gradient(180deg,
            rgba(245, 248, 251, .10),
            rgba(221, 228, 236, .07));

    backdrop-filter:
        blur(14px) saturate(1.04) brightness(1.04);

    -webkit-backdrop-filter:
        blur(14px) saturate(1.04) brightness(1.04);
}


.sv-featured-viewport .sv-featured-panel {
    position: absolute;
    inset: 0;

    z-index: 2;

    width: 100%;
    height: 100%;

    transform: none;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}


.sv-featured-viewport .sv-featured-panel> :not(.sv-featured-panel__close) {
    position: relative;

    z-index: 2;
}

/* =================================================
   Reduced Motion
   ================================================= */

@media (prefers-reduced-motion: reduce) {

    .sv-featured-viewport {
        transition: none;
    }

}