/* Bernard 5.3 — simplified entrance and reliable next-level animation */

#entrance #entrance-message {
    display: none !important;
}

#entrance .entrance-brand {
    position: absolute !important;
    top: calc(50% - 38px) !important;
    left: 50% !important;
    right: auto !important;
    width: auto !important;
    min-width: 210px !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
}

#entrance #remember-button {
    position: absolute !important;
    top: calc(50% + 42px) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
}

#entrance #remember-button.disappearing {
    transform: translate(-50%, -50%) scale(.985) !important;
}

@media (max-width: 700px) {
    #entrance .entrance-brand {
        top: calc(50% - 36px) !important;
    }

    #entrance #remember-button {
        top: calc(50% + 40px) !important;
    }
}

#bernard #level-bar .level-segment.next-level {
    animation-name: bernard-next-level-full-pulse !important;
    animation-duration: 2s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;
    will-change: opacity, background-color, box-shadow, filter !important;
}

@keyframes bernard-next-level-full-pulse {
    0%, 100% {
        opacity: .04;
        height: 2px;
        background: rgba(45,45,45,.12);
        box-shadow: none;
        filter: brightness(.05);
    }

    50% {
        opacity: 1;
        height: 4px;
        background: #fff;
        box-shadow:
            0 0 9px #fff,
            0 0 22px rgba(255,255,255,1),
            0 0 40px rgba(255,255,255,.95),
            0 0 64px rgba(255,255,255,.72);
        filter: brightness(2.2);
    }
}