/* =========================================================
   VAERO ENGINE — MODAL SYSTEM
   COMPACT VIEWPORT-NATIVE MODAL
   FINAL CONSOLIDATED EDITION
========================================================= */


/* =========================================================
   01. MODAL TOKENS
========================================================= */

.vaero-modal{
    --modal-text:
        var(
            --text,
            #f5f1e9
        );

    --modal-muted:
        var(
            --muted,
            rgba(245,241,233,.6)
        );

    --modal-gold:
        var(
            --gold-soft,
            #f2e2bb
        );

    --modal-border:
        rgba(255,255,255,.075);

    --modal-border-strong:
        rgba(223,189,122,.24);

    --modal-ease:
        cubic-bezier(.22,.78,.2,1);
}


/* =========================================================
   02. OVERLAY
========================================================= */

.vaero-modal{
    position:fixed;

    inset:0;

    z-index:2000;

    display:none;

    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    padding:14px;

    overflow:hidden;

    overscroll-behavior:none;

    background:
        rgba(0,3,8,.7);

    backdrop-filter:
        blur(16px)
        saturate(108%);

    -webkit-backdrop-filter:
        blur(16px)
        saturate(108%);

    isolation:isolate;
}


/* =========================================================
   03. OPEN STATE
========================================================= */

.vaero-modal.show{
    display:flex;
}


/* =========================================================
   04. OVERLAY AMBIENT
========================================================= */

.vaero-modal::before{
    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(75,145,198,.045),
            transparent 34%
        );
}


/* =========================================================
   05. MODAL CARD
========================================================= */

.modal-card{
    position:relative;

    width:
        min(
            380px,
            calc(
                100vw - 28px
            )
        );

    max-width:100%;

    max-height:
        calc(
            100dvh - 28px
        );

    min-width:0;
    min-height:0;

    padding:18px;

    overflow-x:hidden;
    overflow-y:auto;

    overscroll-behavior-y:contain;

    border:
        1px solid
        var(--modal-border);

    border-radius:20px;

    background:
        radial-gradient(
            circle at 84% 0%,
            rgba(78,140,190,.075),
            transparent 35%
        ),

        radial-gradient(
            circle at 12% 100%,
            rgba(223,189,122,.025),
            transparent 30%
        ),

        linear-gradient(
            160deg,
            rgba(16,27,40,.985),
            rgba(7,17,29,.99)
        );

    box-shadow:
        0
        24px
        64px
        rgba(0,0,0,.42),

        inset
        0
        1px
        0
        rgba(255,255,255,.025);

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;

    animation:
        vaeroModalEnter
        .2s
        var(--modal-ease);
}

.modal-card::-webkit-scrollbar{
    display:none;
}


/* =========================================================
   06. CARD HIGHLIGHT
========================================================= */

.modal-card::before{
    content:"";

    position:absolute;

    top:0;
    left:16%;

    width:68%;
    height:1px;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.08),
            transparent
        );
}


/* =========================================================
   07. ENTER ANIMATION
========================================================= */

@keyframes vaeroModalEnter{

    from{
        opacity:0;

        transform:
            translateY(8px)
            scale(.985);
    }

    to{
        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* =========================================================
   08. CONTENT
========================================================= */

.modal-card h2{
    margin:
        0
        0
        7px;

    color:
        var(--modal-text);

    font-size:21px;
    font-weight:520;

    line-height:1.08;

    letter-spacing:-.025em;
}

.modal-card p{
    margin:0;

    color:
        var(--modal-muted);

    font-size:10px;

    line-height:1.5;
}


/* =========================================================
   09. CONTENT SAFETY
========================================================= */

.modal-card h2,
.modal-card p,
.modal-card span,
.modal-card strong,
.modal-card small{
    overflow-wrap:anywhere;
}


/* =========================================================
   10. CLOSE / PRIMARY ACTION
========================================================= */

.modal-close{
    width:100%;

    min-height:38px;

    margin-top:14px;

    border-radius:12px;

    transition:
        transform .18s
        var(--modal-ease),

        border-color .18s ease,

        background .18s ease,

        color .18s ease;
}

.modal-close:active{
    transform:
        scale(.985);
}

.modal-close:focus-visible{
    outline:
        1px solid
        rgba(223,189,122,.48);

    outline-offset:2px;
}


/* =========================================================
   11. OPTIONAL INLINE CLOSE BUTTON
========================================================= */

.modal-card
.modal-icon-close{
    position:absolute;

    top:12px;
    right:12px;

    display:grid;

    place-items:center;

    width:30px;
    height:30px;

    padding:0;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:50%;

    background:
        rgba(255,255,255,.025);

    color:
        rgba(255,255,255,.58);

    font:inherit;

    font-size:15px;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        transform .18s
        var(--modal-ease);
}

.modal-card
.modal-icon-close:hover{
    border-color:
        var(--modal-border-strong);

    background:
        rgba(223,189,122,.05);

    color:
        var(--modal-gold);
}

.modal-card
.modal-icon-close:active{
    transform:
        scale(.94);
}


/* =========================================================
   12. MOBILE
========================================================= */

@media (max-width:600px){

    .vaero-modal{
        align-items:flex-end;

        padding:
            max(
                8px,
                env(
                    safe-area-inset-top,
                    0px
                )
            )
            8px
            max(
                8px,
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );
    }

    .modal-card{
        width:
            min(
                100%,
                calc(
                    100vw - 16px
                )
            );

        max-height:
            calc(
                100dvh -
                16px -
                env(
                    safe-area-inset-top,
                    0px
                ) -
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );

        padding:14px;

        border-radius:
            18px
            18px
            14px
            14px;

        transform-origin:center bottom;
    }

    .modal-card h2{
        margin-bottom:5px;

        font-size:17px;
    }

    .modal-card p{
        font-size:9px;

        line-height:1.42;
    }

    .modal-close{
        min-height:34px;

        margin-top:10px;
    }

}


/* =========================================================
   13. SMALL PHONE
========================================================= */

@media (max-width:390px){

    .vaero-modal{
        padding-left:5px;
        padding-right:5px;
    }

    .modal-card{
        width:
            calc(
                100vw - 10px
            );

        padding:12px;

        border-radius:
            16px
            16px
            13px
            13px;
    }

    .modal-card h2{
        font-size:16px;
    }

}


/* =========================================================
   14. SHORT VIEWPORT
========================================================= */

@media (max-height:620px){

    .vaero-modal{
        align-items:center;
    }

    .modal-card{
        max-height:
            calc(
                100dvh - 12px
            );

        padding-top:11px;
        padding-bottom:11px;
    }

    .modal-card h2{
        font-size:16px;
    }

    .modal-card p{
        line-height:1.35;
    }

    .modal-close{
        margin-top:8px;
    }

}


/* =========================================================
   15. LANDSCAPE MOBILE
========================================================= */

@media
(
    orientation:landscape
)
and
(
    max-height:520px
){

    .vaero-modal{
        align-items:center;

        padding:
            6px
            max(
                6px,
                env(
                    safe-area-inset-right,
                    0px
                )
            )
            6px
            max(
                6px,
                env(
                    safe-area-inset-left,
                    0px
                )
            );
    }

    .modal-card{
        width:
            min(
                420px,
                calc(
                    100vw - 12px
                )
            );

        max-height:
            calc(
                100dvh - 12px
            );

        padding:12px;
    }

}


/* =========================================================
   16. TOUCH DEVICES
========================================================= */

@media (hover:none){

    .modal-card
    .modal-icon-close:hover{
        border-color:
            rgba(255,255,255,.07);

        background:
            rgba(255,255,255,.025);

        color:
            rgba(255,255,255,.58);
    }

}


/* =========================================================
   17. HIGH CONTRAST
========================================================= */

@media (prefers-contrast:more){

    .modal-card{
        border-color:
            rgba(255,255,255,.15);
    }

    .modal-card p{
        color:
            rgba(245,241,233,.74);
    }

}


/* =========================================================
   18. REDUCED MOTION
========================================================= */

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

    .modal-card{
        animation:none;
    }

    .modal-close,
    .modal-icon-close{
        transition:none;
    }

}


/* =========================================================
   19. IOS VIEWPORT STABILITY
========================================================= */

@supports (-webkit-touch-callout:none){

    .modal-card{
        max-height:
            calc(
                100% -
                16px
            );
    }

}


/* =========================================================
   20. FINAL OVERFLOW AUTHORITY
========================================================= */

.vaero-modal{
    overflow:hidden;
}

.modal-card{
    overflow-x:hidden;
    overflow-y:auto;
}


/* =========================================================
   END — VAERO ENGINE MODAL SYSTEM
========================================================= */