/* One ocean rail: section creatures, right-aligned labels and the current shark. */
:root { --depth-anchor-offset:112px; }
section.sec[id], section.sec .sec-title { scroll-margin-top:var(--depth-anchor-offset); }
.depth-nav { position:fixed; z-index:151; right:16px; top:50%; transform:translateY(-50%); width:255px; font:500 12px/1.6 var(--font-ui); color:#edf8ff; }
.depth-nav[hidden], .depth-nav-panel[hidden] { display:none; }
.depth-nav-reveal { --panel-open-dur:500ms; --panel-translate-y:8px; --panel-blur:1px; }
.depth-nav-panel { position:relative; padding:12px 8px 38px 0; max-height:calc(100dvh - var(--depth-anchor-offset) - 70px); overflow-y:auto; overflow-x:hidden; border:0; background:none; scrollbar-width:thin; }
.depth-nav-title { margin:0 70px 12px 0; color:#94b6d1; font-size:9px; font-weight:600; text-align:right; letter-spacing:.16em; }
.depth-nav-list { position:relative; list-style:none; display:grid; gap:3px; margin:0; padding:0; }
.depth-nav-link { position:relative; display:flex; align-items:center; justify-content:flex-end; min-height:48px; padding:8px 70px 8px 8px; border-radius:8px; color:#bed3e8; text-align:right; letter-spacing:.025em; overflow-wrap:anywhere; text-shadow:0 1px 8px #03132d55; }
.depth-nav-link::before { content:''; position:absolute; right:33px; top:50%; width:10px; height:7px; transform:translateY(-6px); border-radius:8px 8px 2px 2px; background:#91cfe0c9; box-shadow:0 0 9px #91cfe018; }
.depth-nav-link::after { content:''; position:absolute; right:34px; top:50%; width:8px; height:5px; transform:translateY(1px); border-radius:0 0 4px 4px; background:repeating-linear-gradient(90deg,#91cfe0a3 0 1px,transparent 1px 3px); }
.depth-nav-link:hover { color:#f1faff; background:linear-gradient(270deg,#a3d8ff0d,transparent); }
.depth-nav-link[aria-current="location"] { color:#f3fbff; font-weight:700; text-shadow:0 0 12px #a5dfff38; }
.depth-nav-link[aria-current="location"]::before, .depth-nav-link[aria-current="location"]::after { opacity:0; }
.depth-nav-link:focus-visible, .depth-nav-toggle:focus-visible { outline:2px solid #ffd67b; outline-offset:-2px; }
section.sec .sec-title:focus-visible { outline:2px solid #7cceff; outline-offset:6px; }
.depth-nav-panel .gauge { position:absolute; width:1px; transform:none; }
.depth-nav-panel .gauge .g-track { right:0; }
.depth-nav-panel .gauge #gThumb { left:0; right:auto; width:0; height:0; }
html:not([data-motion-paused]) .depth-nav-panel .gauge #gThumb { transition:none; }
.depth-nav-panel .gauge .depth-shark { top:-16px; left:-18px; width:36px; height:32px; rotate:0deg; transform:rotate(-27.43deg); transform-origin:50% 50%; }
.depth-nav-panel .gauge .depth-moon { top:-6px; left:18px; width:16px; height:16px; }
.depth-nav-panel .gauge .g-read { display:block; right:-5px; color:#80aac9; font-size:9px; }
.depth-nav-toggle { display:none; }
.depth-nav[data-compact="true"] { top:auto; bottom:max(18px,env(safe-area-inset-bottom)); right:18px; transform:none; width:auto; max-width:calc(100vw - 36px); }
.depth-nav[data-compact="true"] .depth-nav-toggle { display:flex; align-items:center; gap:10px; min-height:44px; max-width:100%; padding:9px 15px; border:1px solid #b8dcff38; border-radius:24px; background:#102e50d9; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 6px 24px #020f2820; color:#edf8ff; font:700 12px/1.5 var(--font-ui); cursor:pointer; }
.depth-nav[data-compact="true"] .depth-nav-current { max-width:min(170px,42vw); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:500; color:#bfd8eb; }
.depth-nav[data-compact="true"] .depth-nav-toggle::after { content:''; flex:0 0 6px; width:6px; height:6px; margin-left:2px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:translateY(2px) rotate(-45deg); }
.depth-nav[data-compact="true"] .depth-nav-toggle[aria-expanded="true"]::after { transform:translateY(-2px) rotate(135deg); }
.depth-nav[data-compact="true"] .depth-nav-panel { position:absolute; right:0; bottom:56px; width:300px; max-height:calc(100dvh - var(--depth-anchor-offset) - 88px); padding:16px 14px 38px; border:1px solid #b8dcff30; border-radius:18px; background:linear-gradient(150deg,#173659e8,#081c38ed); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 12px 36px #020f2828; }
@media (max-width:820px) { .depth-nav, .gauge { display:none; } }
@media (prefers-reduced-motion:no-preference) {
  html:not([data-motion-paused]) .depth-nav-panel .gauge .depth-shark { animation-name:depth-nav-shark-swim; }
  html:not([data-motion-paused]) .depth-nav-panel .gauge .depth-moon { animation-name:depth-nav-moon-drift; }
}
/* Paired keyframes keep the shark's mouth axis pointing at the same moon. */
@keyframes depth-nav-shark-swim {
  0%,100% { transform:rotate(-55.26deg); }
  25% { transform:rotate(-31.83deg); }
  50% { transform:rotate(-4.48deg); }
  75% { transform:rotate(-26.12deg); }
}
@keyframes depth-nav-moon-drift {
  0%,100% { transform:translate(4px,-15px); }
  25% { transform:translate(-7px,-2px); }
  50% { transform:translate(3px,13px); }
  75% { transform:translate(-6px,0); }
}
html:not([data-motion-paused]) .depth-nav-panel .gauge .depth-shark { transform-origin:50% 50%; }
html[data-motion-paused] .depth-nav-reveal { transition:none; }

/* transitions-dev panel reveal; only this component overrides its distance. */
:root {
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-panel-slide {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity   var(--panel-close-dur) var(--panel-ease),
    filter    var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}
.t-panel-slide[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity   var(--panel-open-dur) var(--panel-ease),
    filter    var(--panel-open-dur) var(--panel-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-panel-slide { transition: none !important; }
}