/* Folio landing page.
   Colours are tokens on :root. Dark charcoal is the brand default; light follows the system setting
   (or the toggle). Motion is the stagger-in, the wave canvas and the button spinner, and all of it
   stops under prefers-reduced-motion. */

@font-face {
  font-family: "Geist";
  src: url("geist.woff2") format("woff2"); /* Geist trimmed to the characters this page uses and weights 400 to 600 */
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #1a1a1a;
  --fg: #f5f5f5;
  --fg-2: #d4d4d4;
  --muted: #9ca3af;
  --subtle: #a1a1a1;
  --control: #808080;
  --field: #1a1a1a;
  --hover: rgb(245 245 245 / 0.12);
  --btn-bg: #f5f5f5;
  --btn-fg: #1a1a1a;
  --btn-hover: #d4d4d4;
  --focus: #f5f5f5;
  --dot: 245 245 245; /* wave particle colour, read by app.js */
  --font: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f5f5f5;
    --fg: #1a1a1a;
    --fg-2: #404040;
    --muted: #595959;
    --subtle: #595959;
    --control: #737373;
    --field: #ffffff;
    --hover: rgb(26 26 26 / 0.08);
    --btn-bg: #1a1a1a;
    --btn-fg: #f5f5f5;
    --btn-hover: #404040;
    --focus: #1a1a1a;
    --dot: 26 26 26;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f5f5;
  --fg: #1a1a1a;
  --fg-2: #404040;
  --muted: #595959;
  --subtle: #595959;
  --control: #737373;
  --field: #ffffff;
  --hover: rgb(26 26 26 / 0.08);
  --btn-bg: #1a1a1a;
  --btn-fg: #f5f5f5;
  --btn-hover: #404040;
  --focus: #1a1a1a;
  --dot: 26 26 26;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Wave particles sit behind everything and never take clicks. */
#waves {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100lvh;
  display: block;
  pointer-events: none;
  z-index: 0;
  animation: fade 1800ms ease-out 200ms both;
}

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 0 clamp(20px, 5vw, 56px);
  overflow: clip; /* the intro slide-in must not make a scrollbar flash in */
}

/* Header */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
}

/* The logo is the symbol alone. On hover or keyboard focus it splits through the middle into two
   halves that spin and slide apart, and the name appears between them. At rest the unsplit symbol is
   shown (two clipped halves side by side can leave a hairline at the join); it is swapped for the
   halves while they move. Screens that can't hover show the symbol and the name side by side. */
.brand {
  --ease: cubic-bezier(0.65, 0, 0.2, 1);
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 44px; /* a full-size target for the pointer and for touch */
  color: var(--fg);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand:focus-visible { border-radius: 8px; outline-offset: 6px; }

.logo { display: block; width: 36px; height: 36px; }
.logo .disc { fill: currentColor; }
.logo .dim { opacity: 0.5; }
.logo .hole { fill: var(--bg); }

.full {
  position: absolute;
  left: 0;
  top: 50%;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  pointer-events: none;
  transition: opacity 0s linear 700ms; /* comes back once the halves have rejoined */
}

.half {
  flex: none;
  width: 18px;
  height: 36px;
  overflow: hidden;
  opacity: 0;
  transition: transform 700ms var(--ease), opacity 0s linear 700ms;
}
.half.right .logo { margin-left: -18px; }

.word {
  display: grid;
  grid-template-columns: 0fr; /* grows to the width of the name */
  transition: grid-template-columns 650ms var(--ease), margin 650ms var(--ease);
}
.word > span { min-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: opacity 200ms ease; }

.brand:hover .full, .brand:focus-visible .full { opacity: 0; transition: opacity 0s; }
.brand:hover .half, .brand:focus-visible .half { opacity: 1; transition: transform 700ms var(--ease), opacity 0s; }
.brand:hover .half.left, .brand:focus-visible .half.left { transform: rotate(360deg); }
.brand:hover .half.right, .brand:focus-visible .half.right { transform: rotate(-360deg); }
.brand:hover .word, .brand:focus-visible .word { grid-template-columns: 1fr; margin: 0 10px; }
.brand:hover .word > span, .brand:focus-visible .word > span { opacity: 1; transition: opacity 350ms ease 250ms; }

@media (hover: none) {
  .full { position: static; margin: 0; opacity: 1; }
  .half { display: none; }
  .word { grid-template-columns: 1fr; margin: 0 0 0 12px; }
  .word > span { opacity: 1; }
}

.actions { display: flex; align-items: center; gap: 12px; }

.theme, .social {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--control);
  border-radius: 8px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms;
}
.theme:hover, .social:hover { background: var(--hover); }
.theme .i-sun { display: block; }
.theme .i-moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme .i-sun { display: none; }
  :root:not([data-theme]) .theme .i-moon { display: block; }
}
:root[data-theme="light"] .theme .i-sun { display: none; }
:root[data-theme="light"] .theme .i-moon { display: block; }

/* Hero */
main { display: grid; align-items: center; }

.hero {
  width: min(100%, 720px);
  margin: 0 auto;
  padding: 8px 0 32px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 500;
}

h1 {
  margin: 0;
  /* tied to the screen height as well, so a laptop shows the whole page without scrolling */
  font-size: clamp(2rem, min(1.1rem + 3.9vw, 6.2vh + 0.6rem), 4.25rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.line { display: block; }

.sub {
  margin: 20px 0 0;
  color: var(--fg-2);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.lede {
  max-width: 34em;
  margin: 12px auto 0;
  color: var(--muted);
  font-size: 1.0625rem;
  text-wrap: pretty;
}

/* Signup */
.signup { max-width: 520px; margin: 32px auto 0; text-align: left; }

.signup label {
  display: block;
  margin: 0 0 8px;
  color: var(--fg-2);
  font-size: 0.875rem;
  font-weight: 500;
}

.field { display: flex; gap: 12px; }

input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--control);
  border-radius: 8px;
  background: var(--field);
  color: var(--fg);
  font: inherit;
}
input[type="email"]::placeholder { color: var(--subtle); opacity: 1; }
input[type="email"][aria-invalid="true"] { border-color: var(--fg); }

.cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms;
}
.cta:hover { background: var(--btn-hover); }
.cta:disabled { cursor: progress; }

.spin {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: turn 700ms linear infinite;
}
.cta[aria-busy="true"] .spin { display: inline-block; }

.note { margin: 12px 0 0; color: var(--muted); font-size: 0.875rem; }
.status { min-height: 1.5em; margin: 12px 0 0; font-size: 0.9375rem; font-weight: 500; }

.count { min-height: 1.5em; margin: 16px 0 0; color: var(--fg-2); font-size: 0.9375rem; }
.pricing { margin: 4px 0 0; color: var(--muted); font-size: 0.875rem; }

/* Footer */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  padding: 20px 0 24px;
  color: var(--muted);
  font-size: 0.875rem;
}

.foot a.x { display: inline-flex; align-items: center; gap: 6px; }
.foot a.x svg { flex: none; }

/* Small screens: stack the form */
@media (max-width: 560px) {
  .field { flex-direction: column; }
  .cta { width: 100%; }
  .signup { margin-top: 28px; }
}

/* Motion */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes turn { to { transform: rotate(360deg); } }

.rise { animation: rise 700ms cubic-bezier(0.22, 0.7, 0.2, 1) both; }
.d0 { animation-delay: 0ms; }
.d1 { animation-delay: 150ms; }
.d2 { animation-delay: 270ms; }
.d3 { animation-delay: 390ms; }
.d4 { animation-delay: 510ms; }
.d5 { animation-delay: 650ms; }
.d6 { animation-delay: 800ms; }
.d7 { animation-delay: 950ms; }
.d8 { animation-delay: 1050ms; }

@media (prefers-reduced-motion: reduce) {
  .rise, #waves { animation: none; }
  .theme, .social, .cta { transition: none; }
  /* !important: the hover rules above re-declare their transitions with higher specificity */
  .brand .full, .brand .half, .brand .word, .brand .word > span { transition: none !important; }
  .spin { animation: none; }
}