/* ==========================================================================
   LAUNCH OVERLAY — port of new_css/launch.php onto MAIN
   ==========================================================================
   new_css shows this as a standalone gateway page (/new_css/launch.php),
   which depends on beta_guard.php writing PHP session flags. Touching
   sessions is backend, so on MAIN the same screen is delivered as a
   front-end overlay instead: identical markup, identical visuals,
   identical exit transition, shown once per session.

   Every rule below is scoped to #launchOverlay. portal.css itself is NOT
   loaded on MAIN because it sets body { font-family / background / color }
   unconditionally and would fight beta-theme.css.
   ========================================================================== */

#launchOverlay {
    --gate-orange: #ff6a2a;
    --gate-orange-soft: #ff9b64;
    --gate-blue: #2f8cff;
    --gate-green: #43d99d;
    --gate-gold: #f4c762;
    --gate-muted: #98a4b5;

    position: fixed;
    inset: 0;
    z-index: 100000;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(5, 7, 11, 0.98), rgba(5, 7, 11, 0.82)),
        url('/assets/isle-latam-banner.png') center / cover no-repeat,
        #07090d;
    opacity: 1;
    transition: opacity 0.45s ease, visibility 0.45s ease;
}

#launchOverlay.launch-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Scan grid, matching portal.css */
#launchOverlay::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 36px 36px;
}

#launchOverlay .terminal-stage {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 30px;
}

/* ---- Boot log ---- */
#launchOverlay .terminal-log {
    position: absolute;
    top: 38px;
    left: 42px;
    width: min(560px, calc(100% - 84px));
    padding-left: 14px;
    border-left: 2px solid rgba(47, 140, 255, 0.35);
    color: #6891bd;
    font: 500 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

#launchOverlay .terminal-log p {
    margin: 0 0 5px;
    opacity: 0;
    transform: translateX(-5px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

#launchOverlay .terminal-log p.visible { opacity: 1; transform: none; }
#launchOverlay .terminal-log .ok { color: var(--gate-green); }
#launchOverlay .terminal-log .warn { color: var(--gate-gold); }
#launchOverlay .terminal-log .ready { color: var(--gate-orange-soft); }

/* ---- Core identity ---- */
#launchOverlay .terminal-core {
    position: absolute;
    inset: 50% auto auto 50%;
    width: min(520px, calc(100% - 40px));
    transform: translate(-50%, -40%);
    display: grid;
    justify-items: center;
    text-align: center;
}

#launchOverlay .terminal-core::before,
#launchOverlay .terminal-core::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 150px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(47, 140, 255, 0.36));
}

#launchOverlay .terminal-core::before { right: calc(100% + 26px); }
#launchOverlay .terminal-core::after { left: calc(100% + 26px); transform: rotate(180deg); }

#launchOverlay .terminal-core img {
    width: 84px;
    height: 84px;
    object-fit: contain;
    border: 1px solid rgba(255, 106, 42, 0.4);
    border-radius: 8px;
    filter: drop-shadow(0 0 26px rgba(47, 140, 255, 0.18));
}

#launchOverlay .terminal-core > div:nth-of-type(1) {
    margin-top: 17px;
    display: grid;
    gap: 6px;
}

#launchOverlay .terminal-core strong {
    font-family: "Oxanium", Arial, sans-serif;
    font-size: 27px;
    color: #f4f7fb;
}

#launchOverlay .terminal-core strong span { color: var(--gate-orange); }

#launchOverlay .terminal-core small {
    color: #71a9df;
    font: 600 9px/1 "Oxanium", Arial, sans-serif;
}

#launchOverlay .terminal-loader {
    width: 220px;
    max-width: 60vw;
    height: 3px;
    margin-top: 32px;
    overflow: hidden;
    background: rgba(47, 140, 255, 0.12);
}

#launchOverlay .terminal-loader i {
    display: block;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, var(--gate-blue), var(--gate-orange));
    box-shadow: 0 0 12px rgba(255, 106, 42, 0.44);
    animation: launchLoad 1.2s ease-in-out infinite;
}

@keyframes launchLoad {
    from { transform: translateX(-110%); }
    to { transform: translateX(340%); }
}

#launchOverlay .terminal-core p {
    margin: 13px 0 0;
    color: var(--gate-muted);
    font: 500 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- Corner brackets ---- */
#launchOverlay .terminal-corner {
    position: absolute;
    width: 58px;
    height: 58px;
    opacity: 0.62;
}

#launchOverlay .terminal-corner.top-left { top: 28px; left: 28px; border-top: 1px solid var(--gate-orange); border-left: 1px solid var(--gate-orange); }
#launchOverlay .terminal-corner.top-right { top: 28px; right: 28px; border-top: 1px solid var(--gate-blue); border-right: 1px solid var(--gate-blue); }
#launchOverlay .terminal-corner.bottom-left { bottom: 28px; left: 28px; border-bottom: 1px solid var(--gate-blue); border-left: 1px solid var(--gate-blue); }
#launchOverlay .terminal-corner.bottom-right { bottom: 28px; right: 28px; border-bottom: 1px solid var(--gate-orange); border-right: 1px solid var(--gate-orange); }

/* ---- Failsafe: never let a broken script trap the site behind the
       overlay. CSS clears it on its own after 6s regardless of JS. ---- */
#launchOverlay {
    animation: launchFailsafe 0.45s linear 6s forwards;
}

@keyframes launchFailsafe {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (max-width: 620px) {
    #launchOverlay .terminal-log { top: 24px; left: 22px; width: calc(100% - 44px); font-size: 10px; }
    #launchOverlay .terminal-core { transform: translate(-50%, -12%); }
    #launchOverlay .terminal-core::before,
    #launchOverlay .terminal-core::after { display: none; }
    #launchOverlay .terminal-corner { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    #launchOverlay,
    #launchOverlay *,
    #launchOverlay *::before,
    #launchOverlay *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    #launchOverlay .terminal-log p { opacity: 1; transform: none; }
    /* Keep the failsafe meaningful even with motion reduced. */
    #launchOverlay { animation: launchFailsafe 0.01ms linear 2s forwards !important; }
}