/* Motion stays on small cards and decorative art, never the page or its editors. */
.view .scroll-card:not(.is-revealed) { opacity:0; translate:0 14px; }
.view .scroll-card.is-revealed { animation:rhineCardReveal .38s cubic-bezier(.2,.7,.2,1); }
.view .scroll-card:focus-within { opacity:1; translate:none; animation:none; }
@keyframes rhineCardReveal { from { opacity:0; translate:0 14px; } to { opacity:1; translate:none; } }
.view.active > :is(.page-heading,.dashboard-hero).is-heading-visible > :first-child > :is(.eyebrow,h1,p:not(.eyebrow),.hero-progress),
.view.active > .page-heading.is-heading-visible > :is(.button,.heading-actions) { animation:rhineHeadingCopyIn .42s var(--heading-delay,0s) cubic-bezier(.2,.7,.2,1) backwards; }
.view.active > :is(.page-heading,.dashboard-hero) h1 { --heading-delay:.06s; }
.view.active :is(.story-quote,#dashboardDaySummary) { --heading-delay:.12s; }
.view.active :is(.heading-actions,.page-heading>.button,.hero-progress) { --heading-delay:.18s; }
.view.active > :is(.page-heading,.dashboard-hero).is-heading-visible > :is(.heading-visual,.hero-atmosphere) { animation:rhineHeadingArtIn .65s .08s cubic-bezier(.2,.7,.2,1) backwards; }
#view-reagents,#view-samples { --heading-art-x:0px; --heading-art-y:20px; }
#view-mice,#view-cells { --heading-art-scale:.92; }
.view.active .is-heading-visible .lab-layout-heading-art g { transform-box:fill-box; transform-origin:center; animation:rhineHeadingArtIn .55s .1s cubic-bezier(.2,.7,.2,1) backwards; }
.view.active .lab-layout-heading-art .layout-art-building { animation-delay:.18s; }
.view.active .lab-layout-heading-art .layout-art-signal { animation-delay:.26s; }
@keyframes rhineHeadingCopyIn { from { opacity:0; translate:0 10px; } to { opacity:1; translate:none; } }
@keyframes rhineHeadingArtIn { from { opacity:0; translate:var(--heading-art-x,24px) var(--heading-art-y,0px); scale:var(--heading-art-scale,.98); } to { translate:none; scale:1; } }
/* Far planes counter more of the page scroll; entrance motion remains independent. */
.view > :is(.page-heading,.dashboard-hero) { --heading-travel:0px; --heading-depth-scale:1; }
body:not(.background-all-lives):not(.background-black-current) :is(.heading-visual,.hero-atmosphere).has-depth-art { background-image:none; }
body:not(.background-all-lives):not(.background-black-current) :is(.heading-visual,.hero-atmosphere) > .heading-depth-art { display:block !important; position:absolute; inset:0; width:100%; height:100%; }
body:is(.background-all-lives,.background-black-current) .heading-depth-art { display:none !important; }
.heading-depth-art [data-depth="far"],.heading-collage-art [data-depth="far"],.lab-layout-heading-art .layout-art-orbit { transform:translateY(calc(var(--heading-travel) * .9 * var(--heading-depth-scale))); }
.heading-depth-art [data-depth="mid"],.heading-collage-art [data-depth="mid"],.lab-layout-heading-art .layout-art-building { transform:translateY(calc(var(--heading-travel) * .45 * var(--heading-depth-scale))); }
.heading-depth-art [data-depth="near"],.heading-collage-art [data-depth="near"],.lab-layout-heading-art .layout-art-signal { transform:translateY(calc(var(--heading-travel) * .12 * var(--heading-depth-scale))); }
.view > :is(.page-heading,.dashboard-hero) > :first-child { transform:none; }
.page-heading.technical-heading > div:first-child:not(.heading-visual) { align-self:flex-start; }
body:is(.background-all-lives,.background-black-current) .view > :is(.page-heading,.dashboard-hero) > :is(.heading-visual:not(.heading-visual-layout):not(.has-collage-art),.hero-atmosphere:not(.has-collage-art)) { translate:0 calc(var(--heading-travel) * .45 * var(--heading-depth-scale)); }
body:is(.background-all-lives,.background-black-current) .view > :is(.page-heading,.dashboard-hero)::before { translate:0 calc(var(--heading-travel) * .9 * var(--heading-depth-scale)); }
body:is(.background-all-lives,.background-black-current) .view > :is(.page-heading,.dashboard-hero)::after { translate:0 calc(var(--heading-travel) * .12 * var(--heading-depth-scale)); }
body .heading-collage-art { display:none !important; }
body.background-all-lives :is(.heading-visual,.hero-atmosphere) > .heading-collage-art { display:block !important; position:absolute; inset:0; width:100%; height:100%; }
body.background-all-lives :is(#view-dashboard,#view-experiments,#view-mice,#view-reagents) :is(.heading-visual,.hero-atmosphere) { background-image:url('../images/theme-atlas/all-lives-heading-art-v1.svg?v=0.4.2-depth2') !important; background-size:400% 100% !important; inset:50% 0 auto auto; height:auto; aspect-ratio:2/1; transform:translateY(-50%); clip-path:none; }
body.background-all-lives #view-dashboard .hero-atmosphere { background-position:0 0 !important; }
body.background-all-lives #view-experiments .heading-visual { background-position:33.333333% 0 !important; }
body.background-all-lives #view-mice .heading-visual { background-position:66.666667% 0 !important; }
body.background-all-lives #view-reagents .heading-visual { background-position:100% 0 !important; }
body.background-all-lives :is(#view-dashboard,#view-experiments,#view-mice,#view-reagents) :is(.heading-visual,.hero-atmosphere).has-collage-art { background-image:none !important; }
.nav-icon { display:none; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.nav-hover-marker { position:absolute; z-index:0; top:0; left:13px; right:13px; height:var(--nav-hover-height,52px); border-radius:14px; background:color-mix(in srgb,var(--acid-strong) 32%,var(--surface)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acid-strong) 55%,transparent); opacity:0; pointer-events:none; transform:translateY(var(--nav-hover-y,0px)); transition:transform .18s ease,height .18s ease,opacity .12s ease; }
.primary-nav.is-hovering .nav-hover-marker { opacity:1; }
body:not(.navigation-dock) .primary-nav .nav-item { z-index:1; }
body:not(.navigation-dock) .primary-nav .nav-item:hover:not(.active) { background:transparent; box-shadow:none; transform:none; }
.navigation-mode-toggle { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:38px; padding:8px 12px; border:1px solid var(--line-dark); border-radius:12px; color:var(--ink); background:color-mix(in srgb,var(--surface) 72%,transparent); font:700 12px/1.2 var(--font-interface); cursor:pointer; }
.navigation-mode-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.navigation-mode-toggle:hover { background:var(--acid-soft); }
.keyboard-shortcut-help kbd,.dock-page-hint kbd { padding:3px 5px; border:1px solid var(--line-dark); border-radius:5px; color:var(--ink); background:var(--surface); font:700 11px/1.2 var(--font-interface); }
.keyboard-shortcut-help { display:flex; flex:none; align-items:center; gap:5px; padding:5px; border:0; border-radius:6px; background:transparent; color:var(--muted); font:700 11px/1.2 var(--font-interface); white-space:nowrap; cursor:pointer; }
.keyboard-shortcut-help[aria-pressed=true] { color:var(--ink); background:var(--acid-soft); }
.topbar:has(#utilityNav:not([hidden])) .keyboard-shortcut-help { display:none; }
.dock-page-hint { display:none; }
body.navigation-dock .dock-page-hint { display:flex; position:absolute; top:50%; align-items:center; gap:5px; color:var(--muted); font:700 16px/1 var(--font-interface); translate:0 -50%; pointer-events:none; }
body.navigation-dock .dock-page-hint-prev { right:calc(100% + 10px); }
body.navigation-dock .dock-page-hint-next { left:calc(100% + 10px); }
body.navigation-dock .app-stage { width:100%; margin-left:0; }
body.navigation-dock .topbar { left:0; }
body.navigation-dock main { padding-bottom:calc(120px + env(safe-area-inset-bottom,0px)); }
body.navigation-dock .sidebar { inset:auto auto calc(16px + env(safe-area-inset-bottom,0px)) 50%; display:flex; flex-direction:row; align-items:center; width:max-content; max-width:calc(100% - 24px); height:76px; min-height:0; padding:0 12px 0 0; overflow:visible; border:1px solid var(--line-dark) !important; border-radius:28px !important; background:color-mix(in srgb,var(--surface) 96%,transparent) !important; box-shadow:0 10px 32px #10251a1f; backdrop-filter:none; transform:translateX(-50%); }
body.navigation-dock .sidebar::before,body.navigation-dock .sidebar::after,
body.navigation-dock :is(.brand-lockup,.facility-chip,.nav-label,.nav-hover-marker,.system-status) { display:none !important; }
body.navigation-dock .sidebar .primary-nav { display:flex; align-items:center; gap:8px; padding:12px; }
body.navigation-dock .sidebar .nav-item { display:flex; flex:none; align-items:center; justify-content:center; width:44px; min-height:48px; padding:0 !important; border-radius:16px !important; color:var(--muted) !important; background:transparent; box-shadow:none; transform:none; overflow:visible; }
body.navigation-dock .sidebar .nav-item > :is(span,b) { display:none !important; }
body.navigation-dock .nav-icon { display:block; pointer-events:none; transform:translateY(var(--dock-lift,0px)) scale(var(--dock-scale,1)); transition:transform .14s ease-out; }
body.navigation-dock .sidebar .nav-item.active { color:var(--acid-strong) !important; background:var(--acid-soft); }
body.navigation-dock .sidebar .nav-item:hover,body.navigation-dock .sidebar .nav-item:focus-visible { color:var(--ink) !important; }
body.navigation-dock .sidebar .nav-item::after { content:""; position:absolute; inset:auto auto 2px 50%; width:4px; height:4px; border:0; border-radius:50%; background:var(--acid-strong); opacity:0; transform:translateX(-50%); }
body.navigation-dock .sidebar .nav-item.active::after { opacity:1; }
body.navigation-dock .sidebar :is(.nav-item,.navigation-mode-toggle)::before { content:attr(data-nav-label); position:absolute; inset:auto auto calc(100% + 20px) 50%; width:max-content; max-width:180px; padding:7px 10px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--surface); font:700 12px/1.3 var(--font-interface); letter-spacing:0; opacity:0; pointer-events:none; transform:translateX(-50%); transition:opacity .12s ease; }
body.navigation-dock .sidebar :is(.nav-item,.navigation-mode-toggle):is(:hover,:focus-visible)::before { opacity:1; }
body.navigation-dock .sidebar-foot { display:flex; flex:none; margin:0; padding:0; border:0; background:transparent !important; }
body.navigation-dock .sidebar .navigation-mode-toggle { position:relative; width:44px; min-height:48px; padding:0; border:0 !important; border-radius:16px; color:var(--muted) !important; background:transparent !important; box-shadow:none; }
body.navigation-dock .navigation-mode-toggle svg { width:24px; height:24px; stroke-width:1.7; transition:transform .14s ease-out; }
body.navigation-dock .sidebar .navigation-mode-toggle:is(:hover,:focus-visible) { color:var(--ink) !important; }
body.navigation-dock .navigation-mode-toggle:is(:hover,:focus-visible) svg { transform:translateY(-2px) scale(1.18); }
body.navigation-dock .navigation-mode-toggle span { display:none; }
body.navigation-dock .mobile-scrim { display:none !important; }
.keyboard-action-hint { position:fixed; inset:auto; z-index:3000; width:max-content; margin:0; padding:3px 6px; border:1px solid currentColor; border-radius:6px; color:#234c73; background:#fff; box-shadow:0 3px 12px #10251a26; font:800 12px/1.25 var(--font-interface); white-space:nowrap; pointer-events:none; }
.keyboard-action-hint[hidden] { display:none !important; }
.keyboard-action-hint[data-shortcut="n"] { color:#0b655a; }
.keyboard-action-hint[data-shortcut="x"] { color:#a03942; }
.keyboard-action-hint[data-shortcut="s"] { color:#70439c; }
.keyboard-action-hint.is-tab { color:#785515; }
.keyboard-action-hint.is-current { z-index:3001; color:#fff; background:#354ec7; border-color:#354ec7; font-size:13px; }
.keyboard-action-target { outline:2px solid #354ec7 !important; outline-offset:3px; }
.dark-theme .keyboard-action-hint { color:#d6e8ff; background:#182532; }
.dark-theme .keyboard-action-hint[data-shortcut="n"] { color:#91e2cc; }
.dark-theme .keyboard-action-hint[data-shortcut="x"] { color:#ffb4b8; }
.dark-theme .keyboard-action-hint[data-shortcut="s"] { color:#d6b5ff; }
.dark-theme .keyboard-action-hint.is-tab { color:#f1d38b; }
.dark-theme .keyboard-action-hint.is-current { color:#152b55; background:#b6d9ff; border-color:#b6d9ff; }
.dark-theme .keyboard-action-target { outline-color:#b6d9ff !important; }
.shortcut-settings-dialog { width:min(680px,calc(100% - 24px)); max-height:min(88dvh,780px); overflow:hidden; }
.shortcut-settings-dialog form { display:flex; flex-direction:column; max-height:min(88dvh,780px); min-height:0; }
.shortcut-settings-dialog header,.shortcut-settings-dialog footer { flex:none; }
.shortcut-settings-body { padding:16px 24px; overflow-y:auto; min-height:0; }
.shortcut-settings-body > p { color:var(--muted); font:700 13px/1.6 var(--font-interface); }
.shortcut-setting-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(120px,190px); align-items:center; gap:4px 16px; padding:10px 0; border-bottom:1px solid var(--line); font:700 14px/1.4 var(--font-interface); }
.shortcut-setting-row input { min-width:0; width:100%; min-height:38px; padding:8px 10px; border:1px solid var(--line-dark); border-radius:10px; color:var(--ink); background:var(--surface); font:700 16px/1.3 var(--font-interface); }
.shortcut-setting-row input[aria-invalid=true] { border-color:var(--danger,#b33f46); }
.shortcut-setting-row small { grid-column:1/-1; color:var(--danger,#b33f46); font:700 12px/1.4 var(--font-interface); }
.shortcut-setting-row small:empty { display:none; }
.shortcut-settings-dialog footer > div { display:flex; gap:8px; }
@media(max-width:820px),(max-width:1200px) and (max-height:700px) and (orientation:landscape) {
    .keyboard-shortcut-help,body.navigation-dock .dock-page-hint { display:none; }
    .view > :is(.page-heading,.dashboard-hero) { --heading-depth-scale:.55; }
    body.navigation-dock .sidebar { width:min(640px,calc(100% - 16px)); height:62px; padding-right:6px; bottom:calc(8px + env(safe-area-inset-bottom,0px)); border-radius:22px !important; }
    body.navigation-dock .sidebar .primary-nav { flex:1; min-width:0; gap:0; padding:7px 4px; }
    body.navigation-dock .sidebar .nav-item { flex:1; min-width:0; width:auto; min-height:44px; border-radius:10px !important; }
    body.navigation-dock .nav-icon { width:21px; height:21px; }
    body.navigation-dock .sidebar .navigation-mode-toggle { width:30px; min-height:44px; padding:0; }
    body.navigation-dock .navigation-mode-toggle svg { width:21px; height:21px; }
    body.navigation-dock .sidebar :is(.nav-item,.navigation-mode-toggle)::before { display:none; }
    body.navigation-dock .assistant-character-trigger:not(.has-custom-position) { bottom:calc(80px + env(safe-area-inset-bottom,0px)); }
}
@media(prefers-reduced-motion:reduce) {
    .view > :is(.page-heading,.dashboard-hero) { --heading-travel:0px !important; }
    .view .scroll-card { opacity:1 !important; translate:none !important; animation:none !important; }
    .view.active > :is(.page-heading,.dashboard-hero) * { animation:none !important; }
    .nav-hover-marker,body.navigation-dock .nav-icon,body.navigation-dock .navigation-mode-toggle svg { transition:none; }
    body.navigation-dock .nav-icon,body.navigation-dock .navigation-mode-toggle svg { transform:none; }
}
