/* =========================================================
   BERNARD PASSENGER v0.8.8
   MAIN ROOM — IMAGE SPECIFICATION
   ========================================================= */

#bernard {
    position: relative;
    isolation: isolate;
}

/* =========================================================
   INDEPENDENT CIRCUITS
   ========================================================= */

.main-room-circuits {
    position: absolute;
    z-index: 20;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;
    pointer-events: none;
}

.main-circuit-path,
#main-navigation-circle {
    fill: none;
    stroke: #BEBEBA;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricPrecision;
}


.main-circuit-origin-point,
.main-circuit-destination-point {
    fill: #111111;
    stroke: none;
    vector-effect: non-scaling-stroke;
}

.main-circuit-origin-point {
    opacity: 0;
}

.main-circuit-destination-point {
    opacity: 0;
}

.bernard-presence {
    position: relative;
    z-index: 2;
}

.progress-panel {
    position: relative;
    z-index: 21;
}

.main-room-navigation-node {
    position: relative;
    z-index: 22;
}

/* =========================================================
   120 PX NAVIGATION CIRCLE
   ========================================================= */

.main-room-navigation-node {
    width: 390px;
    height: 250px;

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

    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: center;
    column-gap: 30px;

    opacity: 1;
}

.navigation-circle-svg {
    width: 200px;
    height: 200px;

    display: block;
    overflow: visible;

    transform-origin: center;
}

/* =========================================================
   MODULES — 28 PX / 1 PX / 24 PX
   ========================================================= */

#bernard .main-room-navigation-node
.bernard-navigation {
    position: static;
    z-index: auto;

    width: auto;

    margin: 0;

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

    align-self: center;
    justify-self: stretch;

    opacity: 1;
    filter: none;
    transform: none;
}

#bernard .main-room-navigation-node
.main-module-button {
    min-height: 16px;

    padding: 0;

    display: grid;
    grid-template-columns: 28px auto;
    align-items: center;
    gap: 20px;

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

    cursor: pointer;
    text-align: left;

    opacity: 1;
    filter: none;
    transform: none;

    transition: none;
}

#bernard .main-room-navigation-node
.main-module-button[aria-disabled="true"] {
    cursor: default;
}

.main-module-line {
    width: 28px;
    height: 1px;

    display: block;

    background: #BEBEBA;

    transform: scaleX(0);
    transform-origin: left center;
}

.main-module-text {
    display: block;

    opacity: 0;
    filter: blur(1.5px);
    transform: translateX(-2px);

    font-size: 11px;
    font-weight: 300;
    letter-spacing: 4px;
    line-height: 1;
    white-space: nowrap;
}

/*
    Hover specified in the reference:
    only the corresponding short line and text turn #111111.
*/

#bernard .main-room-navigation-node
.main-module-button:hover {
    color: #111111;
}

#bernard .main-room-navigation-node
.main-module-button:hover
.main-module-line {
    background: #111111;
}

/* =========================================================
   DISCREET SIX-SECOND PULSE
   ========================================================= */

.main-room-navigation-node.pulse-active
.navigation-circle-svg {
    animation:
        main-navigation-pulse
        6s
        ease-in-out
        infinite;
}

@keyframes main-navigation-pulse {
    0%,
    88%,
    100% {
        transform: scale(1);
    }

    94% {
        transform: scale(1.03);
    }
}

/* =========================================================
   ORIGINAL TRANSITION COMPATIBILITY
   ========================================================= */

#bernard.foundation-ui-hidden
.main-room-navigation-node,
#bernard.data-ui-hidden
.main-room-navigation-node {
    opacity: 0;
    pointer-events: none;

    transition:
        opacity 1.35s ease-in-out;
}

#bernard:not(.foundation-ui-hidden)
.main-room-navigation-node,
#bernard:not(.data-ui-hidden)
.main-room-navigation-node {
    transition:
        opacity 1.35s ease-in-out;
}

/*
    Existing rules target .bernard-navigation directly.
    Keep the node visible until the circuit exit sequence finishes.
*/

#bernard.main-room-exiting
.main-room-navigation-node {
    pointer-events: none;
}

/* =========================================================
   RESPONSIVE FALLBACK
   ========================================================= */

@media (max-width: 1100px) {
    .main-room-circuits {
        display: none;
    }

    .main-room-navigation-node {
        width: min(100%, 390px);
        height: auto;

        grid-template-columns: 200px 1fr;

        justify-self: center;
        margin-inline: auto;
    }
}

@media (max-width: 700px) {
    .main-room-navigation-node {
        grid-template-columns: 140px 1fr;
        column-gap: 18px;
    }

    .navigation-circle-svg {
        width: 140px;
        height: 140px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-room-navigation-node.pulse-active
    .navigation-circle-svg {
        animation: none;
    }
}


/* =========================================================
   BERNARD v1.0.0 — UPDATED CIRCLE MODULE CONNECTIONS
   ========================================================= */

/* Main Screen elements closer to Bernard. */

@media (min-width: 1101px) {
    #bernard {
        grid-template-columns:
            300px
            minmax(500px, 620px)
            340px;

        justify-content: center;
        gap: 8px;

        padding:
            8px
            18px;
    }

    .progress-panel {
        justify-self: end;
        width: 270px;
    }

    .main-room-navigation-node {
        justify-self: start;
        margin-left: 28px;
    }
}

/* Larger local canvas keeps the three new circuits around the circle. */

.main-room-navigation-node {
    position: relative;

    width: 370px;
    height: 250px;

    display: block;
}

.navigation-circle-svg {
    position: absolute;

    top: 0;
    left: 0;

    width: 250px;
    height: 230px;

    overflow: visible;
}

.circle-module-connector {
    fill: none;
    stroke: #111111;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.circle-module-point {
    fill: #111111;
    stroke: none;

    opacity: 0;
}

/*
    The existing labels remain the real navigation controls,
    but are positioned beside their new persistent points.
*/

#bernard .main-room-navigation-node
.bernard-navigation {
    position: absolute;

    top: 0;
    left: 246px;

    width: 145px;
    height: 230px;

    display: block;
}

#bernard .main-room-navigation-node
.main-module-button {
    position: absolute;
    left: 0;

    display: block;

    min-height: 18px;
}

#bernard .main-room-navigation-node
.main-module-button:nth-child(1) {
    top: 20px;
}

#bernard .main-room-navigation-node
.main-module-button:nth-child(2) {
    top: 101px;
}

#bernard .main-room-navigation-node
.main-module-button:nth-child(3) {
    top: 215px;
}

#bernard .main-room-navigation-node
.main-module-line {
    display: none;
}

#bernard .main-room-navigation-node
.main-module-text {
    display: block;
}

@media (max-width: 1100px) {
    .main-room-navigation-node {
        width: min(100%, 370px);
        height: 250px;
    }

    .navigation-circle-svg {
        width: 250px;
        height: 230px;
    }
}


/* =========================================================
   INITIALIZING GUARD
   ========================================================= */

#bernard:not(.interface-ready)
.main-room-circuits,

#bernard:not(.interface-ready)
.main-room-navigation-node {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#bernard.interface-ready
.main-room-circuits,

#bernard.interface-ready
.main-room-navigation-node {
    visibility: visible;
}


/* =========================================================
   BERNARD v1.0.2 — CIRCUIT VISIBILITY
   ========================================================= */

#bernard.interface-ready
.main-room-circuits {
    opacity: 1;
}

#progress-destination-point {
    fill: #111111;
}



/* =========================================================
   BERNARD v1.0.4 — MAIN GRAPHICS ABOVE HEAD
   ========================================================= */

#bernard .bernard-presence,
#bernard .bernard-head,
#bernard .head-image {
    z-index: 2;
}

#bernard .main-room-circuits {
    z-index: 20 !important;
}

#bernard .main-room-navigation-node {
    z-index: 22 !important;
}

#bernard .circle-module-connector,
#bernard .circle-module-point,
#bernard .main-circuit-path,
#bernard .main-circuit-origin-point,
#bernard .main-circuit-destination-point {
    position: relative;
    z-index: 23;
}


/* =========================================================
   BERNARD v1.5.5 — MAIN MODULE ORDER + BALANCED TYPOGRAPHY
   SUBLIME occupies the upper connector, DATA the middle one.
   ========================================================= */
#bernard .main-room-navigation-node #sublime-button {
    top: 20px;
}

#bernard .main-room-navigation-node #data-button {
    top: 101px;
}

#bernard .main-room-navigation-node #foundation-button {
    top: 215px;
}

#bernard .main-room-navigation-node .main-module-text {
    font-size: 12px;
    line-height: 1;
    letter-spacing: 5px;
    font-weight: 400;
}