/* =============================================================================
   Stable Hook landing page — exclusive, scoped styles.
   Loaded as its own stylesheet (registered in src/dev/build.clj `files`), NOT
   merged into site.css. Every rule is scoped under `.landing-stable-hook` so it
   only applies inside this landing and never affects the rest of the app.
   Layout/spacing is done with Tailwind utilities in the cljs view; this file
   holds the per-landing palette, fonts, and the few things Tailwind can't.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700;900&display=swap');

.landing-stable-hook {
  /* ---- palette (from Figma: "Stable Hooks Landing") ---- */
  --sh-lime: #bff532;        /* page background                */
  --sh-ink: #031016;         /* dark bands / primary button    */
  --sh-green-95: #021d0b;     /* connect button bg              */
  --sh-green: #0df259;        /* bright accent (on dark)        */
  --sh-violet: #4725f4;       /* indigo accent / badges         */
  --sh-violet-deep: #29158e;  /* heading gradient end           */
  --sh-blue: #1b00b2;         /* stat numbers / deep accent     */
  --sh-olive-strong: #243102; /* subheads on lime               */
  --sh-olive: #364904;        /* body text on lime              */
  --sh-olive-soft: #455c0b;   /* muted labels / nav on lime     */
  --sh-olive-line: #486105;   /* hairlines / secondary borders  */
  --sh-gray-85: #1b2c32;
  --sh-white: #fff;

  /* ---- semantic (per-use) ---- */
  --sh-btn-ink: #15140f;       /* primary CTA surface (warm near-black) */
  --sh-btn-ink-hover: #2e2b24; /* primary CTA hover                     */
  --sh-on-dark: #9fb0ac;       /* body text on dark bands               */
  --sh-on-dark-2: #c7d1cb;     /* lighter body text on dark             */
  --sh-input-line: #577573;    /* waitlist input border                 */
  --sh-input-ph: #65817c;      /* waitlist input placeholder            */
  --sh-error: #e0052a;         /* form error text on light              */
  --sh-error-dk: #ff9bad;      /* form error text on dark               */

  /* ---- fonts ---- */
  --sh-font-display: "Saira", "Arial Narrow", system-ui, sans-serif;
  --sh-font-body: "Saira", system-ui, -apple-system, sans-serif;
  --sh-font-mono: "Berkeley Mono", ui-monospace, "SFMono-Regular", monospace;
  --sh-font-btn: "Saira", system-ui, sans-serif;

  background-color: var(--sh-lime);
  color: var(--sh-olive);
  font-family: var(--sh-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  overflow-x: clip;
}

/* Headings / display use Saira; data labels use Berkeley Mono. */
.landing-stable-hook .sh-display { font-family: var(--sh-font-display); font-weight: 900; }
.landing-stable-hook .sh-bold    { font-family: var(--sh-font-display); font-weight: 700; }
.landing-stable-hook .sh-medium    { font-family: var(--sh-font-display); font-weight: 500; }
.landing-stable-hook .sh-normal    { font-family: var(--sh-font-display); font-weight: 400; }
.landing-stable-hook .sh-mono    { font-family: var(--sh-font-mono); font-weight: 700; }


/* Indigo gradient text used for the hero title and section accent words. */
.landing-stable-hook .sh-gradient {
  background: linear-gradient(90deg, var(--sh-violet), var(--sh-violet-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Eyebrow badge (indigo pill). */
.landing-stable-hook .sh-eyebrow {
  display: inline-flex;
  align-items: center;
  background: var(--sh-violet);
  color: var(--sh-white);
  font-family: var(--sh-font-body);
  font-weight: 400;
  text-transform: uppercase;
  border-radius: 6px;
}

/* FAQ accordion built on native <details>/<summary>.
   border-top acts as the separator between items; the first item drops it and
   there is no bottom border, so the rules only appear *between* items. */
.landing-stable-hook details.sh-faq { border-top: 1px solid rgba(3, 16, 22, 0.18); }
.landing-stable-hook details.sh-faq:first-of-type { border-top: 0; }
.landing-stable-hook details.sh-faq > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.landing-stable-hook details.sh-faq > summary::-webkit-details-marker { display: none; }
.landing-stable-hook details.sh-faq .sh-faq-sign {
  flex: none;
  transition: transform 0.2s ease;
  font-weight: 400;
  line-height: 1;
}
.landing-stable-hook details.sh-faq[open] .sh-faq-sign { transform: rotate(45deg); }
.landing-stable-hook details.sh-faq .sh-faq-answer {
  overflow: hidden;
  animation: sh-faq-reveal 0.22s ease;
}
@keyframes sh-faq-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Decorative concentric ring. Sets width/style only (no color) so a Tailwind
   `border-[…]` utility on the same element controls the color. */
.landing-stable-hook .sh-ring { border-radius: 9999px; border-width: 1px; border-style: solid; }

/* Hero background circle groups — hint the compositor since a rAF loop drives
   their transform (mouse-follow parallax). */
.landing-stable-hook .sh-circle-grp { will-change: transform; }

/* Scroll-triggered masked slide-up reveal (see `reveal` in stable_hook.cljs).
   The inner sits below a clip mask; when the IntersectionObserver adds
   `.sh-reveal--in`, it slides up into place (once). Titles here are uppercase,
   so overflow:hidden never clips a descender. */
.landing-stable-hook .sh-reveal { overflow: hidden; }
.landing-stable-hook .sh-reveal__inner {
  transform: translateY(110%);
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.landing-stable-hook .sh-reveal--in .sh-reveal__inner { transform: translateY(0); }

/* Softer fade-up variant (see `reveal {:variant :fade-up}`) — fades in while
   rising 50px, no clip mask. Used for the pool-position cards. */
.landing-stable-hook .sh-fade {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.landing-stable-hook .sh-fade--in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .landing-stable-hook *,
  .landing-stable-hook *::before,
  .landing-stable-hook *::after { animation: none !important; transition: none !important; }
  /* show revealed content immediately (no slide) */
  .landing-stable-hook .sh-reveal__inner { transform: none; }
  .landing-stable-hook .sh-fade { opacity: 1; transform: none; }
}