/* =========================================================
   FOUNDATION ENTRY — INTERFACE PRINCIPAL
   ========================================================= */

.bernard-navigation {
    position: relative;
    z-index: 3;

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

    align-self: center;
    justify-self: start;
}

.bernard-navigation-button {
    padding: 10px 0;

    border: 0;
    background: transparent;
    color: #8f8f8f;

    font-size: 13px;
    font-weight: 300;
    letter-spacing: 4px;
    text-align: left;

    cursor: pointer;

    opacity: 0;
    filter: blur(6px);
    transform: scale(0.985);

    transition:
        opacity 1.4s ease,
        filter 1.4s ease,
        transform 1.4s ease,
        color 0.35s ease,
        letter-spacing 0.35s ease;
}

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

.bernard-navigation-button:hover,
.bernard-navigation-button:focus-visible {
    color: var(--black);
    letter-spacing: 5px;
}

/* =========================================================
   FOUNDATION SCREEN
   ========================================================= */

#foundation-screen {
    position: fixed;
    z-index: 850;
    inset: 0;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    background: #ffffff;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.9s ease-in-out,
        visibility 0s linear 0.9s;
}

#foundation-screen.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition:
        opacity 0.9s ease-in-out,
        visibility 0s linear 0s;
}

.foundation-header {
    position: absolute;
    z-index: 2;

    top: 26px;
    left: 30px;
    right: 30px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.foundation-text-button {
    justify-self: start;

    padding: 8px 4px;

    border: 0;
    background: transparent;
    color: var(--black);

    font-size: 10px;
    font-weight: 300;
    letter-spacing: 4px;

    cursor: pointer;

    transition:
        letter-spacing 0.4s ease,
        opacity 0.4s ease;
}

.foundation-text-button:hover {
    letter-spacing: 5px;
}

.foundation-system-title {
    grid-column: 2;

    margin: 0;

    color: var(--dark-gray);

    font-size: 10px;
    font-weight: 300;
    letter-spacing: 5px;
}

.foundation-workspace {
    width: 100%;
    height: 100%;

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

    padding: 88px 28px 36px;
}

#foundation-screen .daily-card {
    justify-self: auto;

    opacity: 0;
    filter: blur(5px);
    transform: translateY(8px) scale(0.99);

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

#foundation-screen.visible .daily-card {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
}

/* Bernard desaparece enquanto Foundation está aberta. */

#bernard.foundation-ui-hidden
.progress-panel,
#bernard.foundation-ui-hidden
.bernard-navigation,
#bernard.foundation-ui-hidden
.data-entry-button {
    opacity: 0 !important;
    pointer-events: none;

    transition:
        opacity 0.65s ease-in-out !important;
}

#bernard.foundation-head-hidden
.bernard-presence {
    opacity: 0 !important;
    pointer-events: none;

    transition:
        opacity 0.85s ease-in-out !important;
}

@media (max-width: 1100px) {
    .bernard-navigation {
        justify-self: center;
    }

    .foundation-workspace {
        min-height: 100vh;
    }
}

@media (max-width: 700px) {
    #foundation-screen {
        overflow-y: auto;
    }

    .foundation-header {
        top: 16px;
        left: 16px;
        right: 16px;

        grid-template-columns: 1fr auto;
    }

    .foundation-system-title {
        grid-column: 2;
    }

    .foundation-workspace {
        height: auto;
        min-height: 100vh;

        padding: 86px 18px 28px;
    }

    #foundation-screen .daily-card {
        width: min(100%, 280px) !important;
        min-width: 0 !important;
    }
}

/* =========================================================
   FOUNDATION AMBIENT BACKGROUND — THREE IMAGE CYCLE
   ========================================================= */

.foundation-ambient-background {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    background: #ffffff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 2.2s ease-in-out, visibility 0s linear 2.2s;
}

#foundation-screen.visible .foundation-ambient-background {
    opacity: 0.92;
    visibility: visible;
    transition: opacity 2.2s ease-in-out, visibility 0s linear 0s;
}

.foundation-ambient-background .ambient-background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    user-select: none;
    pointer-events: none;
    transform: scale(1.012);
    animation-duration: 21s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.foundation-ambient-background .ambient-background-image-a {
    z-index: 1;
    opacity: 1;
    animation-name: foundation-background-image-a;
}

.foundation-ambient-background .ambient-background-image-b {
    z-index: 2;
    opacity: 0;
    animation-name: foundation-background-image-b;
}

.foundation-ambient-background .ambient-background-image-c {
    z-index: 3;
    opacity: 0;
    animation-name: foundation-background-image-c;
}

@keyframes foundation-background-image-a {
    0%, 28% { opacity: 1; transform: scale(1.012); }
    33%, 94% { opacity: 0; transform: scale(1.022); }
    100% { opacity: 1; transform: scale(1.012); }
}

@keyframes foundation-background-image-b {
    0%, 28% { opacity: 0; transform: scale(1.022); }
    33%, 61% { opacity: 1; transform: scale(1.012); }
    66%, 100% { opacity: 0; transform: scale(1.022); }
}

@keyframes foundation-background-image-c {
    0%, 61% { opacity: 0; transform: scale(1.022); }
    66%, 94% { opacity: 1; transform: scale(1.012); }
    100% { opacity: 0; transform: scale(1.022); }
}

#foundation-screen .foundation-header,
#foundation-screen .foundation-workspace {
    position: relative;
    z-index: 2;
}

/* =========================================================
   BERNARD v1.5.2 — SLOW CONTINUOUS THREE-IMAGE CROSSFADE
   Each transition lasts approximately four seconds.
   Images overlap directly; the background never fades to white.
   ========================================================= */


.foundation-ambient-background .ambient-background-image {
    animation-duration: 24s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    will-change: opacity, transform;
}

.foundation-ambient-background .ambient-background-image-a {
    animation-name: foundation-background-slow-a;
}

.foundation-ambient-background .ambient-background-image-b {
    animation-name: foundation-background-slow-b;
}

.foundation-ambient-background .ambient-background-image-c {
    animation-name: foundation-background-slow-c;
}

@keyframes foundation-background-slow-a {
    0%, 16.666% { opacity: 1; transform: scale(1.012); }
    33.333%, 83.333% { opacity: 0; transform: scale(1.022); }
    100% { opacity: 1; transform: scale(1.012); }
}

@keyframes foundation-background-slow-b {
    0%, 16.666% { opacity: 0; transform: scale(1.022); }
    33.333%, 50% { opacity: 1; transform: scale(1.012); }
    66.666%, 100% { opacity: 0; transform: scale(1.022); }
}

@keyframes foundation-background-slow-c {
    0%, 50% { opacity: 0; transform: scale(1.022); }
    66.666%, 83.333% { opacity: 1; transform: scale(1.012); }
    100% { opacity: 0; transform: scale(1.022); }
}

/* v1.5.2 — FOUNDATION frosted selection card and top controls. */
.foundation-text-button,
.foundation-system-title {
    width: max-content;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.24);
    box-shadow: 0 8px 28px rgba(17, 17, 17, 0.06);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.foundation-system-title {
    padding-inline: 22px;
}

.foundation-text-button:hover,
.foundation-text-button:focus-visible {
    background: rgba(255, 255, 255, 0.50);
    border-color: rgba(255, 255, 255, 0.66);
}

#foundation-screen .daily-card {
    background: rgba(255, 255, 255, 0.62) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 24px 70px rgba(17, 17, 17, 0.13) !important;
    -webkit-backdrop-filter: blur(22px) saturate(115%);
    backdrop-filter: blur(22px) saturate(115%);
}

.foundation-header {
    pointer-events: none;
}

.foundation-header .foundation-text-button,
.foundation-header .foundation-system-title {
    pointer-events: auto;
}

/* =========================================================
   BERNARD v1.5.3 — TRUE SHARP CROSSFADE + FULL BACK CARD HITBOX
   ========================================================= */

#foundation-screen.visible .foundation-ambient-background {
    opacity: 1;
}

.foundation-ambient-background .ambient-background-image {
    animation-duration: 33s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    transform: none !important;
    filter: none !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

@keyframes foundation-background-slow-a {
    0%, 16.666% { opacity: 1; }
    33.333%, 83.333% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes foundation-background-slow-b {
    0%, 16.666% { opacity: 0; }
    33.333%, 50% { opacity: 1; }
    66.666%, 100% { opacity: 0; }
}

@keyframes foundation-background-slow-c {
    0%, 50% { opacity: 0; }
    66.666%, 83.333% { opacity: 1; }
    100% { opacity: 0; }
}

#foundation-screen .foundation-header {
    z-index: 20;
}

#foundation-back-button {
    position: relative;
    z-index: 21;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    box-sizing: border-box;
    pointer-events: auto !important;
    touch-action: manipulation;
}

/* BERNARD v1.5.4 — backgrounds are controlled by the opaque JS crossfade. */
.foundation-ambient-background {
    background: transparent;
    opacity: 1;
}

#foundation-screen.visible .foundation-ambient-background {
    opacity: 1;
}

.foundation-ambient-background .ambient-background-image {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 0;
    transition: none;
}

/* =========================================================
   BERNARD v1.5.5 — BRIGHT LABELS + REFINED FROSTED CARD
   ========================================================= */
#foundation-screen .foundation-text-button,
#foundation-screen .foundation-system-title {
    color: #ffffff !important;
    text-shadow:
        0 0 7px rgba(255, 255, 255, 0.95),
        0 0 16px rgba(255, 255, 255, 0.48);
    font-weight: 500;
}

#foundation-screen .daily-card {
    border-radius: 26px !important;
    border: 1px solid rgba(255, 255, 255, 0.70) !important;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.68),
            rgba(255, 255, 255, 0.42)
        ) !important;
    box-shadow:
        0 28px 80px rgba(17, 17, 17, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 -1px 0 rgba(255, 255, 255, 0.28) !important;
    -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
    backdrop-filter: blur(28px) saturate(125%) !important;
    overflow: hidden;
}

#foundation-screen .daily-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.34),
        rgba(255, 255, 255, 0.04) 45%,
        rgba(255, 255, 255, 0.18)
    );
    pointer-events: none;
}

/* v1.7.2 — FOUNDATION title follows the exact center axis of the daily card. */
.foundation-header {
    display: block;
}

.foundation-system-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    text-align: center;
}

@media (max-width: 700px) {
    .foundation-header { display: block; }
    .foundation-system-title {
        left: 50%;
        width: min(280px, calc(100vw - 36px));
    }
}


/* Bernard 2.1 — Passenger-defined Foundation */
.foundation-setup{position:fixed;z-index:15000;inset:0;display:grid;place-items:center;background:rgba(255,255,255,.72);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);opacity:0;transition:opacity .55s ease}.foundation-setup:not([hidden]){opacity:1}.foundation-setup-card{width:min(520px,calc(100vw - 38px));padding:42px 44px;border:1px solid rgba(15,15,15,.12);background:rgba(255,255,255,.58);box-shadow:0 24px 80px rgba(0,0,0,.08);text-align:center}.foundation-setup-kicker{font-size:8px;letter-spacing:3px}.foundation-setup-card h2{margin:20px 0 10px;font-size:24px;font-weight:300;letter-spacing:2px}.foundation-setup-copy{font-size:9px;letter-spacing:1.4px;color:#777}.foundation-goal-fields{display:grid;gap:10px;margin:30px 0 20px}.foundation-goal-row{display:grid;grid-template-columns:26px 1fr 72px;gap:10px;align-items:center}.foundation-goal-row span{font-size:8px;letter-spacing:1.5px}.foundation-goal-row input{height:42px;border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.5);padding:0 13px;font:inherit;font-size:10px;letter-spacing:1px;outline:none}.foundation-setup-total{margin:18px 0;font-size:9px;letter-spacing:2px}.foundation-setup-card button{height:46px;padding:0 24px;border:1px solid rgba(0,0,0,.25);background:transparent;font-size:8px;letter-spacing:2.2px;cursor:pointer}.foundation-setup-error{margin-top:15px;color:#8a3b32;font-size:8px;letter-spacing:1px}.foundation-needs-setup .daily-card{filter:blur(6px);opacity:.25;pointer-events:none}