/* =====================================================================================================
   Noah's Ark · HUD kit
   The interface style for every interactive (3D) page of the site: glass panels over the scene, paper
   text, ochre accent. Lifted from Animals of the Ark, which inherits it from the three.js procedural
   animals showcase (MIT, Majid Manzarpour). Do not invent new styling here: add components only by
   generalising ones the showcase already has. See docs/ui-kit.md.
   Fonts: <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap">
   ===================================================================================================== */
:root {
  --ink: rgba(20,17,13,.7);          /* glass panel fill */
  --ink-strong: rgba(20,17,13,.82);  /* menus and popovers that sit over other glass */
  --ink-solid: #14110d;              /* text on paper or ochre */
  --paper: #f3ebdd;                  /* main text; pressed segment */
  --dust: #b3a58d;                   /* secondary text, labels */
  --ochre: #e3a23b;                  /* accent: on state, focus, live values */
  --ochre-dim: rgba(227,162,59,.16); /* selected item fill */
  --line: rgba(243,235,221,.14);     /* hairlines and borders */
  /* active fills: the paper and ochre, lit from above (a soft top highlight, a darker foot) */
  --paper-fill: linear-gradient(180deg, #fffaf0 0%, #f3ebdd 48%, #ddd0b8 100%);
  --ochre-fill: linear-gradient(180deg, #f7c46a 0%, #e8a940 46%, #cf8a24 100%);
  --paper-lift: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(90,70,40,.18), 0 1px 3px rgba(0,0,0,.35);
  --ochre-lift: inset 0 1px 0 rgba(255,231,180,.7), inset 0 -1px 0 rgba(110,60,5,.35), 0 1px 8px rgba(227,162,59,.28);
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gut: 16px;
  color-scheme: dark;
}

/* ---- the project wordmark: "Noah's Ark" in IM Fell English, used only for the project's own title ----
   (load the font with family=IM+Fell+English; every other heading uses --display) */
.wordmark { font-family: "IM Fell English", "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-weight: 400; font-style: normal; font-size: 44px; line-height: .95; letter-spacing: .005em; color: var(--paper); }

/* ---- base ---- */
.hud, .hud * { box-sizing: border-box; }
.hud { font-family: var(--ui); color: var(--paper); -webkit-font-smoothing: antialiased; }
.hud button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hud button:focus-visible, .hud input:focus-visible, .hud select:focus-visible, .hud a:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }
.hud button:disabled { opacity: .4; cursor: default; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 120% 95% at 50% 45%, transparent 55%, rgba(10,8,5,.42) 100%); }

/* ---- glass: every panel, card, dock and button that floats over the scene ---- */
.glass { background: var(--ink); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border: 1px solid var(--line); border-radius: 14px; }

/* ---- title card (top left): eyebrow, display title, sub line, status, stats ---- */
.title-card { padding: 13px 16px 12px; min-width: 230px; max-width: min(330px, calc(100vw - 32px)); }
.eyebrow { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dust); margin-bottom: 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.eyebrow b { color: var(--paper); font-weight: 700; }
.eyebrow a { color: var(--dust); text-decoration: none; border-bottom: 1px solid rgba(179,165,141,.45); letter-spacing: .14em; }
.eyebrow a:hover { color: var(--ochre); border-color: var(--ochre); }
.title-card h1 { font-family: var(--display); font-weight: 400; font-size: 31px; line-height: 1; margin: 0; letter-spacing: .2px; }
.title-card h1 i { color: var(--ochre); }
.title-card h1 .wordmark { display: block; }
.title-card .sub { font-size: 12px; color: var(--dust); margin-top: 6px; line-height: 1.45; }
.status { margin-top: 11px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ochre); box-shadow: 0 0 10px var(--ochre); flex: none; }
.stats { display: flex; gap: 16px; margin-top: 9px; }
.stats > div { display: flex; flex-direction: column; gap: 3px; }
.stats .v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 18px; color: var(--paper); }
.stats .k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dust); }

/* ---- top-right buttons (Menu, Camera, Controls): glass, uppercase, paper when open ---- */
.hud-btn { padding: 10px 14px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.hud-btn[aria-expanded="true"], .hud-btn[aria-pressed="true"] { background: var(--paper-fill); box-shadow: var(--paper-lift); color: var(--ink-solid); }

/* ---- segmented choice: one of several (views, decks, sex, time scale); paper when chosen ---- */
.seg { display: flex; gap: 2px; background: rgba(0,0,0,.25); border-radius: 10px; padding: 3px; }
.seg button { padding: 7px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: rgba(243,235,221,.72); transition: background .15s, color .15s; white-space: nowrap; }
.seg button:hover { color: var(--paper); }
.seg button[aria-pressed="true"] { background: var(--paper-fill); box-shadow: var(--paper-lift); color: var(--ink-solid); }
.seg.full { width: 100%; }
.seg.full button { flex: 1; }

/* ---- pill: an on/off switch button (Autopilot, Cutaway, Flood…); a lit ochre fill when on ---- */
.pill { padding: 8px 13px; border-radius: 10px; font-size: 12.5px; font-weight: 700; border: 1px solid var(--line); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; flex: none; transition: background .15s, color .15s, box-shadow .15s; }
.pill[aria-pressed="true"] { background: var(--ochre-fill); box-shadow: var(--ochre-lift); color: var(--ink-solid); border-color: transparent; }

/* ---- icon switch: a round on/off button whose icon shows the state (Sound: a speaker with waves, or
   struck through); ochre icon and ring when on. Mark the parts .when-on / .when-off ---- */
.icon-switch { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: rgba(0,0,0,.25); color: var(--dust); display: inline-grid; place-items: center; flex: none; transition: color .15s, border-color .15s, box-shadow .15s; }
.icon-switch svg { width: 20px; height: 20px; display: block; }
.icon-switch:hover { color: var(--paper); }
.icon-switch[aria-pressed="true"] { color: var(--ochre); border-color: rgba(227,162,59,.55); box-shadow: 0 0 14px rgba(227,162,59,.22), inset 0 1px 0 rgba(255,231,180,.12); }
.icon-switch .when-on, .icon-switch[aria-pressed="true"] .when-off { display: none; }
.icon-switch[aria-pressed="true"] .when-on { display: inline; }

/* ---- chips: a row of one-shot actions or tags; ochre while active ---- */
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 1px; }
.chips::-webkit-scrollbar { display: none; }
.chip { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; white-space: nowrap; flex: none; transition: background .15s, border-color .15s; }
.chip:hover { border-color: rgba(243,235,221,.4); }
.chip.on { background: var(--ochre); color: var(--ink-solid); border-color: var(--ochre); }
.chips.tags { flex-wrap: wrap; overflow: visible; }
.chips.tags .chip { padding: 4px 9px; font-size: 12px; font-weight: 500; }

/* ---- dock: the glass bar of controls along the bottom; rows of label + controls ---- */
.dock-row { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.dock-row > .lbl { flex: none; padding-left: 4px; }

/* ---- labels, rows and form controls (panels) ---- */
.row { display: flex; flex-direction: column; gap: 6px; }
.lbl, .row > label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dust); display: flex; justify-content: space-between; gap: 8px; }
.lbl output { font-family: var(--mono); letter-spacing: 0; text-transform: none; color: var(--paper); }
.clock { font-family: var(--mono); font-size: 14px; color: var(--ochre); min-width: 5ch; font-variant-numeric: tabular-nums; }
.toggle { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 3px 0; gap: 10px; cursor: pointer; }
.toggle small { display: block; color: var(--dust); font-size: 11px; margin-top: 1px; }
.toggle input { appearance: none; flex: none; width: 34px; height: 20px; border-radius: 20px; background: rgba(255,255,255,.18); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); transition: transform .15s; }
.toggle input:checked { background: var(--ochre); }
.toggle input:checked::after { transform: translateX(14px); }
.hud input[type=range] { accent-color: var(--ochre); margin: 4px 0; cursor: pointer; }
.hud select, .hud input[type=number], .hud input[type=text] { background: rgba(0,0,0,.35); color: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 13px; min-width: 0; }
.btn { padding: 7px 11px; border-radius: 8px; border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.btn:hover { border-color: rgba(243,235,221,.35); }
.btn.primary { background: var(--ochre); color: var(--ink-solid); border-color: var(--ochre); }
.note { font-size: 11.5px; line-height: 1.5; color: var(--dust); margin: 0; }
.note b { color: var(--paper); font-weight: 600; }

/* ---- panel with tabs (Controls) ---- */
.tabs { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--line); flex: none; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { padding: 9px 9px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(243,235,221,.62); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--paper); border-color: var(--ochre); }
.tab { padding: 14px 14px 16px; overflow: auto; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.tab h3 { font-family: var(--display); font-weight: 400; font-size: 19px; margin: 0; }

/* ---- info card: a short explanation over the scene (deck card, animal detail) ---- */
.info-card { padding: 12px 14px 14px; }
.info-card .kicker { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ochre); }
.info-card h2, .info-card h3 { margin: 6px 0 4px; font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1.05; }
.info-card p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(243,235,221,.82); }

/* ---- list items (species, animals menu): a row you pick; ochre-dim when chosen ---- */
.list-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border-radius: 9px; text-align: left; font-size: 13px; }
.list-item:hover { background: rgba(243,235,221,.07); }
.list-item[aria-pressed="true"] { background: var(--ochre-dim); box-shadow: inset 0 0 0 1px rgba(227,162,59,.55); }
.group-label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dust); margin: 8px 0 6px; }

/* ---- the controls hint under the dock ---- */
.hint { font-size: 11px; color: var(--dust); text-align: center; }
.hint kbd { font-family: var(--mono); font-size: 10.5px; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }

/* ---- popover menu (Camera, site Menu): glass under its button ---- */
.popover { position: absolute; right: 0; top: calc(100% + 6px); padding: 12px; display: flex; flex-direction: column; gap: 9px; z-index: 6; background: var(--ink-strong); }

@media (prefers-reduced-motion: reduce) { .seg button, .chip, .toggle input, .toggle input::after { transition: none; } }

/* ---- megabutton: the one big call to action (Enter the Experience) ----
   After William Xu's "Button-Sparke" pen (codepen.io/williamxu66/pen/jOJKXNv), recoloured from violet to
   the kit's ochre: dark brown at rest, molten gold on hover or focus, with a running spark round the edge,
   bouncing sparkle icon and drifting particles. Markup: see docs/ui-kit.md; particles are added by
   megabutton.js (or any script setting --x --y --duration --delay --alpha --origin-x --origin-y --size). */
.megabutton-wrap { position: relative; display: inline-block; --active: 0; --mb-t: .25s; --mb-spark: 1.8s; }
.megabutton-wrap:has(.megabutton:is(:hover, :focus-visible)) { --active: 1; --play-state: running; }
.megabutton {
  --cut: .1em;
  --bg:
    radial-gradient(40% 50% at center 100%, hsl(40 calc(var(--active) * 95%) 72% / var(--active)), transparent),
    radial-gradient(80% 100% at center 120%, hsl(36 calc(var(--active) * 95%) 64% / var(--active)), transparent),
    hsl(32 calc(var(--active) * 72% + 24%) calc((var(--active) * 36%) + 12%));
  background: var(--bg);
  font: 600 1.35rem/1 var(--ui); letter-spacing: .01em;
  border: 0; cursor: pointer; padding: .95em 1.45em .95em 1.25em;
  display: flex; align-items: center; gap: .3em; white-space: nowrap;
  border-radius: 100px; position: relative; isolation: isolate; color: inherit;
  box-shadow:
    0 0 calc(var(--active) * 5em) calc(var(--active) * 2.4em) hsl(38 95% 52% / .55),
    0 .05em 0 0 hsl(36 calc(var(--active) * 90% + 30%) calc((var(--active) * 40%) + 34%)) inset,
    0 -.05em 0 0 hsl(32 calc(var(--active) * 90%) calc(var(--active) * 50% + 6%)) inset;
  transition: box-shadow var(--mb-t), scale var(--mb-t), background var(--mb-t);
  scale: calc(1 + (var(--active) * .08));
}
.megabutton:active { scale: 1; }
.megabutton:focus-visible { outline: none; }
.megabutton::before {
  content: ""; position: absolute; inset: -.25em; z-index: -1; border-radius: 100px;
  border: .25em solid hsl(38 95% 52% / .45); opacity: var(--active); transition: opacity var(--mb-t);
}
.megabutton svg { overflow: visible !important; inline-size: 1.25em; translate: -20% -5%; }
.megabutton .sparkle path {
  color: hsl(38 calc(70% - var(--active) * 30%) calc((1 - var(--active)) * (var(--base) + 26%) + var(--active) * 9%));
  transform-box: fill-box; transform-origin: center; fill: currentColor; stroke: currentColor;
  animation-delay: calc((var(--mb-t) * 1.5) + (var(--delay) * 1s)); animation-duration: .6s; transition: color var(--mb-t);
}
.megabutton:is(:hover, :focus-visible) .sparkle path { animation-name: mb-bounce; }
@keyframes mb-bounce { 35%, 65% { scale: var(--scale); } }
/* the eye icon (data-icon="eye"): lid and iris take the sparkle's colours, and it blinks on hover */
.megabutton .mb-eye { --c: hsl(38 calc(70% - var(--active) * 30%) calc((1 - var(--active)) * 66% + var(--active) * 9%)); transform-origin: center; }
.megabutton .mb-eye .lid { stroke: var(--c); transition: stroke var(--mb-t); }
.megabutton .mb-eye .iris { fill: var(--c); transition: fill var(--mb-t); }
.megabutton .mb-eye .glint { fill: hsl(32 40% calc(12% + (1 - var(--active)) * 4%)); }
.megabutton:is(:hover, :focus-visible) .mb-eye { animation: mb-blink .5s calc(var(--mb-t) * 1.5) ease-in-out; }
@keyframes mb-blink { 40%, 55% { scale: 1 .12; } }
.megabutton .sparkle path:nth-of-type(1) { --scale: .5; --delay: .1; --base: 40%; }
.megabutton .sparkle path:nth-of-type(2) { --scale: 1.5; --delay: .2; --base: 20%; }
.megabutton .sparkle path:nth-of-type(3) { --scale: 2.5; --delay: .35; --base: 30%; }
.megabutton .spark {
  position: absolute; inset: 0; border-radius: 100px; rotate: 0deg; overflow: hidden;
  mask: linear-gradient(white, transparent 50%); -webkit-mask: linear-gradient(white, transparent 50%);
  animation: mb-flip calc(var(--mb-spark) * 2) infinite steps(2, end);
}
@keyframes mb-flip { to { rotate: 360deg; } }
.megabutton .spark::before {
  content: ""; position: absolute; width: 200%; aspect-ratio: 1; top: 0; left: 50%; z-index: -1;
  translate: -50% -15%; transform: rotate(-90deg); opacity: calc(var(--active) + .4);
  background: conic-gradient(from 0deg, transparent 0 340deg, hsl(42 100% 88%) 360deg);
  transition: opacity var(--mb-t); animation: mb-rotate var(--mb-spark) linear infinite both;
}
@keyframes mb-rotate { to { transform: rotate(90deg); } }
.megabutton .backdrop { position: absolute; inset: var(--cut); background: var(--bg); border-radius: 100px; transition: background var(--mb-t); z-index: -1; }
.megabutton .text {
  translate: 2% -4%; letter-spacing: .01ch;
  background: linear-gradient(90deg, hsl(38 45% calc(93% - var(--active) * 85%)), hsl(36 30% calc(66% - var(--active) * 58%)));
  -webkit-background-clip: text; background-clip: text; color: transparent; transition: background var(--mb-t);
}
.megabutton-wrap .particle-pen {
  position: absolute; width: 200%; aspect-ratio: 1; top: 50%; left: 50%; translate: -50% -50%;
  -webkit-mask: radial-gradient(white, transparent 65%); mask: radial-gradient(white, transparent 65%);
  z-index: -1; opacity: var(--active); transition: opacity var(--mb-t); pointer-events: none;
}
.megabutton-wrap .particle {
  width: calc(var(--size, .25) * 1rem); aspect-ratio: 1; position: absolute;
  top: calc(var(--y) * 1%); left: calc(var(--x) * 1%); opacity: var(--alpha, 1);
  animation: mb-float calc(var(--duration, 1) * 1s) calc(var(--delay) * -1s) infinite linear;
  transform-origin: var(--origin-x, 1000%) var(--origin-y, 1000%); animation-play-state: var(--play-state, paused);
}
.megabutton-wrap .particle path { fill: hsl(42 95% 78%); stroke: none; }
.megabutton-wrap .particle:nth-of-type(even) { animation-direction: reverse; }
@keyframes mb-float { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .megabutton .spark, .megabutton .spark::before, .megabutton-wrap .particle, .megabutton:is(:hover, :focus-visible) .sparkle path, .megabutton:is(:hover, :focus-visible) .mb-eye { animation: none; }
}