#loginContent{
    opacity:0;
    visibility:hidden;
    transition:all 1s ease;
}

#loginContent.show{
    opacity:1;
    visibility:visible;
}

.main-wrapper{
    transform:translateY(40px);
    opacity:0;
    transition:all 1s ease;
}

#loginContent.show .main-wrapper{
    transform:translateY(0);
    opacity:1;
}

#splashScreen{
    position:fixed;
    inset:0;
    z-index:100000;
    background:#FEF7EF;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.splash-logo{
    width:120px;
    animation:pulse 1.5s infinite;
}

@keyframes pulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.05);}
    100%{transform:scale(1);}
}

#introVideoContainer{

    position:fixed;
    inset:0;

    z-index:99999;

    background:
        url("assets/login-bg.svg")
        center center / cover
        no-repeat;

    overflow:hidden;
}

#introVideo{

    width:100%;
    height:100%;

    object-fit:cover;

    display:none;
}

/* Overlay */

#enterTempleOverlay{

    position:absolute;
    inset:0;

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

        background: linear-gradient(rgb(254 247 239 / 0%), rgba(254, 247, 239, .82));
    backdrop-filter: blur(1px);

    text-align:center;

    z-index:5;
}

.enter-logo{

    width:170px;

    margin-bottom:30px;
}

#enterTempleOverlay h2{

    color:#B5122B;

    font-size:42px;

    font-weight:700;

    margin-bottom:10px;
}

#enterTempleOverlay p{

    color:#555;

    font-size:20px;

    margin-bottom:35px;
}

.enter-logo{

    width:170px;

    margin-bottom:30px;
}

#enterTempleBtn{

    border:none;

    background:#B5122B;

    color:#fff;

    padding:15px 42px;

    border-radius:50px;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

    animation:pulseButton 2s infinite;
}

@keyframes pulseButton{

    0%{
        box-shadow:0 0 0 0 rgba(181,18,43,.6);
    }

    70%{
        box-shadow:0 0 0 18px rgba(181,18,43,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(181,18,43,0);
    }
}

#enterTempleBtn:hover{

    background:#8d0d22;

    transform:scale(1.05);
}

#enterTempleBtn i{

    margin-right:8px;
}

.login-switch-link{

    color:#b71c1c;

    font-size:14px;

    font-weight:500;

    text-decoration:none;

    cursor:pointer;

}

.login-switch-link:hover{

    color:#8b0000;

    text-decoration:underline;

}

.mpin-box {
    width: 55px;
    height: 55px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    border-radius: 10px;
}

.mpin-box:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.15rem rgba(13,110,253,.25);
}