#entrance.initial-sequence {
    animation: initial-light 4.5s ease-in-out forwards;
}

@keyframes initial-light {
    0%,
    44% {
        background-color: var(--pure-black);
    }

    100% {
        background-color: var(--warm-white);
    }
}

/* Desenho do botão da entrada. */

#remember-button.drawing .border-top {
    animation: draw-horizontal 0.9s linear forwards;
}

#remember-button.drawing .border-right {
    animation: draw-vertical 0.65s linear 0.9s forwards;
}

#remember-button.drawing .border-bottom {
    animation: draw-horizontal 0.9s linear 1.55s forwards;
}

#remember-button.drawing .border-left {
    animation: draw-vertical 0.65s linear 2.45s forwards;
}

@keyframes draw-horizontal {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes draw-vertical {
    from {
        height: 0;
    }

    to {
        height: 100%;
    }
}

#remember-button.hide-border .button-border {
    opacity: 0;
}

#remember-button.disappearing {
    opacity: 0;
    transform: scale(0.98);
}

/* Estruturas da interface principal. */

.progress-panel,
.bernard-navigation {
    opacity: 0;
    filter: blur(6px);
    transform: scale(0.985);

    transition:
        opacity 1.4s ease,
        filter 1.4s ease,
        transform 1.4s ease;
}

#bernard.structure-visible .progress-panel,
#bernard.structure-visible .bernard-navigation {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

/*
    Cada palavra permanece inteira.
    As letras continuam sendo animadas separadamente.
*/

.bernard-word {
    display: inline-block;
    white-space: nowrap;
}

.bernard-space {
    display: inline-block;
    width: 0.38em;
}

.bernard-letter {
    display: inline-block;

    opacity: 0;
    filter: blur(6px);

    transition:
        opacity 0.9s ease,
        filter 0.9s ease;
}

.bernard-letter.visible {
    opacity: 1;
    filter: blur(0);
}

/* =========================================================
   CABEÇA — SEM FILTRO NO CONTÊINER
   ========================================================= */

.bernard-presence,
#bernard.head-stage-visible .bernard-presence,
#bernard.structure-visible .bernard-presence,
#bernard.interface-ready .bernard-presence {
    filter: none !important;
    transform: none !important;
}