/* ===============================
PROJECT OREO — EMERGENCY MODE
=============================== */


.emergency-mode {

    position: fixed;
    inset: 0;

    background-image:
    linear-gradient(
        rgba(0,0,0,0.35),
        rgba(0,0,0,0.65)
    ),
    url("https://pub-bf59e4faf5904fc0875492866e65f840.r2.dev/assets/Images/entergalactic-bg.png");

    background-size: cover;
    background-position: center;

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

    z-index:99999;

    overflow:hidden;

}


/* STAR OVERLAY */

.stars {

    position:absolute;
    inset:0;

    background-image:
    radial-gradient(white 1px, transparent 1px);

    background-size:
    40px 40px;

    opacity:.35;

    animation:
    starsMove 20s linear infinite;

}


@keyframes starsMove {

    from {
        transform:translateY(0);
    }

    to {
        transform:translateY(-100px);
    }

}



/* BACK BUTTON */


.emergency-back {

    position:absolute;

    top:25px;
    left:25px;


    padding:
    12px 25px;


    border-radius:50px;


    border:none;


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


    color:white;


    backdrop-filter:blur(10px);


    cursor:pointer;


    font-weight:bold;


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

}



.emergency-back:hover {

    background:#ff69b4;

}



/* PANEL */


.emergency-panel {


    width:90%;

    max-width:450px;


    padding:35px;


    border-radius:30px;


    text-align:center;


    background:
    rgba(0,0,0,.65);


    backdrop-filter:
    blur(15px);


    color:white;


    box-shadow:
    0 0 40px rgba(255,105,180,.5);


}

.emergency-panel h1 {

    color:#ff69b4;

}



/* OPTIONS */


.emergency-options {

    display:flex;

    flex-direction:column;

    gap:15px;

    margin:25px 0;

}



.emergency-option {


    padding:16px;


    border-radius:20px;


    cursor:pointer;


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


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


    transition:.3s;


}



.emergency-option span {

    color:white;

    font-size:16px;

}



.emergency-option input {

    display:none;

}



.emergency-option:hover {

    transform:translateY(-3px);

    background:
    rgba(255,105,180,.35);

}



.emergency-option:has(input:checked) {


    background:#ff69b4;


    box-shadow:
    0 0 20px #ff69b4;


}



/* ENTER BUTTON */


#emergencyEnter {


    padding:
    15px 60px;


    border-radius:50px;


    border:none;


    cursor:pointer;


    background:#ff69b4;


    color:white;


    font-size:18px;


    font-weight:bold;


    box-shadow:
    0 0 20px rgba(255,105,180,.8);


    transition:.3s;


}



#emergencyEnter:hover {

    transform:scale(1.08);

}




.emergency-back {
    z-index: 100000;
    position: absolute;
}
.emergency-hidden {
    display: none;
}
/* ===============================
EMERGENCY MODE STAR FIELD
=============================== */


.emergency-stars {

    position:absolute;

    inset:0;

    pointer-events:none;


    background-image:
        radial-gradient(circle, white 1px, transparent 2px),
        radial-gradient(circle, white 2px, transparent 3px),
        radial-gradient(circle, #ffb6e6 1px, transparent 2px);


    background-size:
        90px 90px,
        150px 150px,
        220px 220px;


    background-position:
        0 0,
        40px 60px,
        100px 120px;


    animation:
        starFlash 3s infinite alternate;


    opacity:.7;

}



@keyframes starFlash {


    0% {

        opacity:.25;

        transform:scale(1);

    }


    50% {

        opacity:.8;

    }


    100% {

        opacity:.35;

        transform:scale(1.03);

    }

}