/* =============================================================================
   glass.css — the harbor-sky backdrop + the ink that sits on it.

   SINGLE SOURCE OF TRUTH. Every page links this, so the backdrop is byte-identical
   on index / building / 404 and does NOT change when you navigate or open an
   overlay. Load it AFTER each page's inline <style> so these rules win.

   One sky, one image: sky/wallpaper.webp is the harbor painting with its own
   sky extended upward IN THE IMAGE (matched grain, seam blended, the painting's
   clouds composited into the upper blue). It cover-fills the viewport, anchored
   62% bottom, and NOTHING moves — no drift, no parallax, like a real wallpaper.
   There are NO panes: type sits straight on the sky with a soft navy halo.
   The Claude modal is the one flat surface.
   ========================================================================== */

/* the page's own ground colour matches the sky, so any frame the browser paints
   before the plate (navigation, slow decode) is the right colour — no flash */
body { background-color: #3d7cb4; }

/* ---- the backdrop: sky extension + drifting painted clouds + panorama ---- */
.bg-plate,
.bg-scrim {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bg-plate {
  /* deeper zenith up top, then flat at the painting's top-edge blue */
  background: linear-gradient(180deg, #2e6da9 0%, #3f80b7 35%, #488bc0 65%, #488bc0 100%);
  opacity: 0;                       /* faded in on load — see the page script */
  transition: opacity 1s ease;
}
body.bg-ready .bg-plate { opacity: 1; }

/* the wallpaper: one baked image, cover-fit, anchored to the harbor (62% bottom).
   Static by design — the user wants a wallpaper, not weather. */
.bg-pan {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.bg-pan img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% bottom;
  opacity: 0;
  transition: opacity 1.2s ease;
}
body.bg-ready .bg-pan img { opacity: 1; }
html.bg-instant .bg-plate,
html.bg-instant .bg-pan img { opacity: 1; transition: none; }

  .cp-3 { display: none; }
}

/* Just enough navy vignette to seat the type and stop the edges glaring */
.bg-scrim {
  background:
    radial-gradient(122% 88% at 70% 16%, rgba(6,46,92,0) 0%, rgba(6,46,92,0.05) 58%, rgba(6,46,92,0.18) 100%),
    linear-gradient(180deg, rgba(6,46,92,0.28) 0%, rgba(6,46,92,0.04) 30%, rgba(6,46,92,0.05) 62%, rgba(6,46,92,0.22) 100%);
}

/* real content rides above the backdrop */
.site-header,
.page { position: relative; z-index: 2; }

/* Arrow glyphs: neither the JetBrains Mono subset nor the Inter subsets ship U+2190/U+2192,
   so render them from a stable system stack rather than whatever the OS substitutes.
   Lives here so every page gets it (404's "← back to start" needs it too). */
.arw {
  font-style: normal;
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* backdrop fade AND cloud drift must respect a reduced-motion preference on EVERY
   page, including 404 which has no global motion guard of its own */
@media (prefers-reduced-motion: reduce) {
  .bg-plate, .bg-scrim, .glass, .bg-pan img { transition: none; }
}

/* ---- no material: ink straight on the sky ----
   The .glass class survives in the markup purely as the ink scope: it re-tunes
   the type tokens for the blue ground. A soft navy halo keeps type legible where
   a painted cloud drifts underneath. */
.glass,
.st-backdrop {
  --fg: #f8f7f2;
  --dim: #e7ecf4;
  --dimmer: #c3d2e6;
  --accent: #f4efdf;                 /* cream — same family as the painted clouds */
  --accent-rgb: 244, 239, 223;
  --line: rgba(255, 255, 255, 0.28);
  --line-strong: rgba(255, 255, 255, 0.44);
}
.glass {
  background: none;
  border: 0;
  box-shadow: none;
  /* three layers: contact shadow, tight bloom (carries small mono type across
     the painting's white clouds), and a wide soft seat */
  text-shadow:
    0 1px 2px rgba(10, 35, 66, 0.55),
    0 0 7px rgba(10, 35, 66, 0.60),
    0 2px 20px rgba(10, 35, 66, 0.45);
}

/* The name is cut into the sky rather than sitting on it.

   The sky behind this line measures luminance 0.213, from 0.184 in the
   shadowed blue up to 0.278 on the bright clouds. A recess receives less light
   than its surface, so the ink has to sit below that range: at cream, 0.93, it
   was about three and a half times brighter than the sky and read as raised no
   matter what the lips did.

   The lit lip is a brighter SKY, never white. White is not this surface, so it
   can only read as a glow. That one substitution is most of the effect.

   The gradient gives the stroke depth down its length, as though the groove
   deepens toward the foot. Fallback below for anything without
   background-clip: text, where transparent ink would be invisible ink. */
.glass h1 { color: rgba(12, 34, 60, 0.94); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .glass h1 {
    color: transparent;
    background-image: linear-gradient(165deg,
      rgba(20, 50, 86, 0.88) 0%,
      rgba(8, 26, 48, 0.97) 54%,
      rgba(18, 46, 80, 0.90) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    text-shadow:
      0 1px 0 rgba(168, 210, 245, 0.85),
      0 -1px 0 rgba(2, 10, 22, 0.50);
  }
}

/* ---- per-surface ---- */

/* header: floating nav, no bar (building/404 still carry the old header) */
.site-header.glass {
  border: 0;
  background: none;
  box-shadow: none;
}

/* the memories chip keeps a hairline outline (it is a button), nothing else */
.st-label.glass {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: none;
  box-shadow: none;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.st-label.glass:hover { border-color: var(--line-strong); }
@media (max-width: 700px) {
  /* on a phone the chip floats over real text, so it needs a flat fill */
  .st-label.glass { background: rgba(6, 28, 58, 0.88); }
}

/* ---- OVERLAYS: flat deep-navy plates (no blur, no glass) ---- */
.st-backdrop {
  background: rgba(5, 26, 54, 0.93) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: 0 1px 2px rgba(4, 20, 42, 0.50);
}

.cc-backdrop {
  background: rgba(5, 26, 54, 0.78);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* the modal is the one true surface left: a flat navy card, hairline edge */
.cc-modal.glass {
  background: #0a2f5e;
  border: 1px solid rgba(255, 255, 255, 0.20);
  box-shadow: 0 34px 80px -38px rgba(3, 16, 34, 0.80);
}