/* ============================================================
   Pond — pondapp.co
   Static marketing site. One page. Calm by design.
   Colours are the real values pulled from the app (calm/clear state).
   ============================================================ */

/* ---------- Self-hosted fonts ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 500;          /* variable opsz+wght file, latin subset */
  font-display: swap;
  src: url('/assets/fonts/fraunces-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;          /* variable file, latin subset */
  font-display: swap;
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
  /* Water — calm/clear pond */
  --sky:           #D1D9F0;
  --water-surface: #A6E0F2;
  --water-deep:    #4DA6C7;
  --water-fallback:#80C7D1;

  /* Surfaces */
  --surface:       #FFFFFF;
  --surface-tint:  #F2FAFB;

  /* Accent / wayfinding teal */
  --teal-light:    #59B3BF;
  --teal:          #4099A6;
  --teal-dark:     #267380;

  /* Greens (seaweed / lily-pad) */
  --seaweed-front: #1FAD5C;
  --seaweed-mid:   #249476;
  --seaweed-back:  #387A94;
  --lilypad:       #4B9D58;
  --green-cta:     #1D9E75;

  /* Type ink */
  --ink:           #26333F;
  --ink-title:     #234D57;
  --ink-secondary: #596673;
  --ink-muted:     #8C99A6;

  /* Derived: link text needs AA on white — the wayfinding teal (#4099A6)
     fails as small text, so links use teal-dark. --teal stays for accents. */
  --link:          var(--teal-dark);

  --maxw:    42rem;   /* ~672px content cap */
  --maxw-nav:64rem;
  --pad-x:   clamp(1.25rem, 5vw, 2rem);
  --pad-y:   clamp(4rem, 11vw, 8rem);   /* ~64px mobile → ~128px desktop */

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--teal-dark); }

h1, h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  color: var(--ink-title);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

/* ---------- Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--pad-y); }

.section h2 {
  font-size: clamp(1.6rem, 1.1rem + 2.3vw, 2.3rem);
  margin-bottom: 0.85em;
}
.section p {
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.25rem);
  color: var(--ink);
  max-width: 36rem;
}
.section p + p { margin-top: 1.1em; }

/* Section surfaces — the page "surfaces and submerges" as you scroll */
.section--surface { background: var(--surface); }
.section--tint    { background: var(--surface-tint); }

.section--water {
  background:
    linear-gradient(180deg, #C9E7F3 0%, var(--water-surface) 34%, #7FC7DA 100%);
  color: var(--ink);
}
.section--water h2 { color: var(--ink-title); }
.section--water p  { color: var(--ink); }      /* dark ink for AA on aqua */

/* Deep, honest section — white text on dark teal (audited ≥4.7:1) */
.section--deep {
  background: linear-gradient(180deg, #287890 0%, #1A5868 100%);
  color: #fff;
}
.section--deep h2 { color: #fff; }
.section--deep p  { color: rgba(255,255,255,0.94); }

/* ============================================================
   Nav — sticky, minimal, transparent over the hero
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav__inner {
  max-width: var(--maxw-nav);
  margin-inline: auto;
  padding: clamp(0.85rem, 2.5vw, 1.25rem) var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* faint backdrop blur once scrolled */
.nav.is-scrolled {
  background: rgba(247, 252, 253, 0.72);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 1px 0 rgba(38, 115, 128, 0.10);
}

.wordmark {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--ink-title);
  text-decoration: none;
  line-height: 1;
}
.wordmark--sm { font-size: 1.05rem; font-weight: 500; }

.nav__inner .wordmark { display: inline-flex; align-items: center; min-height: 44px; }
.nav__link {
  font-size: 0.975rem;
  font-weight: 500;
  color: var(--ink-title);          /* dark ink: AA over hero + blur */
  text-decoration: underline;
  text-decoration-color: var(--teal);   /* teal underline = link affordance */
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;                 /* ≥44px touch target */
  padding-inline: 0.25rem;
  line-height: 1;
}
.nav__link:hover { color: var(--teal-dark); text-decoration-color: var(--teal-dark); }

/* ============================================================
   Hero — calm/clear empty pond, the brand's strongest statement
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(6rem, 18vh, 9rem) var(--pad-x) clamp(3rem, 10vh, 5rem);
  overflow: hidden;
  background: var(--water-fallback);   /* flat fill for the instant before the gradient paints */
  background:
    linear-gradient(180deg,
      var(--sky) 0%,
      var(--sky) 6%,
      #BCDDEF 14%,
      var(--water-surface) 30%,
      #74C0D6 72%,
      var(--water-deep) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}
.hero__title {
  font-size: clamp(2.25rem, 1.35rem + 4.4vw, 3.65rem);
  font-weight: 400;
  margin-bottom: 0.55em;
}
.hero__subline {
  font-size: clamp(1.125rem, 1.02rem + 0.7vw, 1.4rem);
  color: var(--ink);                 /* dark ink: AA on pale aqua (8.9:1) */
  line-height: 1.55;
  max-width: 33rem;
  margin: 0 auto 2rem;
}

/* ---------- Pond scene (decorative, behind content) ---------- */
.pond {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* waterline sits just under the held "sky" band */
.pond__waterline {
  position: absolute;
  left: 0; right: 0;
  top: clamp(7%, 9vh, 11%);
  height: 16px;
}
.pond__highlight {
  position: absolute;
  left: 0; right: 0; top: 7px;
  height: 2px;
  background: rgba(255,255,255,0.6);
  animation: waterline-glow 5.5s ease-in-out infinite;
}
.pond__shimmer { position: absolute; inset: 0; overflow: hidden; }
.pond__shimmer .wave {
  position: absolute;
  top: 0; left: 0;
  width: 200%;          /* shows two identical copies; translate -50% loops */
  height: 100%;
  fill: none;
  stroke-linecap: round;
  will-change: transform;
}
.wave--a path { stroke: rgba(255,255,255,0.55); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.wave--b path { stroke: rgba(255,255,255,0.30); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.wave--a { animation: drift-left 6s linear infinite; }
.wave--b { transform: translateX(-50%); animation: drift-right 9s linear infinite; }

/* one ripple on load, then settle (thoughts are just ripples) */
.pond__ripple {
  position: absolute;
  left: 50%; top: 46%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.6);
  opacity: 0;
  animation: ripple 0.95s var(--ease) 0.55s 1 forwards;
}

/* faint seaweed bed rising from the floor — no fish.
   Each blade sways gently from its base; staggered timing keeps it un-synced. */
.pond__seaweed {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: clamp(140px, 24vh, 240px);
}
.pond__seaweed path {
  transform-box: fill-box;
  transform-origin: 50% 100%;       /* pivot at the anchored base */
  animation: sway 8s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes drift-left  { from { transform: translateX(0); }     to { transform: translateX(-50%); } }
@keyframes drift-right { from { transform: translateX(-50%); }  to { transform: translateX(0); } }
@keyframes waterline-glow { 0%,100% { opacity: 0.5; } 50% { opacity: 0.8; } }
@keyframes sway { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } }
@keyframes ripple {
  0%   { width: 16px;  height: 16px;  margin: -8px 0 0 -8px;   opacity: 0; }
  12%  { opacity: 0.6; }
  100% { width: 132px; height: 132px; margin: -66px 0 0 -66px; opacity: 0; }
}

/* ============================================================
   CTA badge (official Apple art)
   ============================================================ */
.badge {
  display: inline-block;
  line-height: 0;
  border-radius: 9px;
  /* Apple clear-space: ~1/10 of badge height around the artwork */
  padding: 6px;
}
.badge img { width: clamp(150px, 44vw, 184px); height: auto; }
.badge:focus-visible { outline: 3px solid var(--teal-dark); outline-offset: 3px; }

/* ============================================================
   Section internals
   ============================================================ */

/* Three quiet beats — small, evenly spaced, not a heavy stepper */
.beats {
  list-style: none;
  margin: 0 0 1.6em;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 0.3em;
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.5rem);
  color: var(--ink-title);
}
/* Separator attaches to the END of each beat, so a wrapped line never
   begins with a stray dot. */
.beats li:not(:last-child)::after {
  content: "·";
  margin: 0 0.7em;
  color: var(--teal);
  opacity: 0.7;
}

/* Secondary / gratitude line */
.subtle {
  margin-top: 1.1em;
  font-size: 1rem !important;
  color: var(--ink-secondary) !important;   /* AA on white & tint (5.5:1+) */
}

/* Optional clearing visual — the water itself going murky → clear. No fish. */
.clearing {
  display: flex;
  height: clamp(56px, 14vw, 76px);
  margin: 0 auto 2.4rem;
  max-width: 30rem;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(38,115,128,0.10);
}
.clearing span { flex: 1; }
.clearing__murky {
  background: linear-gradient(90deg, #5E8A86 0%, #6FA6A6 60%, #8FC4CE 100%);
}
.clearing__clear {
  background: linear-gradient(90deg, #8FC4CE 0%, var(--water-surface) 70%, #C9EEF6 100%);
}

/* Roger — the one mascot moment, friendly size */
.roger {
  margin: 2.6rem 0 0;
  text-align: center;
}
.roger img {
  width: clamp(140px, 38vw, 220px);
  height: auto;
  margin: 0 auto 1.1rem;
  filter: drop-shadow(0 10px 26px rgba(12, 52, 64, 0.28));
}
.roger figcaption {
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.2rem);
  color: rgba(255,255,255,0.94);
  max-width: 30rem;
  margin-inline: auto;
  line-height: 1.55;
}

/* Closing CTA */
.close .wrap { text-align: center; }
.close__line {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.15rem);
  color: var(--ink-title) !important;
  line-height: 1.22;
  max-width: 24rem !important;
  margin: 0 auto 1.8rem;
}

/* ============================================================
   Footer — three quiet groups
   ============================================================ */
.footer {
  background: var(--surface);
  border-top: 1px solid rgba(38,115,128,0.10);
  padding-block: clamp(2.5rem, 7vw, 4rem);
  color: var(--ink-secondary);
  font-size: 0.95rem;
}
.footer__inner { text-align: center; display: grid; gap: 0.6rem; }
.footer__brand { color: var(--ink-secondary); }
.footer__brand .wordmark--sm { color: var(--ink-title); vertical-align: baseline; }
.footer a { color: var(--link); }
.footer__links { display: flex; justify-content: center; align-items: center; gap: 0.6rem; }
.footer__links .dot { color: var(--ink-secondary); }
.footer__legal { color: var(--ink-secondary); font-size: 0.875rem; }

/* ============================================================
   Legal / prose pages (privacy)
   ============================================================ */
.legal {
  background: var(--surface);
  padding-top: clamp(6rem, 16vh, 8rem);
  padding-bottom: clamp(3rem, 8vw, 5rem);
  min-height: 72vh;
}
.legal h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 2.8rem); margin-bottom: 0.3em; }
.legal__lede {
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.3rem);
  color: var(--ink-secondary);
  margin-bottom: 2.2em;
  max-width: 38rem;
}
.legal h2 { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.55rem); margin: 1.9em 0 0.5em; }
.legal p { color: var(--ink); max-width: 38rem; }
.legal p + p { margin-top: 1em; }
.legal__note { margin-top: 2.6em; font-size: 0.9rem; color: var(--ink-secondary); }

/* ============================================================
   Scroll reveal — gentle fade-and-rise. JS-gated so no-JS shows all.
   ============================================================ */
.js .reveal { opacity: 0; transform: translateY(16px); }
.reveal { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   Accessibility — focus, skip link
   ============================================================ */
:focus-visible { outline: 3px solid var(--teal-dark); outline-offset: 2px; border-radius: 2px; }
.section--deep :focus-visible { outline-color: #fff; }

.skip-link {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  background: #fff;
  color: var(--link);
  padding: 0.6rem 1rem;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ============================================================
   Motion is a guest, not a host — remove it all on request
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wave--a, .wave--b, .pond__highlight, .pond__ripple, .pond__seaweed path { animation: none !important; }
  .pond__ripple { display: none; }
  .pond__highlight { opacity: 0.65; }
  .wave--b { transform: translateX(-50%); }
  .pond__seaweed path { transform: none !important; }   /* still, upright seaweed */
  .nav { transition: none; }
  .js .reveal { opacity: 1; transform: none; }
  .reveal { transition: none; }
}