/* =====================================================================
   Lake Sentry — shared custom CSS
   ---------------------------------------------------------------------
   Most styling is done with Tailwind classes in the HTML. This file
   holds what's easier in plain CSS:
     1. Base page + accessibility helpers (focus ring, skip link)
     2. Lake-themed animations: waves, bubbles, shimmering light,
        click ripples, scroll reveals, gradient text
     3. Pieces used by the App page (map, placeholders)
     4. Reduced-motion rules
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. THEME COLOURS (light / dark mode)
   The palette is built from the logo's blue (#00279C): in light mode
   it is the main accent as-is, and in dark mode a lighter tint of it.
   Each colour is stored as "R G B" numbers so Tailwind can add
   transparency (e.g. bg-ink/80). tailwind-config.js maps class names
   like `text-aqua` to these variables. To tweak a colour, change it
   here — for both themes.
   --------------------------------------------------------------------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --ink: 4 7 19;          /* #040713 page background */
  --deep: 11 19 48;       /* #0B1330 */
  --deep2: 15 28 66;      /* #0F1C42 */
  --panel: 19 31 66;      /* #131F42 cards */
  --panel2: 24 37 72;     /* #182548 */
  --aqua: 128 158 255;    /* #809EFF  main accent: a light tint of the logo blue */
  --reef: 90 200 250;     /* #5AC8FA  sky blue (water highlights) */
  --mint: 60 232 160;     /* #3CE8A0 */
  --sun: 255 193 99;      /* #FFC163 */
  --coral: 255 122 138;   /* #FF7A8A */
  --onaccent: 4 18 46;    /* dark text on bright buttons */
  --txt1: 251 253 255;
  --txt2: 222 231 247;
  --txt3: 172 188 220;
  --line: rgba(148, 196, 255, 0.16);
  --linehi: rgba(148, 196, 255, 0.34);
  --focus: #FDE047;       /* keyboard focus ring */
  --headline-from: #FFFFFF; /* start/end colour of the shimmering headlines */
  --glow: 128 158 255;    /* card hover glow */
}
[data-theme="light"] {
  color-scheme: light;
  --ink: 243 247 250;     /* #F3F7FA */
  --deep: 232 240 246;    /* #E8F0F6 */
  --deep2: 221 232 241;   /* #DDE8F1 */
  --panel: 255 255 255;
  --panel2: 255 255 255;
  --aqua: 0 39 156;       /* #00279C  the logo blue */
  --reef: 0 100 154;      /* #00649A  sky blue */
  --mint: 6 100 66;       /* #066442 */
  --sun: 134 64 4;        /* #864004 */
  --coral: 180 22 58;     /* #B4163A */
  --onaccent: 255 255 255; /* white text on the darker buttons */
  --txt1: 11 19 48;
  --txt2: 28 40 66;
  --txt3: 62 76 104;
  --line: rgba(15, 40, 80, 0.14);
  --linehi: rgba(15, 40, 80, 0.3);
  --focus: #0B1330;
  --headline-from: #00279C;
  --glow: 0 39 156;
}

/* Smoothly fade colours when the theme changes */
.theme-fade,
.theme-fade * {
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease !important;
}

/* ---------------------------------------------------------------------
   1. BASE
   --------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem; /* room for the sticky header when jumping to #anchors */
}
body {
  background: rgb(var(--ink));
  color: rgb(var(--txt2));
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection {
  background: rgb(var(--aqua));
  color: rgb(var(--ink));
}

/* Pages with a sticky tab bar need more room when jumping to #anchors */
html:has([data-tabs]) {
  scroll-padding-top: 9.5rem;
}
/* Hide the scrollbar on the swipeable tab bar (it still scrolls) */
[data-tabs]::-webkit-scrollbar {
  display: none;
}

/* The `hidden` attribute always wins, even over Tailwind's `flex`/`grid`. */
[hidden] {
  display: none !important;
}

/* Visible keyboard focus (WCAG 2.4.7): a thick bright-yellow ring that
   stands out against every dark background on the site. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* "Skip to main content" link (WCAG 2.4.1) — appears when tabbed to. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: #FDE047;
  color: #040713;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: top 0.15s ease;
}
/* Anything on top of the (always blue) lake gets a two-tone ring —
   dark inside, yellow outside — so it shows on light and dark alike. */
#hero :focus-visible {
  outline-color: #FDE047;
  box-shadow: 0 0 0 3px #0B1330;
}

.skip-link:focus {
  top: 1rem;
}

/* The logo comes in two colours. Dark mode shows the light one and
   light mode shows the blue one. (logo-light.png / logo-blue.png) */
.logo-for-light { display: none; }
[data-theme="light"] .logo-for-light { display: block; }
[data-theme="light"] .logo-for-dark { display: none; }

/* Small mono "eyebrow" label above headings, with a short aqua line. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--aqua));
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* ---------------------------------------------------------------------
   2. ANIMATIONS
   --------------------------------------------------------------------- */

/* Scroll progress bar across the top of the page */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  height: 3px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgb(var(--aqua)), rgb(var(--reef)), rgb(var(--mint)));
}

/* Headline text with a slowly moving "light on water" gradient */
.gradient-text {
  background: linear-gradient(110deg, var(--headline-from) 20%, rgb(var(--aqua)) 40%, rgb(var(--reef)) 55%, rgb(var(--mint)) 70%, var(--headline-from) 90%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 9s ease-in-out infinite alternate;
}
@keyframes shimmer {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* Fade-and-rise when a section scrolls into view (site.js adds .is-visible) */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(.2,.7,.3,1), transform 0.8s cubic-bezier(.2,.7,.3,1);
  transition-delay: var(--delay, 0s);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* If JavaScript is off, never hide content */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* Animated waves between sections (the SVG is added by site.js).
   Each wave layer is twice as wide as the screen and slides left
   forever, so it looks like an endless rolling wave. */
.wave-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 70px;
  overflow: hidden;
  pointer-events: none;
  line-height: 0;
}
.wave-divider svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
}
.wave-divider .wave-back {
  opacity: 0.45;
  animation: wave-slide 18s linear infinite;
}
.wave-divider .wave-front {
  animation: wave-slide 11s linear infinite reverse;
}
@keyframes wave-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Rising bubbles (the spans are added by site.js into [data-bubbles]) */
.bubble {
  position: absolute;
  bottom: -20px;
  border-radius: 50%;
  border: 1px solid rgb(var(--glow) / 0.45);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.45), rgb(var(--glow) / 0.08) 60%);
  pointer-events: none;
  animation: bubble-rise linear infinite;
}
@keyframes bubble-rise {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  10%  { opacity: 0.9; }
  50%  { transform: translate(14px, -45vh) scale(1); }
  90%  { opacity: 0.6; }
  100% { transform: translate(-10px, -95vh) scale(1.1); opacity: 0; }
}

/* Shimmering underwater light ("caustics") for section backgrounds */
.caustics {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background:
    radial-gradient(40% 30% at 20% 30%, rgb(var(--glow) / 0.10), transparent 70%),
    radial-gradient(35% 25% at 80% 20%, rgb(var(--reef) / 0.09), transparent 70%),
    radial-gradient(30% 30% at 60% 80%, rgb(var(--glow) / 0.10), transparent 70%);
  background-size: 180% 180%;
  animation: caustics 22s ease-in-out infinite alternate;
}
@keyframes caustics {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%; }
  50%  { background-position: 60% 40%, 40% 60%, 20% 30%; }
  100% { background-position: 100% 100%, 0% 100%, 80% 0%; }
}

/* Ripple rings where you click anywhere on the page (added by site.js) */
.click-ripple {
  position: fixed;
  z-index: 70;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid rgb(var(--glow) / 0.8);
  pointer-events: none;
  animation: click-ripple 0.9s ease-out forwards;
}
.click-ripple.second {
  animation-delay: 0.15s;
  opacity: 0;
}
@keyframes click-ripple {
  0%   { transform: scale(0.3); opacity: 0.9; }
  100% { transform: scale(5); opacity: 0; }
}

/* Cards that glow like light on water when hovered/focused */
.glow-card {
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.glow-card:hover,
.glow-card:focus-within {
  transform: translateY(-4px);
  border-color: rgb(var(--glow) / 0.55);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25), 0 0 0 6px rgb(var(--glow) / 0.08);
}

/* Gentle bobbing, like something floating */
.float-bob {
  animation: float-bob 6s ease-in-out infinite;
}
@keyframes float-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(-1deg); }
}

/* Animated bars (survey results): width grows when scrolled into view */
[data-bar] {
  width: 0;
  transition: width 1.4s cubic-bezier(.2,.7,.3,1);
}

/* Lake shapes on the map (colours follow the theme) */
.lake-shape {
  fill: rgb(var(--aqua) / 0.55);
  stroke: rgb(var(--aqua));
}
.lake-shape.is-guess {
  fill: rgb(var(--aqua) / 0.2);
  stroke: rgb(var(--txt3));
  stroke-dasharray: 5 4;
}

/* Pulsing ring used on the map for lakes with field notes */
.pulse-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse-ring 2.8s ease-out infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* V1 diagram (About page) */
#v1-diagram .v1-part {
  cursor: pointer;
  transition: opacity 0.25s ease, filter 0.25s ease;
}
#v1-diagram.has-active .v1-part {
  opacity: 0.35;
}
#v1-diagram .v1-part:hover,
#v1-diagram .v1-part.is-active {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgb(var(--glow) / 0.8));
}
.v1-spin {
  animation: v1-spin 6s linear infinite;
}
@keyframes v1-spin {
  to { transform: rotate(360deg); }
}
.v1-belt {
  animation: v1-belt 1s linear infinite;
}
@keyframes v1-belt {
  to { stroke-dashoffset: 22; }
}
/* A bottle riding up the conveyor and dropping into storage */
.v1-bottle {
  animation: v1-bottle 4s ease-in-out infinite;
}
@keyframes v1-bottle {
  0%   { transform: translate(575px, 214px) rotate(36deg); opacity: 0; }
  10%  { opacity: 1; }
  70%  { transform: translate(410px, 96px) rotate(36deg); opacity: 1; }
  85%  { transform: translate(360px, 140px) rotate(90deg); opacity: 1; }
  100% { transform: translate(340px, 160px) rotate(120deg); opacity: 0; }
}

/* ---------------------------------------------------------------------
   3. APP PAGE PIECES
   --------------------------------------------------------------------- */
.img-placeholder {
  background: rgb(var(--panel));
}

.map-lake {
  cursor: pointer;
}
.map-lake .lake-shape {
  transition: fill 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease;
}
.map-lake:hover .lake-shape,
.map-lake:focus-visible .lake-shape,
.map-lake[aria-pressed="true"] .lake-shape {
  fill: rgb(var(--aqua));
  stroke: var(--focus);
  stroke-width: 3;
}
.map-lake:focus-visible {
  outline: none; /* the yellow outline on the lake shape is the focus indicator */
}
.map-lake:focus-visible .lake-label {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
   4. REDUCED MOTION (WCAG 2.3.3)
   Decorative animations stop. The home-page lake keeps moving gently
   (it has its own Pause button).
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gradient-text,
  .wave-divider svg,
  .bubble,
  .caustics,
  .float-bob,
  .pulse-ring,
  .click-ripple,
  .v1-spin,
  .v1-belt,
  .v1-bottle {
    animation: none !important;
  }
  .v1-bottle { transform: translate(470px, 150px) rotate(36deg); }
  .bubble,
  .click-ripple { display: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  [data-bar] { transition: none; }
  .glow-card:hover { transform: none; }
}

/* Big faint background word on the Prevent / Remove / Connect cards.
   It's pure decoration, so the text lives in CSS (screen readers skip it). */
.ghost-word::after {
  content: attr(data-text);
  position: absolute;
  right: 0.5rem;
  bottom: -1.5rem;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 6rem;
  font-weight: 700;
  line-height: 1;
  color: rgb(var(--txt1) / 0.05);
  pointer-events: none;
}

/* =====================================================================
   Easier, friendlier reading (all pages)
   - bigger, airier body text and small print
   - the paragraph right under a heading is a larger "lead"
   - short accent bar under section headings
   - bold words stand out
   ===================================================================== */
main p, main li { line-height: 1.75; }
main .text-sm { font-size: 1rem; line-height: 1.7; }
main .text-xs:not(.font-mono) { font-size: 0.875rem; }
main h1 + p, main h2 + p, main h2 + .reveal + p { font-size: 1.25rem; line-height: 1.7; color: rgb(var(--txt1) / 0.92); }
main h2:not(.sr-only)::after {
  content: ""; display: block; width: 3.5rem; height: 4px; margin-top: 0.9rem; border-radius: 4px;
  background: linear-gradient(90deg, rgb(var(--aqua)), rgb(var(--mint)));
}
main .text-center h2::after, main h2.text-center::after { margin-inline: auto; }
main p strong, main li strong { color: rgb(var(--txt1)); font-weight: 700; }
main p + p { margin-top: 1.1em; }
main section p { max-width: 68ch; }
main .grid p, main .glow-card p, main td, main th { max-width: none; }
.eyebrow { font-size: 0.9rem; }
@media (max-width: 640px) {
  main h1 + p, main h2 + p { font-size: 1.125rem; }
}
main li a, main p a { overflow-wrap: anywhere; }

/* Features an admin has switched off (see features.js) */
html[data-lakedive="off"] [data-feature="lakeDive"] { display: none !important; }

/* Phones: keep the home-page panel short so the lake (and the mini robot) stay visible */
@media (max-width: 639px) { #hero .eyebrow { display: none; } }