/* ============================================================
   Skiplash — skiplash.app
   One page, one scene: sky above the fold, waterline, then the
   content lives underwater, down to the copyright on the seabed.
   The palette follows the visitor's local hour (theme.js), the
   same trick the game plays with its persistent world clock.
   ============================================================ */

:root {
  /* Day (default — also what no-JS visitors get) */
  --sky-top: #3d7fc4;
  --sky-mid: #6ea8dd;
  --sky-horizon: #c9e2f2;
  --surface-band: #8fb9d9;
  --water-top: #2e5c8a;
  --water-mid: #1f4269;
  --water-deep: #122c4a;
  --seabed: #0c1f36;
  --accent: #f0785f;
  --ink-shadow: rgba(20, 40, 70, 0.45);
  --stars: 0;
  --gull: 0.8;
  --gull-ink: #2c3a4d;
  --creature-o: 0.45;
}

html[data-sky="dawn"] {
  --sky-top: #3a2f63;
  --sky-mid: #8a5a8f;
  --sky-horizon: #f2a37c;
  --surface-band: #d99a8a;
  --water-top: #4a3f70;
  --water-mid: #2b2f5c;
  --water-deep: #181c3f;
  --seabed: #10132d;
  --accent: #f2a37c;
  --ink-shadow: rgba(40, 25, 60, 0.5);
  --stars: 0.35;
  --gull: 0.6;
  --gull-ink: #2e2740;
  --creature-o: 0.38;
}

html[data-sky="dusk"] {
  --sky-top: #2e2f5e;
  --sky-mid: #7c4a72;
  --sky-horizon: #f2b26a;
  --surface-band: #d9986e;
  --water-top: #3d3a68;
  --water-mid: #262b54;
  --water-deep: #151936;
  --seabed: #0e1128;
  --accent: #f2b26a;
  --ink-shadow: rgba(35, 25, 55, 0.5);
  --stars: 0.25;
  --gull: 0.55;
  --gull-ink: #2a2542;
  --creature-o: 0.36;
}

html[data-sky="night"] {
  --sky-top: #0b1030;
  --sky-mid: #161c42;
  --sky-horizon: #262e58;
  --surface-band: #333c66;
  --water-top: #131a3d;
  --water-mid: #0e1430;
  --water-deep: #080c22;
  --seabed: #05081a;
  --accent: #e0876b;
  --ink-shadow: rgba(0, 5, 20, 0.6);
  --stars: 0.9;
  --gull: 0;
  --gull-ink: #10142c;
  --creature-o: 0.28;
}

/* ---------- base ---------- */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", sans-serif;
  color: #fff;
  background: var(--water-deep);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: #fff; }

a { color: #fff; }

a:focus-visible,
.store-badge:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 4px;
}

/* Every word carries the hour's light — the game's own text treatment:
   near-solid white with a sky-tinted shadow. */
h1, h2, h3, p, li, .tagline, .badge-note {
  text-shadow: 0 2px 14px var(--ink-shadow), 0 1px 2px var(--ink-shadow);
}

/* ---------- sky / hero ---------- */

.sky {
  position: relative;
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(4rem, 10vh, 7rem) 1.5rem 9rem;
  background: linear-gradient(
    to bottom,
    var(--sky-top) 0%,
    var(--sky-mid) 55%,
    var(--sky-horizon) 100%
  );
  overflow: hidden;
  transition: background 1.2s ease;
}

.sky--short { min-height: 46svh; padding-bottom: 7rem; }

/* Stars — only the night and twilight palettes let them through. */
.stars {
  position: absolute;
  inset: 0;
  opacity: var(--stars);
  transition: opacity 1.2s ease;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 18%, #fff 60%, transparent),
    radial-gradient(1px 1px at 22% 9%, rgba(255,255,255,.9) 60%, transparent),
    radial-gradient(1.4px 1.4px at 31% 27%, #fff 60%, transparent),
    radial-gradient(1px 1px at 44% 12%, rgba(255,255,255,.8) 60%, transparent),
    radial-gradient(1.2px 1.2px at 58% 22%, #fff 60%, transparent),
    radial-gradient(1px 1px at 66% 7%, rgba(255,255,255,.85) 60%, transparent),
    radial-gradient(1.5px 1.5px at 74% 30%, #fff 60%, transparent),
    radial-gradient(1px 1px at 83% 14%, rgba(255,255,255,.9) 60%, transparent),
    radial-gradient(1.2px 1.2px at 91% 24%, #fff 60%, transparent),
    radial-gradient(1px 1px at 15% 38%, rgba(255,255,255,.7) 60%, transparent),
    radial-gradient(1px 1px at 51% 40%, rgba(255,255,255,.75) 60%, transparent),
    radial-gradient(1.2px 1.2px at 96% 42%, rgba(255,255,255,.8) 60%, transparent);
  pointer-events: none;
}

/* A distant gull — the game's exact silhouette, and like in-game it's a
   DARK bird against the sky (tone 0.18 tinted toward the zenith), not a
   white mark. Gone after dark. */
.gull {
  position: absolute;
  top: 6%;
  left: 10%;
  width: 26px;
  fill: var(--gull-ink);
  opacity: var(--gull);
  transition: opacity 1.2s ease, fill 1.2s ease;
  pointer-events: none;
}

.gull--far { top: 11%; left: auto; right: 12%; width: 17px; }

.wordmark {
  font-size: clamp(2.6rem, 9vw, 6.5rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-right: -0.14em; /* optically recenter the kerned caps */
  line-height: 1.1;
}

.tagline {
  margin-top: 1.1rem;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  font-weight: 500;
  opacity: 0.95;
  max-width: 34ch;
}

.subline {
  margin-top: 0.9rem;
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  opacity: 0.85;
  max-width: 52ch;
}

/* The skip arcs: three diminishing dotted hops with the stone
   mid-flight on the last one. Pure decoration. */
.skips {
  width: min(420px, 72vw);
  margin-top: 2.6rem;
  opacity: 0.9;
}

/* ---------- store badge ---------- */

.badge-row { margin-top: 2.4rem; }

.store-badge {
  display: inline-block;
  padding: 0.85rem 1.7rem;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: default;
}

a.store-badge { cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; }
a.store-badge:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-1px); }

.badge-note {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  opacity: 0.75;
}

/* ---------- waterline ---------- */

.waterline {
  position: relative;
  height: 90px;
  margin-top: -90px; /* overlap the hero's padding so crests sit on the horizon */
  overflow: hidden;
  pointer-events: none;
}

.waterline svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
}

/* On fractional device pixels (phones), the wave SVGs' rasterized
   bottom edge can round a hair short of the container, letting the
   bright sky behind peek through as an intermittent 1px seam. A solid
   strip of the front wave's own color bridges the boundary — invisible
   by construction, at every hour. */
.waterline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--water-top);
}

.wave-back { fill: var(--surface-band); opacity: 0.65; animation: drift 26s ease-in-out infinite alternate; }
.wave-front { fill: var(--water-top); animation: drift 18s ease-in-out infinite alternate-reverse; }

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

@media (prefers-reduced-motion: reduce) {
  .wave-back, .wave-front { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- underwater ---------- */

.water {
  position: relative;
  background: linear-gradient(
    to bottom,
    var(--water-top) 0%,
    var(--water-mid) 45%,
    var(--water-deep) 100%
  );
  padding: 4.5rem 1.5rem 0;
  transition: background 1.2s ease;
}

.water-inner {
  max-width: 960px;
  margin: 0 auto;
}

.water section + section { margin-top: 4.5rem; }

/* Everything below the waterline sits on the page's center axis, like
   the sky and the game itself — the homepage sections and the privacy
   page's prose alike. */
.water section,
.prose { text-align: center; }

.water h2 {
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: 1.1rem;
}

.water p { max-width: 62ch; margin-inline: auto; opacity: 0.94; }
.water p + p { margin-top: 0.9rem; }

.hour-note { font-size: 0.9rem; opacity: 0.7; font-style: italic; }

/* Feature grid — no cards, just glyph + line, floating in the water.
   The grid block is symmetric within the centered column; each row
   keeps left-aligned text beside its glyph (centering multi-line text
   next to a left icon reads ragged). */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.6rem 2.5rem;
  margin-top: 1.8rem;
  text-align: left;
}

.feature { display: flex; gap: 0.9rem; align-items: flex-start; }

.feature svg {
  flex: 0 0 26px;
  margin-top: 0.2rem;
  opacity: 0.9;
}

.feature strong { display: block; font-weight: 700; margin-bottom: 0.15rem; }
.feature span { opacity: 0.85; font-size: 0.95rem; }

/* Ambient silhouettes drifting between sections. */
/* Creatures composite like the game's textures: every part drawn at
   full strength, then the WHOLE silhouette faded once (root opacity) —
   so tucked-under fin bases and tail joins never double-brighten. */
.creature {
  position: absolute;
  fill: #fff;
  opacity: var(--creature-o);
  transition: opacity 1.2s ease;
  pointer-events: none;
}

/* The shark patrols the empty water above the seabed — safe at any
   width. The school and turtle live in the side margins, so they only
   appear when the viewport is wide enough to actually have margins
   clear of the text column (960px inner + breathing room). */
.school { right: 3%; top: 340px; width: 74px; display: none; }
.turtle-s { left: 3%; top: 58%; width: 56px; display: none; }
.shark-s { right: 9%; bottom: 130px; width: 96px; }

@media (min-width: 1160px) {
  .school, .turtle-s { display: block; }
}

@media (max-width: 640px) {
  .shark-s { width: 72px; bottom: 110px; }
}

/* ---------- calm strip ---------- */

.calm {
  text-align: center;
  padding: 1rem 0 0;
}

.calm p {
  max-width: none;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.calm .cast {
  margin-top: 2.8rem;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* ---------- footer / seabed ---------- */

footer {
  position: relative;
  margin-top: 5rem;
  /* Full-bleed: escape .water's 1.5rem side padding so the seabed
     shadow runs edge to edge instead of cutting off at the sides. */
  margin-inline: -1.5rem;
  padding: 3.5rem 1.5rem 2.2rem;
  text-align: center;
  background: linear-gradient(to bottom, transparent, var(--seabed) 70%);
  font-size: 0.88rem;
  transition: background 1.2s ease;
}

footer .links { margin-bottom: 0.7rem; }

footer a {
  opacity: 0.85;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 1px;
}

footer a:hover { opacity: 1; border-bottom-color: #fff; }

footer .sep { opacity: 0.4; margin: 0 0.6rem; }

footer .copyright { opacity: 0.6; }

/* ---------- privacy page ---------- */

.prose { padding-bottom: 2rem; }
.prose h2 { margin-top: 2.6rem; letter-spacing: 0.12em; }
.prose h2:first-of-type { margin-top: 0; }
/* Centered lists drop their markers — dot-led lines can't sit on a
   center axis — and read as plain stacked lines, like the homepage. */
.prose ul { max-width: 62ch; margin-inline: auto; padding-left: 0; list-style: none; opacity: 0.94; }
.prose li + li { margin-top: 0.45rem; }
.prose .updated { opacity: 0.65; font-size: 0.9rem; margin-bottom: 2.2rem; }
.back-link { display: inline-block; margin-top: 3rem; }