/* Bernard 2.1.6 — Zen Mode */
.zen-screen{position:fixed;inset:0;z-index:120;display:block;min-height:100vh;overflow:hidden;background:#080504;color:#ffd28a;opacity:0;transition:opacity .72s ease}
.zen-screen.visible{opacity:1}.zen-screen[hidden]{display:none}
.zen-ambient{position:absolute;inset:0;z-index:2;background:radial-gradient(circle at 50% 45%,transparent 0,rgba(8,4,2,.06) 55%,rgba(5,3,2,.52) 100%),linear-gradient(115deg,rgba(255,154,54,.035),transparent 40%,rgba(255,111,19,.035));pointer-events:none}
.zen-header{position:absolute;inset:0 0 auto;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:14px 34px 0;text-shadow:0 0 12px rgba(255,165,64,.75);pointer-events:none}
.zen-back,.zen-now-playing{pointer-events:auto}
.zen-back,.zen-controls button{border:1px solid rgba(255,190,105,.55);border-radius:999px;background:rgba(20,10,5,.34);color:#ffd28a;letter-spacing:3px;box-shadow:0 0 13px rgba(255,144,42,.12),inset 0 0 9px rgba(255,180,80,.06);cursor:pointer}
.zen-back{justify-self:start;padding:9px 18px;font-size:9px}.zen-title-block{text-align:center}.zen-title-block h1{margin:0;font-size:30px;font-weight:300;letter-spacing:12px}.zen-title-block p{margin:8px 0 0;font-size:9px;letter-spacing:6px}
.zen-now-playing{justify-self:end;width:160px;padding:11px 14px;border:1px solid rgba(255,188,98,.18);border-radius:14px;background:rgba(20,10,5,.32);box-shadow:0 0 18px rgba(255,137,37,.08)}.zen-now-playing span{display:block;font-size:7px;letter-spacing:3px}.zen-now-playing strong{display:block;margin-top:7px;font-size:12px;font-weight:400;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zen-visualizer{height:16px;margin-top:7px;display:flex;align-items:center;justify-content:center;gap:3px}.zen-visualizer i{width:2px;height:4px;background:#ffc66d;box-shadow:0 0 6px #ff9b36;animation:zen-wave 1.4s ease-in-out infinite;animation-play-state:paused}.zen-screen.playing .zen-visualizer i{animation-play-state:running}.zen-visualizer i:nth-child(2n){animation-delay:-.25s}.zen-visualizer i:nth-child(3n){animation-delay:-.55s}
.zen-stage{position:absolute;inset:0;z-index:0}.zen-room-visual,.zen-room-layer,.zen-room-noise,.zen-room-scan{position:absolute;inset:0}.zen-room-visual{overflow:hidden;background:#080504}.zen-room-layer{z-index:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:1;transform:none;filter:saturate(.9) contrast(1.04) brightness(.78);visibility:hidden;clip-path:inset(0 100% 0 0);will-change:clip-path}.zen-room-layer.is-active{z-index:1;visibility:visible;clip-path:inset(0 0 0 0)}.zen-room-layer.is-entering{z-index:2;visibility:visible;animation:zen-image-reveal 1.35s cubic-bezier(.55,.08,.34,1) both}.zen-room-layer[data-zen-bg="0"]{background-image:url('../assets/images/zen/zen-room-01.png')}.zen-room-layer[data-zen-bg="1"]{background-image:url('../assets/images/zen/zen-room-02.png')}.zen-room-layer[data-zen-bg="2"]{background-image:url('../assets/images/zen/zen-room-03.png')}
.zen-room-noise{z-index:3;opacity:.07;mix-blend-mode:screen;pointer-events:none;background-image:repeating-radial-gradient(circle at 15% 35%,rgba(255,190,110,.12) 0 1px,transparent 1px 6px);animation:zen-noise-shift 1.1s steps(2,end) infinite}.zen-room-scan{z-index:3;pointer-events:none;background:linear-gradient(to bottom,transparent 0,rgba(255,205,135,.035) 48%,transparent 51%);background-size:100% 9px;opacity:.16}
.zen-player{position:absolute;z-index:6;left:50%;bottom:18px;width:min(600px,76vw);transform:translateX(-50%);padding:8px 15px 9px;border:1px solid rgba(255,190,105,.18);border-radius:999px;background:rgba(14,7,4,.42);box-shadow:0 0 20px rgba(255,126,27,.08);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.zen-controls{display:flex;justify-content:center;gap:8px}.zen-controls button{width:32px;height:25px;font-size:10px}.zen-controls .zen-play{width:43px}.zen-timeline{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;gap:8px;margin-top:6px;font-size:7px;letter-spacing:1px}.zen-timeline input{height:2px;accent-color:#ffc36c}
.zen-alive{animation:zen-living-light 21s steps(1,end) infinite}.zen-title-block h1,.zen-title-block p,.zen-now-playing span,.zen-now-playing strong,.zen-back,.zen-controls button,.zen-timeline span{animation:zen-text-failure 27s steps(1,end) infinite}.zen-title-block p{animation-delay:-5s}.zen-now-playing{animation-delay:-9s}.zen-player{animation-delay:-13s}.zen-controls button:nth-child(2){animation-delay:-7s}
@keyframes zen-wave{0%,100%{height:4px;opacity:.55}50%{height:15px;opacity:1}}
@keyframes zen-image-reveal{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes zen-living-light{0%,31%,32.2%,67%,68.1%,91%,100%{opacity:1;filter:brightness(1)}31.5%{opacity:.72;filter:brightness(.78)}67.5%{opacity:.88;filter:brightness(1.18)}91.4%{opacity:.63;filter:brightness(.74)}}
@keyframes zen-text-failure{0%,29%,30%,63%,64%,88%,89%,100%{opacity:1;text-shadow:0 0 12px rgba(255,165,64,.75)}29.4%{opacity:.28;text-shadow:none}63.5%{opacity:.72;clip-path:inset(0 0 45% 0)}88.5%{opacity:.42;letter-spacing:.08em;text-shadow:0 0 3px rgba(255,165,64,.2)}}
@keyframes zen-noise-shift{0%{transform:translate(0,0)}33%{transform:translate(-1px,1px)}66%{transform:translate(1px,-1px)}100%{transform:translate(0,0)}}
@media(max-width:760px){.zen-header{grid-template-columns:1fr auto;padding:12px 14px}.zen-title-block{grid-column:1/-1;grid-row:1;margin-bottom:12px}.zen-title-block h1{font-size:23px;letter-spacing:8px}.zen-title-block p{font-size:7px;letter-spacing:4px}.zen-back{grid-column:1;grid-row:2}.zen-now-playing{grid-column:2;grid-row:2;width:135px}.zen-player{width:calc(100vw - 24px);bottom:12px}}

/* Loaded last: protect the level device and add live white energy. */
#bernard .progress-panel .level-bar{isolation:isolate}
#bernard .progress-panel .level-light-runner{display:block!important;inset:-35% auto -35% -42%;width:32%;height:170%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),rgba(255,255,255,.98),rgba(255,255,255,.18),transparent);filter:blur(3px);opacity:.8;animation:level-runner-device 5.2s ease-in-out infinite;mix-blend-mode:screen}
#bernard .progress-panel .level-bar::after{content:"";position:absolute;z-index:4;inset:-1px;border-radius:18px;padding:1px;background:conic-gradient(from var(--level-angle,0deg),transparent 0 72%,rgba(255,255,255,.98) 79%,transparent 87%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;filter:drop-shadow(0 0 5px #fff);animation:level-border-orbit 5s linear infinite}
@keyframes level-runner-device{0%{transform:translateX(0);opacity:0}12%{opacity:.85}50%{opacity:.95}88%{opacity:.85}100%{transform:translateX(455%);opacity:0}}
@property --level-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes level-border-orbit{to{--level-angle:360deg}}
#bernard .main-room-navigation-node::after{content:"";position:absolute;z-index:24;left:0;top:10px;width:198px;height:198px;border-radius:50%;padding:2px;background:conic-gradient(from var(--nav-angle,0deg),transparent 0 75%,rgba(255,255,255,.98) 83%,transparent 91%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:drop-shadow(0 0 7px rgba(255,255,255,.95));pointer-events:none;opacity:0;animation:nav-orbit-intro 6.8s ease-out .55s 1 both,nav-orbit-loop 6.2s linear 7.35s infinite}
@property --nav-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes nav-orbit-intro{0%{opacity:0;--nav-angle:0deg}15%{opacity:1}85%{opacity:1}100%{opacity:.72;--nav-angle:720deg}}@keyframes nav-orbit-loop{to{--nav-angle:360deg}}
@media(max-width:1100px){#bernard .progress-panel{min-height:390px!important;padding:42px 25px 36px!important}#bernard .progress-panel .level-device-title{margin:0 0 28px!important}#bernard .progress-panel .level-bar{margin:0!important}#bernard .progress-panel .sequence{margin:34px 0 0!important}#bernard .progress-panel .level-attribute{margin-top:38px!important}}
@media(max-width:760px){#bernard .progress-panel{min-height:310px!important;padding:32px 22px 28px!important}#bernard .progress-panel .level-device-title{margin-bottom:22px!important}#bernard .progress-panel .sequence{margin-top:25px!important}#bernard .progress-panel .level-attribute{margin-top:31px!important}#bernard .main-room-navigation-node::after{display:none}}


/* =========================================================
   BERNARD 2.1.7 — ZEN HEADER / PLAYER / GLOBAL CONTROLS
   ========================================================= */
.zen-header{grid-template-columns:1fr auto 1fr;padding-top:12px}
.zen-title-block p{margin-top:30px!important}
.zen-player{width:min(780px,82vw);display:grid;grid-template-columns:150px auto 1fr;align-items:center;gap:16px;padding:8px 16px!important;border-radius:18px!important}
.zen-player .zen-now-playing{position:static;justify-self:stretch;width:auto;padding:0 10px 0 2px;border:0;border-right:1px solid rgba(255,188,98,.18);border-radius:0;background:transparent;box-shadow:none}
.zen-player .zen-now-playing span{font-size:6px}.zen-player .zen-now-playing strong{margin-top:3px;font-size:10px}.zen-player .zen-visualizer{height:10px;margin-top:3px;justify-content:flex-start}
.zen-player .zen-controls{justify-content:flex-start}.zen-player .zen-timeline{margin-top:0}
body.zen-active .sound-toggle{display:block!important;visibility:visible!important;top:auto!important;right:28px!important;bottom:24px!important;color:#ffd28a!important;text-shadow:0 0 9px rgba(255,165,64,.5);z-index:3000}
body.zen-active .cloud-sign-out{display:none!important}
body:not(.zen-active):has(#bernard[hidden]) .sound-toggle,
body:has(#foundation-screen:not([hidden])) .cloud-sign-out,
body:has(#data-screen:not([hidden])) .cloud-sign-out,
body.sublime-active .cloud-sign-out{display:none!important}
body:not(.zen-active):has(#bernard[hidden]) .cloud-sign-out{display:none!important}
.zen-alive{animation-duration:34s!important}.zen-title-block h1,.zen-title-block p,.zen-now-playing span,.zen-now-playing strong,.zen-back,.zen-controls button,.zen-timeline span{animation-duration:42s!important}
@media(max-width:900px){.zen-player{grid-template-columns:120px auto 1fr;width:calc(100vw - 150px);left:12px;transform:none}.zen-title-block p{margin-top:24px!important}}

/* =========================================================
   BERNARD 2.1.8 — TRUE LAYERED ZEN CROSSFADE
   The incoming image emerges directly above the current image.
   No horizontal wipe, zoom or blur.
   ========================================================= */
.zen-room-layer {
    visibility: visible !important;
    clip-path: none !important;
    opacity: 0;
    transform: none !important;
    transition: none;
    will-change: opacity;
}

.zen-room-layer.is-active {
    z-index: 1;
    opacity: 1;
    clip-path: none !important;
}

.zen-room-layer.is-entering {
    z-index: 2;
    clip-path: none !important;
    animation: zen-image-crossfade 2.15s ease-in-out both !important;
}

@keyframes zen-image-crossfade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* =========================================================
   BERNARD 2.1.9 — SLOWER, SOFTER OVERLAY TRANSITION
   Longer fade, shorter fully-static hold between images.
   ========================================================= */
.zen-room-layer.is-entering {
    animation: zen-image-crossfade-219 4.5s ease-in-out both !important;
}
@keyframes zen-image-crossfade-219 {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Bernard 2.2.2 — each Zen image advances after three seconds. */
.zen-room-layer.is-entering {
    animation: zen-image-crossfade-222 1.2s ease-in-out both !important;
}
@keyframes zen-image-crossfade-222 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* =========================================================
   BERNARD 2.2.4 — ZEN IMAGE RHYTHM
   Seven-second crossfade followed by two fully clear seconds.
   ========================================================= */
.zen-room-layer.is-entering {
    animation: zen-image-crossfade-224 7s linear both !important;
}
@keyframes zen-image-crossfade-224 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* =========================================================
   BERNARD 2.2.6 — VISIBLE MINIMAL LEVEL LINE
   Keep the existing eight-level logic; only restore visibility
   and present each level as a thin luminous white segment.
   ========================================================= */
#bernard .progress-panel .level-bar {
    position: relative !important;
    z-index: 8 !important;
    width: 100% !important;
    max-width: none !important;
    height: 14px !important;
    min-height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 5px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    isolation: isolate !important;
}
#bernard .progress-panel .level-bar::before,
#bernard .progress-panel .level-bar::after,
#bernard .progress-panel .level-light-runner {
    content: none !important;
    display: none !important;
    animation: none !important;
}
#bernard .progress-panel .level-segment,
#bernard .progress-panel .level-segment.current {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 2px !important;
    min-height: 2px !important;
    display: block !important;
    align-self: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.72) !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    animation: none !important;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.72)) !important;
    box-shadow: 0 0 4px rgba(255,255,255,.95), 0 0 10px rgba(255,255,255,.58) !important;
}
#bernard .progress-panel .level-segment.complete,
#bernard .progress-panel .level-segment.complete.current {
    height: 3px !important;
    background: #fff !important;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.78)) brightness(1.28) !important;
    box-shadow: 0 0 6px #fff, 0 0 15px #fff, 0 0 27px rgba(255,255,255,.92) !important;
}