/* Shared water scene for bluehorns.dev (Homebrew Channel style: white sky, side-view water) */

:root {
  --sky: #f6f7ff;
  --ink: #141a52;
  --ink-soft: #4a5390;
  --brand: #4f64f0;
  --crest: #5b6ff2;
  --deep: #2f3fb5;
  --back: #93a1f8;
  --foam: #eef1ff;
  --water-top: 48svh;
  --display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --text: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body.deep { --water-top: 34svh; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  min-height: 100svh;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.5;
  background: linear-gradient(180deg, #ffffff 0%, var(--sky) 55%, #e8ebff 100%);
  background-color: var(--sky);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- water layers
   Each layer is its own fixed element so the headline can sit between them. */

.layer { position: fixed; left: 0; right: 0; bottom: 0; pointer-events: none; overflow: hidden; }
.layer.back  { top: calc(var(--water-top) - 22px); z-index: 1; }
.layer.front { top: var(--water-top); z-index: 3; opacity: 0.84; }

.crest {
  position: absolute; top: 0; left: 0;
  width: 200%; height: 140px;
  animation: drift linear infinite;
}
.layer .body { position: absolute; top: 139px; left: 0; right: 0; bottom: 0; }

.back .crest { fill: var(--back); animation-duration: 17s; animation-direction: reverse; }
.back .body { background: var(--back); }

.front .crest { animation-duration: 12s; }
.front .crest .fill { fill: var(--crest); }
.front .crest .streak { fill: none; stroke: rgba(255, 255, 255, 0.24); stroke-width: 6; stroke-linecap: round; }
.front .crest .streak.thin { stroke: rgba(255, 255, 255, 0.16); stroke-width: 3; }
.front .body { background: linear-gradient(180deg, var(--crest) 0%, var(--brand) 35%, var(--deep) 100%); }

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

/* ---------------------------------------------------------------- bubbles (made by ocean.js) */

.bubbles { position: absolute; top: 70px; left: 0; right: 0; bottom: 0; overflow: hidden; }
.bubble { position: absolute; bottom: -40px; animation: rise linear infinite; }
.bubble i {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.75) 0 14%, rgba(255, 255, 255, 0.3) 16% 100%);
  animation: wobble ease-in-out infinite alternate;
}
.bubble.ring i { background: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); }
.bubble.once { animation-iteration-count: 1; }

@keyframes rise {
  0%   { transform: translateY(0); opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(var(--rise, -60vh)); opacity: 0; }
}
@keyframes wobble { from { transform: translateX(-5px); } to { transform: translateX(5px); } }

/* ---------------------------------------------------------------- header */

.site-header { position: relative; z-index: 5; display: flex; align-items: center; padding: 18px 16px; }
@media (min-width: 700px) { .site-header { padding: 22px 32px; } }

.brand {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--ink); text-decoration: none;
  font-weight: 650; font-size: 1.05rem;
  border-radius: 10px; padding: 4px 8px 4px 4px;
}
.brand img { width: 40px; height: 40px; border-radius: 8px; image-rendering: pixelated; box-shadow: 0 4px 14px rgba(79, 100, 240, 0.3); }

/* ---------------------------------------------------------------- home: WIP floating on the surface */

.float {
  position: fixed; left: 0; right: 0; z-index: 2;
  top: calc(var(--water-top) + 48px);
  margin: 0; text-align: center;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(6rem, 24vw, 16rem);
  line-height: 0.9; letter-spacing: -0.02em;
  color: var(--ink);
  transform: translateY(-74%);
  animation: bob 4.5s ease-in-out infinite;
  user-select: none;
}
@keyframes bob {
  0%, 100% { transform: translateY(-74%) rotate(-1.2deg); }
  50%      { transform: translateY(-66%) rotate(1deg); }
}

.below {
  position: fixed; left: 0; right: 0; z-index: 4;
  bottom: 14svh;
  margin: 0; padding: 0 16px; text-align: center;
  color: var(--foam);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  text-wrap: balance;
}

/* ---------------------------------------------------------------- 404: sunk to the bottom */

.sky {
  position: fixed; left: 0; right: 0; z-index: 4;
  top: 76px; height: calc(var(--water-top) - 76px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  padding: 0 16px; text-align: center;
}
.sky p { margin: 0; max-width: 32ch; color: var(--ink-soft); font-size: clamp(1.05rem, 2.2vw, 1.25rem); text-wrap: balance; }

.swim {
  display: inline-block;
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  color: #fff; background: var(--brand);
  font-weight: 650; text-decoration: none;
  box-shadow: 0 6px 18px rgba(79, 100, 240, 0.35);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.swim:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(79, 100, 240, 0.45); }

.sunk {
  position: fixed; left: 0; right: 0; z-index: 2;
  bottom: 5svh;
  margin: 0; text-align: center;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(5rem, 22vw, 14rem);
  line-height: 0.9;
  color: var(--ink);
  filter: url(#refract);
  animation: rock 6s ease-in-out infinite alternate;
  user-select: none;
}
@keyframes rock { from { transform: rotate(-2deg) translateY(-3px); } to { transform: rotate(-0.5deg) translateY(3px); } }

a:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

/* ---------------------------------------------------------------- calm mode */

@media (prefers-reduced-motion: reduce) {
  .crest, .float, .sunk, .bubble, .bubble i { animation: none !important; }
  .bubbles { display: none; }
  .sunk { filter: none; }
}