/**
 * The sea.
 *
 * Everything in this file is the water the glass panels float on, and the fishing objects
 * that carry the metaphor. The test each element has to pass: would a plumber reading his
 * cost per customer find this helpful or embarrassing? Anything that fails is decoration
 * and does not ship.
 *
 * So: no rope borders, no portholes, no wood grain, no cartoon fish. What is here instead
 * is drawn from real nautical instruments — depth soundings, a horizon, a compass rose,
 * swell lines, a net mesh. Quiet enough to live behind data for 90 days.
 */

/* ═══ The water ════════════════════════════════════════════════════════════ */

body {
  background: var(--water);
  background-attachment: fixed;
}

/* Soundings: the depth rules ruled across a nautical chart. Fixed, so the glass
   panels slide over them as you scroll and you can see the water through the glass. */
.sea-soundings {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 63px, var(--sounding) 63px 64px
  );
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 72%, transparent);
}

/* Light from the surface. A slow, very low-contrast drift — the only ambient motion
   in the product, and it stops entirely under reduced-motion.
 *
 * PERFORMANCE, learned the hard way: this originally carried filter: blur(28px) while
 * animating, which measured 2fps on the marketing page. Animating an element that has a
 * large blur filter makes the browser re-rasterise the whole blurred surface every single
 * frame, and this surface is 70vh of it.
 *
 * The fix is that the blur was never needed. Radial gradients with wide, soft falloffs
 * already look like diffuse light — the filter was blurring something that was blurry.
 * Removing it, promoting the layer, and containing it puts this back on the compositor,
 * where a translate costs nothing. Same look, ~60fps.
 */
.sea-caustics {
  position: fixed;
  inset: -20% -10% auto -10%;
  height: 70vh;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background:
    radial-gradient(52% 40% at 22% 18%, rgba(255,255,255,0.46), transparent 78%),
    radial-gradient(48% 36% at 74% 8%,  rgba(120,190,255,0.30), transparent 80%),
    radial-gradient(40% 32% at 52% 30%, rgba(255,255,255,0.24), transparent 82%);
  will-change: transform;
  contain: paint; /* not `strict` — that adds size containment, which this doesn't want */
  animation: drift 34s ease-in-out infinite alternate;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .sea-caustics { opacity: 0.24; }
}
:root[data-theme='dark'] .sea-caustics { opacity: 0.24; }

@keyframes drift {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to   { transform: translate3d(3%, 1.5%, 0) scale(1.07); }
}

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

/* ═══ The swell ════════════════════════════════════════════════════════════ */
/* A waterline across the foot of the licence card. Two offset sine paths, drifting at
   different speeds so they never visibly repeat against each other. */

.swell {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 78px;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  mask-image: linear-gradient(to top, #000 42%, transparent);
}
.swell svg {
  position: absolute; bottom: -6px; left: 0; width: 240%; height: 100%;
  will-change: transform;
}
.swell__back  { fill: rgba(120, 180, 240, 0.16); animation: swell-a 19s linear infinite; }
.swell__front { fill: rgba(120, 180, 240, 0.10); animation: swell-b 27s linear infinite; }

@keyframes swell-a { from { transform: translateX(0); }      to { transform: translateX(-50%); } }
@keyframes swell-b { from { transform: translateX(-50%); }   to { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .swell__back, .swell__front { animation: none; }
}

/* ═══ Watermarks ═══════════════════════════════════════════════════════════ */
/* Nautical objects embossed into a panel rather than sitting on top of it. Always
   behind the content, always under 8% opacity, never inside a data region. */

.watermark {
  position: absolute;
  pointer-events: none;
  color: currentColor;
  opacity: 0.055;
}
.watermark--compass { top: -26px; right: -26px; width: 190px; height: 190px; }
.watermark--anchor  { bottom: 6px; right: 14px; width: 128px; height: 128px; opacity: 0.07; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .watermark { opacity: 0.075; }
}
:root[data-theme='dark'] .watermark { opacity: 0.075; }

/* ═══ The net ══════════════════════════════════════════════════════════════ */
/* Used by the Bite Log: a mesh that visibly fills as customers are logged. The fill is
   driven by --net-fill (0 to 1) so the same markup serves an empty net and a full one. */

.net-mesh {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background-image:
    repeating-linear-gradient( 45deg, transparent 0 13px, var(--glass-line) 13px 14px),
    repeating-linear-gradient(-45deg, transparent 0 13px, var(--glass-line) 13px 14px);
}
.net-mesh::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--net-fill, 0) * 100%);
  background: linear-gradient(180deg, rgba(26,107,255,0.22), rgba(26,107,255,0.10));
  border-top: 2px solid var(--blue);
  transition: height var(--dur-slow) var(--ease-spring);
}

/* ═══ Depth badge ══════════════════════════════════════════════════════════ */
/* Small chart-style tick used beside section headings, so a heading reads like a
   marked depth on a chart rather than a plain label. */

.depth-tick {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-subtle);
}
.depth-tick::before {
  content: '';
  width: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-subtle));
}

/* Development-only banner marking fixture data. Never renders in production — data.js
   empties rather than falling back, so a Captain can never be shown another boat's numbers. */
.demo-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 999;
  padding: 6px 14px;
  font: 500 12px/1.4 var(--font-ui, system-ui); letter-spacing: .02em;
  text-align: center; color: #3a2c00;
  background: linear-gradient(180deg, #ffd77a, #ffc94d);
  box-shadow: 0 1px 6px rgb(0 0 0 / .18);
}