/* ==========================================================================
   WHALE REEF — bioluminescent deep-ocean visualization
   Companion to Concept D (The World Ledger). Same product, different
   metaphor: organic motion, soft glow, teal/cyan/violet — deep water
   instead of crisp orbital grid.
   ========================================================================== */

body.reef-page {
  background: #1c385e;
  overflow-x: hidden;
}

/* -------------------------------------------------------------------- */
/* Header                                                                */
/* -------------------------------------------------------------------- */
.reef-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  background: linear-gradient(180deg, rgba(8, 46, 54, 0.92) 0%, rgba(8, 46, 54, 0) 100%);
  gap: var(--space-3) var(--space-4);
}
.reef-header .site-pills { grid-column: 2; justify-self: center; }
.reef-header .reef-nav { grid-column: 3; justify-self: end; }
.reef-header .brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}
.reef-header .brand svg { width: 28px; height: 28px; color: #2fe6c8; }

/* flex-wrap:nowrap deliberately -- unlike .site-pills (5 page links,
   meant to wrap), .reef-nav only ever holds the 2 small icon buttons
   (sound + fullscreen toggle) and should never wrap them onto a second
   row. Wrap here was leftover copy from a sibling page's pills nav; it
   let the grid's auto-sized middle column squeeze this one hard enough,
   in a narrow ~1081-1088px window, to force the icons onto 2 rows --
   confirmed by screenshot, tall enough to collide with .reef-panel
   below (base panel top:64px doesn't expect a 2-row header). */
.reef-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: nowrap;
  flex-shrink: 0;
  grid-column: 3;
  justify-self: end;
}
.reef-header .brand { grid-column: 1; justify-self: start; }



.reef-sound-toggle {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  color: #9fd8cf;
  border: 1px solid rgba(47, 230, 200, 0.28);
  background: rgba(47, 230, 200, 0.06);
  transition: var(--transition-interactive);
}
.reef-sound-toggle svg { width: 16px; height: 16px; }
.reef-sound-toggle:hover { color: #d8fff5; border-color: #2fe6c8; background: rgba(47, 230, 200, 0.12); }
.reef-sound-toggle svg line { transition: opacity 150ms ease; }
.reef-sound-toggle.is-on svg line { opacity: 0; }
.reef-sound-toggle.is-on { color: #2fe6c8; border-color: #2fe6c8; background: rgba(47, 230, 200, 0.16); }

.reef-ambient-toggle svg .icon-collapse { opacity: 0; }
.reef-ambient-toggle svg .icon-expand,
.reef-ambient-toggle svg .icon-collapse { transition: opacity 150ms ease; }
.reef-ambient-toggle.is-on svg .icon-expand { opacity: 0; }
.reef-ambient-toggle.is-on svg .icon-collapse { opacity: 1; }

/* -------------------------------------------------------------------- */
/* Ambient / screensaver mode                                           */
/* Hides every UI layer and lets the reef run full-bleed with live      */
/* data + sound still active underneath — nothing here touches state.  */
/* -------------------------------------------------------------------- */
body.is-ambient .reef-header,
body.is-ambient .reef-intro,
body.is-ambient .reef-panel,
body.is-ambient .reef-hint,
body.is-ambient .reef-reset-view,
body.is-ambient .whale-log-rail,
body.is-ambient .reef-sources,
body.is-ambient .whale-detail,
body.is-ambient .reef-toast {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 700ms ease;
}
body.is-ambient,
body.is-ambient .reef-stage,
body.is-ambient #reef-canvas {
  cursor: none;
}

.reef-ambient-hint {
  position: fixed;
  left: 50%;
  bottom: var(--space-8);
  transform: translateX(-50%);
  z-index: 40;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: #b9c8c4;
  background: rgba(6, 20, 28, 0.55);
  border: 1px solid rgba(47, 230, 200, 0.22);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
  backdrop-filter: blur(6px);
}
.reef-ambient-hint.is-visible { opacity: 1; }

/* Shown only when sound is toggled on but the browser hasn't granted
   audio playback yet (every browser requires a real click/tap/keypress
   before any sound can play at all -- a platform rule, not a bug, but
   easy to mistake for broken audio if nothing tells you). Disappears
   the instant that first gesture happens, anywhere on the page. Stays
   visible through ambient mode too, since that's exactly when a
   passive viewer is most likely to never have interacted yet. */
.reef-sound-hint {
  position: fixed;
  left: 50%;
  top: 84px; /* clears the fixed header without measuring it in JS */
  transform: translateX(-50%);
  z-index: 45;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
  color: #b9c8c4;
  background: rgba(6, 20, 28, 0.6);
  border: 1px solid rgba(47, 230, 200, 0.28);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
  backdrop-filter: blur(6px);
  animation: reef-sound-hint-pulse 2.4s ease-in-out infinite;
}
.reef-sound-hint.is-visible { opacity: 1; }
.reef-sound-hint .short { display: none; }
@keyframes reef-sound-hint-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 230, 200, 0); }
  50% { box-shadow: 0 0 0 6px rgba(47, 230, 200, 0.08); }
}

/* -------------------------------------------------------------------- */
/* Stage                                                                 */
/* -------------------------------------------------------------------- */
.reef-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 620px;
  /* Defensive clip: guards the absolutely-positioned .reef-panel against
     any containing-block/box-model edge case (observed: a real desktop
     Safari report of the panel rendering mostly off-screen at a width
     this project could not reproduce in Chromium at any tested size,
     768px-3440px). Without this, a miscomputed "right" offset could
     paint past the visible frame instead of being clipped back into it. */
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(36, 116, 122, 0.22) 0%, transparent 50%),
    linear-gradient(180deg, #1d6872 0%, #215c86 18%, #254f9a 42%, #214280 70%, #1d3869 100%);
}

#reef-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}

.reef-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 90% at 50% 50%, transparent 40%, rgba(3, 11, 22, 0.55) 100%);
}

/* Soft drifting caustic light bands — pure CSS, organic vs. the globe's grid */
.reef-caustics {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(ellipse 60% 40% at 20% 15%, rgba(79, 209, 255, 0.10), transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 25%, rgba(185, 139, 255, 0.08), transparent 60%),
    radial-gradient(ellipse 70% 45% at 45% 80%, rgba(47, 230, 200, 0.08), transparent 60%);
  animation: caustic-drift 26s ease-in-out infinite alternate;
}
@keyframes caustic-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(2%, -3%) scale(1.06); }
  100% { transform: translate(-2%, 2%) scale(1); }
}

/* -------------------------------------------------------------------- */
/* Intro copy                                                            */
/* -------------------------------------------------------------------- */
.reef-intro {
  position: absolute;
  top: calc(var(--space-16) + var(--space-8));
  left: var(--space-6);
  max-width: 460px;
  z-index: 10;
  pointer-events: none;
}
.reef-intro .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b98bff;
}
.reef-intro h1 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin: var(--space-3) 0 var(--space-3);
  color: #eafffb;
  text-shadow: 0 0 24px rgba(47, 230, 200, 0.25);
}
.reef-intro p {
  color: #b9c8c4;
  font-size: var(--text-sm);
  line-height: 1.65;
}
.reef-intro em {
  color: #6ff0d8;
  font-style: normal;
  font-family: var(--font-mono);
}
.reef-intro .reef-sound-note {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(111, 240, 216, 0.16);
  color: #8fd6c8;
  font-size: var(--text-xs);
  line-height: 1.5;
}


/* -------------------------------------------------------------------- */
/* Vitals panel (glass, mirrors globe-panel)                             */
/* -------------------------------------------------------------------- */
.reef-panel {
  position: absolute;
  top: var(--space-16);
  right: var(--space-6);
  z-index: 10;
  width: 280px;
  background: rgba(6, 16, 20, 0.68);
  border: 1px solid rgba(79, 209, 255, 0.18);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 0 40px rgba(47, 230, 200, 0.06);
}
.reef-panel .panel-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}
.reef-stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-top: 1px solid rgba(79, 209, 255, 0.10);
}
.reef-stat-row:first-of-type { border-top: none; }
.reef-stat-row .label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.reef-stat-row .value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: #eafffb;
  font-size: var(--text-sm);
}
.reef-stat-row .value.mono { color: #9fd8cf; }

.legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.legend-dot.pulse-live { background: #2fe6c8; box-shadow: 0 0 8px #2fe6c8; animation: dot-breathe 2.4s ease-in-out infinite; }
@keyframes dot-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

.reef-status {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(79, 209, 255, 0.10);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.6;
}
.reef-status.is-live { color: #2fe6c8; }

/* -------------------------------------------------------------------- */
/* Hint + loading                                                        */
/* -------------------------------------------------------------------- */
.reef-hint {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: #cfe9ec;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
  background: rgba(4, 14, 20, 0.55);
  border: 1px solid rgba(79, 209, 255, 0.14);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: reef-hint-in 700ms ease 1000ms forwards;
  transition: opacity 400ms ease;
}
.reef-hint.is-hidden { opacity: 0 !important; }
@keyframes reef-hint-in { to { opacity: 1; } }
.reef-hint svg { width: 16px; height: 16px; }

.reef-reset-view {
  position: absolute;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  background: rgba(6, 16, 20, 0.68);
  border: 1px solid rgba(79, 209, 255, 0.18);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 240ms ease, transform 240ms ease, border-color 200ms ease, color 200ms ease;
}
.reef-reset-view.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.reef-reset-view:hover { border-color: rgba(79, 209, 255, 0.45); color: var(--color-text); }
.reef-reset-view svg { width: 14px; height: 14px; }

/* Panel-hide toggle — a small always-tappable button that only ever
   hides/shows the intro copy + vitals panel, nothing else (no wake lock,
   no sound change, no cursor hiding). It only renders when embedded in
   the flagship (html.lv-embedded), because that's the one context where
   the header — and its full ambient-mode toggle — is hidden and there is
   otherwise no way to see the reef unobstructed. Standalone, the header's
   own ambient toggle already covers this. */
.lv-panel-toggle {
  display: none;
}
html.lv-embedded .lv-panel-toggle {
  display: flex;
  position: fixed;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 40;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: rgba(6, 16, 20, 0.72);
  border: 1px solid rgba(79, 209, 255, 0.22);
  color: rgba(214, 245, 240, 0.8);
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.lv-panel-toggle svg { width: 17px; height: 17px; position: absolute; }
.lv-panel-toggle .icon-eye-off { opacity: 0; }
.lv-panel-toggle.is-hidden .icon-eye { opacity: 0; }
.lv-panel-toggle.is-hidden .icon-eye-off { opacity: 1; }
.lv-panel-toggle.is-hidden {
  color: #2fe6c8;
  border-color: #2fe6c8;
  background: rgba(47, 230, 200, 0.16);
}
body.lv-panel-hidden .reef-intro,
body.lv-panel-hidden .reef-panel,
body.lv-panel-hidden .whale-log-rail {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 320ms ease;
}

.reef-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25;
  background: #040d13;
  transition: opacity 600ms ease;
  flex-direction: column;
  gap: var(--space-3);
}
.reef-loading.is-hidden { opacity: 0; pointer-events: none; }
.reef-loading .spinner {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(79, 209, 255, 0.18);
  border-top-color: #2fe6c8;
  animation: reef-spin 900ms linear infinite;
}
.reef-loading p { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint); letter-spacing: 0.05em; text-transform: uppercase; }
@keyframes reef-spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------------- */
/* Whale log rail (left side, scrollable)                                */
/* -------------------------------------------------------------------- */
.whale-log-rail {
  position: absolute;
  top: 26rem;
  left: var(--space-6);
  z-index: 10;
  width: 320px;
  /* Reserve room below for the fixed .reef-hint pill -- without this,
     once enough live whale pulses load in the rail grows to its old cap
     and its last entry sits directly on top of the hint text (confirmed
     by screenshot at 1200px with a mature feed). Same fix as Coin Flow's
     equivalent rail. */
  max-height: calc(100dvh - 26rem - 150px);
  display: flex;
  flex-direction: column;
  background: rgba(6, 16, 20, 0.6);
  border: 1px solid rgba(79, 209, 255, 0.14);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.rail-header {
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: 1px solid rgba(79, 209, 255, 0.12);
  flex: none;
}
.rail-title {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9fd8cf;
}
.rail-sub {
  display: block;
  margin-top: var(--space-1);
  font-size: 11px;
  color: var(--color-text-faint);
  line-height: 1.5;
}
.rail-list {
  overflow-y: auto;
  padding: var(--space-3) var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  scrollbar-width: thin;
  scrollbar-color: rgba(79, 209, 255, 0.25) transparent;
}
.rail-list::-webkit-scrollbar { width: 6px; }
.rail-list::-webkit-scrollbar-thumb { background: rgba(79, 209, 255, 0.25); border-radius: var(--radius-full); }

.rail-empty {
  padding: var(--space-6) var(--space-3);
  text-align: center;
  color: var(--color-text-muted);
}
.rail-empty svg { width: 34px; height: 34px; margin: 0 auto var(--space-3); color: rgba(79, 209, 255, 0.4); }
.rail-empty p { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.rail-empty-sub { font-size: var(--text-xs); color: var(--color-text-faint); line-height: 1.6; max-width: 30ch; margin: 0 auto; }

.whale-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.02);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: var(--transition-interactive);
  animation: whale-item-in 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.whale-item:hover {
  background: rgba(47, 230, 200, 0.08);
  border-color: rgba(47, 230, 200, 0.28);
}
@keyframes whale-item-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.whale-item-glow {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.whale-item-glow.xrp {
  background: radial-gradient(circle, rgba(47, 230, 200, 0.9), rgba(47, 230, 200, 0.15));
  box-shadow: 0 0 14px rgba(47, 230, 200, 0.5);
  color: #04211c;
}
.whale-item-glow.stablecoin {
  background: radial-gradient(circle, rgba(185, 139, 255, 0.9), rgba(185, 139, 255, 0.15));
  box-shadow: 0 0 14px rgba(185, 139, 255, 0.5);
  color: #1c1230;
}
.whale-item-body { flex: 1; min-width: 0; }
.whale-item-amount {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #eafffb;
  white-space: nowrap;
}
.whale-item-meta {
  font-size: 11px;
  color: var(--color-text-faint);
  margin-top: 2px;
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.whale-item-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(185, 139, 255, 0.35);
  color: #d8c4ff;
  background: rgba(185, 139, 255, 0.08);
}

/* -------------------------------------------------------------------- */
/* Whale detail popover                                                  */
/* -------------------------------------------------------------------- */
.whale-detail {
  position: fixed;
  z-index: 40;
  max-width: 320px;
  background: rgba(8, 18, 23, 0.92);
  border: 1px solid rgba(47, 230, 200, 0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 50px rgba(47, 230, 200, 0.1);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  top: 50%;
  left: 50%;
  margin-top: -80px;
  margin-left: -160px;
}
.whale-detail.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.whale-detail-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 26px; height: 26px;
  color: var(--color-text-faint);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.whale-detail-close:hover { color: var(--color-text); background: rgba(255, 255, 255, 0.06); }
.whale-detail-close svg { width: 16px; height: 16px; }
.whale-detail-body .wd-kind {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}
.whale-detail-body .wd-amount {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: #eafffb;
  margin-bottom: var(--space-3);
}
.whale-detail-body .wd-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-xs);
  padding: var(--space-2) 0;
  border-top: 1px solid rgba(79, 209, 255, 0.10);
  color: var(--color-text-muted);
}
.whale-detail-body .wd-row:first-of-type { border-top: none; }
.whale-detail-body .wd-row .wd-val {
  font-family: var(--font-mono);
  color: var(--color-text);
  text-align: right;
  word-break: break-all;
  max-width: 190px;
}
.whale-detail-body .wd-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: #2fe6c8;
  text-decoration: none;
  border: 1px solid rgba(47, 230, 200, 0.3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  transition: var(--transition-interactive);
}
.whale-detail-body .wd-link:hover { background: rgba(47, 230, 200, 0.12); border-color: #2fe6c8; }

/* -------------------------------------------------------------------- */
/* Toast — new pulse announcement                                        */
/* -------------------------------------------------------------------- */
.reef-toast {
  position: absolute;
  top: var(--space-6);
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 20;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: #eafffb;
  background: rgba(8, 22, 26, 0.85);
  border: 1px solid rgba(47, 230, 200, 0.4);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  box-shadow: 0 0 30px rgba(47, 230, 200, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease, transform 400ms ease;
  white-space: nowrap;
}
.reef-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* -------------------------------------------------------------------- */
/* Sources footer                                                        */
/* -------------------------------------------------------------------- */
.reef-sources {
  padding: var(--space-8) var(--space-6) var(--space-16);
  max-width: var(--content-default);
  margin: 0 auto;
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  line-height: 1.7;
  border-top: 1px solid var(--color-divider);
  background: #050f1e;
}
.reef-sources a { color: var(--color-text-muted); }
.reef-sources strong { color: var(--color-text-muted); }
/* Same embed-only fix as aurora.css/globe.css: unreachable by scroll inside
   the flagship's cropped iframe, but still keyboard-tabbable — hide it in
   embed mode so Tab can't jump into content no mouse user could ever see. */
.lv-embedded .reef-sources { display: none; }

/* -------------------------------------------------------------------- */
/* Responsive                                                            */
/* -------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .whale-log-rail { display: none; }
}

@media (max-width: 900px) {
  .reef-header { grid-template-columns: 1fr auto; }
  .reef-header .site-pills { grid-column: 1 / -1; order: 3; justify-self: center; flex-basis: 100%; }
  .reef-header .reef-nav { grid-column: 2; order: 2; }
  .reef-header .brand { order: 1; }
}

/* .reef-sound-hint is a centered floating pill that has to squeeze into the
   gap between the fixed-width .reef-intro column (left) and the fixed-width
   .reef-panel (right, top: 64px, ~300px tall). That gap only stays wider
   than the pill itself above ~1040px; narrower than that the pill's edges
   run under .reef-panel's title/stats (confirmed visually: the pill covers
   "REEF VITALS" and the top stat row at 900px). Below 760px .reef-panel
   relocates to the bottom of the screen (see the max-width:760px block),
   which is why the mobile hint variant is safe again down there. So this
   is the one range with no safe rectangle for a decorative hint -- hide it
   rather than let it clip live data; the sound-toggle button itself stays
   fully visible and discoverable via its own icon + title tooltip. */
/* Range extends to 1090px (not just 1040px) to also cover a second,
   narrower wrap window at ~1081-1085px where .site-pills breaks off
   just its last pill onto a 2nd row before the full 2-line wrap kicks
   in below 970px -- confirmed by direct measurement (header height
   120.5px at 1082-1084px, vs. ~72px everywhere else above 1040px). */
@media (min-width: 761px) and (max-width: 1090px) {
  .reef-sound-hint { display: none; }
}

/* .reef-panel itself has the same problem the comment above documents for
   the sound-hint pill: its base top:64px (var(--space-16)) assumes a
   single-line header, but the header wraps to two lines (measured up to
   117.5px tall) once the nav pills run out of room, starting around
   960px. Confirmed by screenshot at 900px: the wrapped "World Ledger" /
   "Coin Flow" pills sit directly on top of the panel's title and first
   stat row. Reuse the same 761-1040 range as the sound-hint fix above for
   consistency, even though wrapping itself only starts at ~960 -- moving
   the panel down slightly early is harmless. */
@media (min-width: 761px) and (max-width: 1090px) {
  .reef-panel { top: 134px; }
}

@media (max-width: 760px) {
  .reef-header { align-items: flex-start; padding: var(--space-3) var(--space-4); row-gap: var(--space-2); }
  .reef-nav { width: auto; justify-content: flex-end; gap: var(--space-2); }
  .reef-panel { top: auto; bottom: var(--space-6); right: var(--space-4); left: var(--space-4); width: auto; }
  /* On mobile the intro copy has no room to sit beside the reef, so it has
     to overlay it directly — pointer-events:auto (overriding the desktop
     none) lets a tap on it fire the tap-to-hide handler in reef.js instead
     of silently falling through to the canvas underneath. */
  /* top was 9.5rem (152px), enough to clear the header at 760-480px
     (measured 92-126px tall) but not at the narrowest phones where it
     wraps to 4 lines (measured 160px at 320px) -- confirmed by screenshot,
     the eyebrow text sitting under the wrapped "Coin Flow" pill. Raised to
     clear the worst case with margin, matching the equivalent fix on the
     Globe concept page. */
  .reef-intro { left: var(--space-4); right: var(--space-4); top: 190px; max-width: none; pointer-events: auto; cursor: pointer; }
  .reef-intro .overlay-hide-hint { display: flex; }
  .reef-hint { display: none; }
  .reef-reset-view { display: none; }
  .reef-sound-hint { top: 166px; font-size: 10px; padding: 6px var(--space-4); white-space: nowrap; }
  .reef-sound-hint .full { display: none; }
  .reef-sound-hint .short { display: inline; }
  .whale-detail { left: var(--space-4) !important; right: var(--space-4); margin-left: 0; width: auto; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reef-caustics { animation: none; }
}

/* -------------------------------------------------------------------- */
/* Embedded mode — this page nested as one act inside the flagship's    */
/* single scroll journey (index.html). Hides the logo + cross-page pill */
/* nav (redundant inside the flagship's own header), keeps this act's    */
/* own sound/ambient toggle so it still feels alive on its own.          */
/* -------------------------------------------------------------------- */
html.lv-embedded .reef-header {
  /* The flagship page's own header already supplies an equivalent
     global sound toggle, immersive toggle, and live-status badge --
     keeping this page's own header visible too would show two of
     each control on screen at once near the top of this act, the
     clearest possible tell that this is four pages stitched
     together rather than one converged experience. Audio unlock
     and mute/duck are already driven by postMessage from the
     parent (see embed-bridge.js), so hiding this header loses no
     functionality inside the flagship. */
  display: none !important;
}