/* =========================================================
   ESTRUTURA DA CABEÇA
   ========================================================= */

.bernard-head {
    position: relative;

    width: 98vh;
    height: 98vh;

    min-width: 720px;
    min-height: 720px;

    flex-shrink: 0;

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

    overflow: visible;

    background: transparent;

    cursor: default;

    /*
        A cabeça começa invisível.

        Ela será revelada somente quando
        BernardInterface adicionar:

        head-stage-visible
    */

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 1.2s
        cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        ),

        visibility 0s linear 1.2s;
}

/* =========================================================
   REGIÃO CENTRAL
   ========================================================= */

.bernard-presence {
    position: relative;

    filter: none !important;
    transform: none !important;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 1.2s
        cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        ),

        visibility 0s linear 1.2s;
}

/*
    PRIMEIRO ESTÁGIO:

    somente a região da cabeça é revelada.
*/

#bernard.head-stage-visible
.bernard-presence {
    opacity: 1 !important;
    visibility: visible !important;

    transition:
        opacity 1.2s
        cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        ),

        visibility 0s linear 0s;
}

#bernard.head-stage-visible
.bernard-head {
    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: none;

    transition:
        opacity 1.2s
        cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        ),

        visibility 0s linear 0s;
}

/*
    A interação com o mouse só é liberada
    quando toda a interface estiver pronta.
*/

#bernard.interface-ready
.bernard-presence {
    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto;
}

#bernard.interface-ready
.bernard-head {
    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto;
}

/* =========================================================
   IMAGENS DA CABEÇA
   ========================================================= */

.head-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: center;

    background: #ffffff;

    user-select: none;
    pointer-events: none;

    backface-visibility: hidden;

    transform:
        translateZ(0);

    transform-origin:
        center center;

    filter: none !important;

    will-change:
        opacity;

    -webkit-user-drag: none;
}

/* =========================================================
   FORM ATUAL
   ========================================================= */

.head-current {
    z-index: 1;

    opacity: 0;
    visibility: visible;

    /*
        Precisa acompanhar:

        firstFormFadeDuration = 2100

        no head.js.
    */

    transition:
        opacity 1.35s
        cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        );
}

.head-current.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* =========================================================
   PRÓXIMA FORM
   ========================================================= */

.head-preview {
    z-index: 2;

    opacity: 0;
    visibility: hidden;

    /*
        Precisa acompanhar:

        formTransitionDuration = 1700

        no head.js.
    */

    transition:
        opacity 1.05s
        cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        ),

        visibility 0s linear 1.05s;
}

.head-preview.visible {
    opacity: 1 !important;
    visibility: visible !important;

    transition:
        opacity 1.05s
        cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        ),

        visibility 0s linear 0s;
}

/* =========================================================
   SEQUÊNCIA AUTOMÁTICA
   ========================================================= */

.bernard-head.entrance-playing {
    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: none;
}

#bernard.head-stage-visible
.bernard-head.entrance-playing {
    opacity: 1 !important;
    visibility: visible !important;
}





/*
    As duas camadas usam aceleração gráfica
    para reduzir cintilações durante as trocas.
*/

.bernard-head.entrance-playing
.head-current,

.bernard-head.entrance-playing
.head-preview {
    backface-visibility: hidden;

    transform:
        translateZ(0);
}

/* =========================================================
   ESTADO SEM PRÓXIMA FORM
   ========================================================= */

.bernard-head.preview-locked {
    cursor: default;
}

/* =========================================================
   CONTEÚDO EXTERNO DA INTERFACE
   ========================================================= */

/*
    Enquanto a sequência da cabeça acontece,
    painel, card e DATA permanecem invisíveis.
*/

#bernard
.progress-panel,

#bernard
.daily-card,

#bernard
.data-entry-button {
    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(7px);

    transition:
        opacity 1.8s
        cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        ),

        transform 1.8s
        cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        ),

        visibility 0s linear 1.8s;
}

/*
    SEGUNDO ESTÁGIO:

    depois das Forms 1–8, o restante aparece.
*/

#bernard.interface-content-visible
.progress-panel,

#bernard.interface-content-visible
.daily-card,

#bernard.interface-content-visible
.data-entry-button {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0);

    transition:
        opacity 1.8s
        cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        ),

        transform 1.8s
        cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        ),

        visibility 0s linear 0s;
}

/* =========================================================
   ORDEM DO CONTEÚDO
   ========================================================= */

#bernard.interface-content-visible
.progress-panel {
    transition-delay:
        0s;
}

#bernard.interface-content-visible
.data-entry-button {
    transition-delay:
        0.2s;
}

#bernard.interface-content-visible
.daily-card {
    transition-delay:
        0.38s;
}

/* =========================================================
   COMPATIBILIDADE COM DATA
   ========================================================= */

#bernard.data-ui-hidden
.progress-panel,

#bernard.data-ui-hidden
.daily-card,

#bernard.data-ui-hidden
.data-entry-button {
    pointer-events: none;
}

#bernard.data-head-hidden
.bernard-presence {
    opacity: 0 !important;

    pointer-events: none;
}

/*
    Quando retorna de DATA, a cabeça continua
    visível antes do restante da interface.
*/

#bernard.interface-ready:not(
    .data-head-hidden
)
.bernard-presence,

#bernard.interface-ready:not(
    .data-head-hidden
)
.bernard-head {
    opacity: 1 !important;
    visibility: visible !important;
}



/* =========================================================
   SEQUÊNCIA DA CABEÇA
   ========================================================= */

/*
    A opacidade das Forms 1–8 durante a abertura é
    controlada diretamente pelo head.js. Não aplicamos
    blur, brilho ou contraste às imagens ou ao contêiner.
*/

.bernard-head.entrance-playing,
.bernard-head.entrance-playing .head-image {
    filter: none !important;
}

/* =========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {
    .bernard-head,
    .bernard-presence,
    .head-current,
    .head-preview,
    #bernard
    .progress-panel,
    #bernard
    .daily-card,
    #bernard
    .data-entry-button {
        transition-duration:
            0.01ms !important;

        transition-delay:
            0ms !important;
    }
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 1100px) {
    .bernard-head {
        width: 94vw;
        height: 94vw;

        min-width: 0;
        min-height: 0;

        max-width: 94vh;
        max-height: 94vh;
    }
}

@media (max-width: 700px) {
    .bernard-head {
        width: 96vw;
        height: 96vw;

        min-width: 0;
        min-height: 0;

        max-width: 90vh;
        max-height: 90vh;
    }

    #bernard
    .progress-panel,

    #bernard
    .daily-card,

    #bernard
    .data-entry-button {
        transform:
            translateY(4px);
    }

    #bernard.interface-content-visible
    .progress-panel,

    #bernard.interface-content-visible
    .daily-card,

    #bernard.interface-content-visible
    .data-entry-button {
        transform:
            translateY(0);
    }
}

/* =========================================================
   CORREÇÃO DEFINITIVA DA ABERTURA
   ========================================================= */

#bernard .bernard-presence,
#bernard .bernard-head,
#bernard .head-image {
    filter: none !important;
}

.bernard-head.entrance-playing .head-current.visible,
.bernard-head.entrance-playing .head-preview.visible {
    visibility: visible !important;
}


/* =========================================================
   INITIALIZING — MÁSCARA DETALHADA DAS FORMS 1–7
   ========================================================= */

/*
    Esta máscara substitui o processamento por canvas.

    A imagem continua em sua resolução original, sem
    conversão para data URL e sem perda de detalhes.

    A máscara mantém:
    - crânio;
    - orelhas;
    - mandíbula;
    - pescoço.

    O restante do canvas da PNG fica transparente,
    deixando apenas o branco puro da página.
*/

.bernard-head.entrance-playing
.head-image.developing-form {
    -webkit-mask-image:
        radial-gradient(
            ellipse 39% 47% at 50% 39%,
            #000 0%,
            #000 84%,
            rgba(0, 0, 0, 0.92) 89%,
            rgba(0, 0, 0, 0.48) 95%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            transparent 57%,
            #000 66%,
            #000 100%
        );

    mask-image:
        radial-gradient(
            ellipse 39% 47% at 50% 39%,
            #000 0%,
            #000 84%,
            rgba(0, 0, 0, 0.92) 89%,
            rgba(0, 0, 0, 0.48) 95%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            transparent 57%,
            #000 66%,
            #000 100%
        );

    -webkit-mask-composite:
        source-over;

    mask-composite:
        add;

    -webkit-mask-repeat:
        no-repeat;

    mask-repeat:
        no-repeat;

    -webkit-mask-size:
        100% 100%;

    mask-size:
        100% 100%;

    /*
        O pequeno scale leva a borda causada pelo
        blur para fora da área útil sem mudar o
        alinhamento perceptível entre as Forms.
    */

    transform:
        translateZ(0)
        scale(1.012);

    transform-origin:
        center center;
}

/*
    Form 8, Form atual e hover não recebem máscara.
*/

.bernard-head
.head-image:not(.developing-form) {
    -webkit-mask-image:
        none;

    mask-image:
        none;

    transform:
        translateZ(0);
}