#background-video {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
    filter: blur(22px);
}

#background-video.error {
    filter: blur(22px) hue-rotate(130deg);
    transition: filter 0.4s ease-in;
}

main {
    position: relative;
    z-index: 1;
}

#background-video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    background: rgba(0, 0, 0, 1);
    transition: background 1.5s ease;
}

main.background-video-loaded #background-video-overlay {
    background: rgba(0, 0, 0, 0);
}

@keyframes login-box-reveal-center-out {
    from { clip-path: inset(0 50% 0 50% round 18px); }
    to   { clip-path: inset(0 0 0 0 round 18px); }
}

@keyframes login-box-contents-show {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes login-box-fade-out {
    from {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(8vh);
    }
}

#login-box {
    position: absolute;
    display: flex;
    align-items: center;
    flex-direction: column;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid rgba(210, 210, 210, 0.5);
    border-radius: 18px;
    backdrop-filter: blur(8px);
    clip-path: inset(0 100% 0 0 round 18px);
    -webkit-clip-path: inset(0 100% 0 0 round 18px);
    will-change: clip-path;
}

#login-box.fade-out {
    clip-path: unset;
    -webkit-clip-path: unset;
    will-change: opacity, transform;
    animation: login-box-fade-out 0.4s ease forwards;
    pointer-events: none;
}

main.background-video-loaded #login-box.fade-out {
    will-change: opacity, transform;
    clip-path: unset;
    -webkit-clip-path: unset;
    animation: login-box-fade-out 0.4s ease forwards;
    pointer-events: none;
}

#login-box-contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.5rem, 2vh, 1.5rem);
    padding: clamp(1rem, 3vh, 2rem);
    inline-size: clamp(14rem, 42vw, 23rem);
    text-align: center;
    max-inline-size: 92vw;
    opacity: 0;
}

main.background-video-loaded #login-box {
    animation: login-box-reveal-center-out 400ms ease 350ms forwards;
}

main.background-video-loaded #login-box #login-box-contents {
    will-change: opacity;
    animation: login-box-contents-show 800ms ease 700ms forwards;
}

#login-box label {
    display: block;
    color: #ffffff;
    font-weight: 500;
    text-shadow: 0 0 6px #fff8dc55;
    letter-spacing: 0.1vw;
    font-size: clamp(0.95rem, 3.5vw, 1.5rem);
    margin: 0;
}

#login-box input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    min-block-size: clamp(2.1rem, 3.6vh, 2.6rem);
    padding: 0.45rem 0.65rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Share Tech Mono', monospace;
    outline: none;
    box-shadow: 0 0 6px #ffd70022;
    transition: border 0.2s, box-shadow 0.2s;
}

#login-box.error input[type="text"] {
    border: 2px solid rgba(255, 53, 53, 0.83);
}

#login-box.error input[type="text"]::placeholder {
    color: rgba(255, 30, 30, 0.4);
    transition: color 0.2s;
}

#login-box input[type="text"]:focus::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

#login-box input[type="text"]:focus {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 12px rgba(255, 247, 213, 0.27);
}

#login-box button {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    cursor: pointer;
    text-shadow: 0 0 4px #fff8dc88;
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
}

#login-box button:hover {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 20px rgba(255, 249, 215, 0.53);
}