/* SYPHON landing. The app's real in-use design system, tokens ported verbatim
   from web/src/index.css (light theme): warm grey flat surfaces, ONE lime
   accent, depth only via the app's float/hover shadows on raised pieces.
   Layout language: bold one-job sections, big type, air, floating cards. */
:root {
  --bg: oklch(0.86 0.003 80);
  --text: oklch(0.18 0.005 80);
  --text-soft: oklch(0.38 0.006 80);
  --text-muted: oklch(0.48 0.005 80);
  --hairline: oklch(0.68 0.005 80);

  --lime: oklch(0.91 0.2 128);
  --lime-deep: oklch(0.78 0.21 128);

  --bg-raised: oklch(0.82 0.003 80);
  --bg-hover: oklch(0.78 0.003 80);

  --shadow-tint: 30, 24, 18;
  --shadow-float:
    0 2px 3px rgba(var(--shadow-tint), 0.45),
    0 8px 12px -2px rgba(var(--shadow-tint), 0.4),
    0 24px 32px -4px rgba(var(--shadow-tint), 0.35);
  --shadow-hover:
    0 3px 5px rgba(var(--shadow-tint), 0.5),
    0 14px 20px -3px rgba(var(--shadow-tint), 0.45),
    0 36px 48px -6px rgba(var(--shadow-tint), 0.4);

  /* App motion curves. */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --uikit: cubic-bezier(0.36, 0.66, 0.04, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.upper { text-transform: uppercase; letter-spacing: 0.12em; }

/* ---------- Intro (ported from the app's launch deconstruct) ---------- */
.intro {
  position: fixed;
  inset: 0;
  background: #f2f3ef;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 300ms ease-out;
}
.intro.intro-fade { opacity: 0; pointer-events: none; }

.intro-logo { position: relative; transform: translateY(-10vh); text-align: center; }

.intro-name {
  position: absolute;
  top: calc(100% + 24px);
  left: 50%;
  transform: translateX(-50%);
  padding-left: 0.25em;
  white-space: nowrap;
  font-size: clamp(40px, 10vw, 110px);
  letter-spacing: 0.25em;
  color: #9a9a95;
}

.intro-credit {
  position: absolute;
  left: 0; right: 0; bottom: 40px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: #9a9a95;
}

.intro-bar { transition: transform 600ms var(--uikit); }
.intro.bars-out .intro-bar-top { transform: translateX(260px); }
.intro.bars-out .intro-bar-bottom { transform: translateX(-260px); }

/* Morph into the page: the splash background dissolves into the app grey while
   the logo and name shrink and glide up toward the nav wordmark, then the
   overlay releases. No hard cut. */
.intro { transition: opacity 400ms ease-out, background 700ms ease; }
.intro-logo { transition: transform 800ms var(--uikit), opacity 700ms ease-out; }
.intro-name { transition: opacity 400ms ease-out; }
.intro.morph { background: oklch(0.86 0.003 80); }
.intro.morph .intro-logo { transform: translateY(-46vh) scale(0.16); opacity: 0; }
.intro.morph .intro-name { opacity: 0; }

/* ---------- Floating surface (the app's raised tile) ---------- */
.float-card {
  background: var(--bg-raised);
  border-radius: 18px;
  box-shadow: var(--shadow-float);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.float-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

/* ---------- Sticky nav ---------- */
.nav {
  position: fixed;
  top: 16px;
  left: 50%;
  translate: -50% 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: min(1080px, calc(100% - 32px));
  padding: 12px 20px;
  border-radius: 16px;
  background: var(--bg-raised);
  box-shadow: var(--shadow-float);
  /* Hidden above the viewport while at the hero; drops in on scroll. */
  transform: translateY(-140%);
  transition: transform 0.45s var(--ease-out);
}
.nav.shown { transform: translateY(0); }
.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-logo { width: 22px; height: auto; display: block; }
.nav-mark { font-size: 16px; letter-spacing: 0.2em; color: var(--text-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.13s var(--spring), background 0.15s, box-shadow 0.2s;
}
.btn:active { transform: scale(0.92); }
.btn-green { background: var(--lime); color: #111; box-shadow: var(--shadow-float); }
.btn-green:hover { background: var(--lime-deep); box-shadow: var(--shadow-hover); }
.btn-ghost { color: var(--text); border: 1.5px solid var(--hairline); }
.btn-ghost:hover { background: var(--bg-hover); }
.btn-small { padding: 9px 18px; font-size: 13px; border-radius: 11px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 120px 32px 80px;
}

/* One decorative logo triangle drifting behind, parallax layer. */
.hero-tri {
  position: absolute;
  width: 46vw;
  right: -10vw;
  top: -6%;
  fill: var(--lime);
  opacity: 0.16;
  pointer-events: none;
  will-change: transform;
}

.hero-inner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

.hero-kicker { font-size: 12px; color: var(--text-muted); margin-bottom: 22px; }

/* The name, huge: the app's mono wordmark blown up to display size. */
.hero-wordmark {
  font-size: clamp(58px, 12.5vw, 168px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.14em;
  margin-left: -0.05em;
  color: var(--text);
}

.hero-sub {
  margin-top: 28px;
  font-size: clamp(17px, 2vw, 23px);
  line-height: 1.5;
  color: var(--text-soft);
  max-width: 48ch;
}

.hero-actions { display: flex; gap: 14px; margin-top: 36px; }

/* ---------- Green statement: raised full-width card ---------- */
.statement-wrap { padding: clamp(40px, 8vh, 80px) 24px; }
.statement {
  background: var(--lime);
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(80px, 15vh, 150px) 32px;
  text-align: center;
  border-radius: 26px;
}
.statement.float-card:hover { transform: none; box-shadow: var(--shadow-float); }
.statement-title {
  font-size: clamp(36px, 6.5vw, 84px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: #111;
  margin: 0 auto;
}
/* One whole claim per line, never broken mid-phrase. */
.st-line { display: block; }
.statement-title .ltr { display: inline-block; will-change: transform, opacity; }

/* ---------- Sections ---------- */
.section {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(90px, 15vh, 160px) 32px;
}

.kicker { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }

.section-title {
  font-size: clamp(30px, 4.5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.section-lead {
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 46ch;
}

.text-link {
  color: var(--lime-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Features: floating tiles ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}

.feature { padding: 36px 32px 40px; }
.feature-num {
  display: block;
  font-size: 12px;
  color: var(--lime-deep);
  margin-bottom: 22px;
}
.feature h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.2px; margin-bottom: 12px; }
.feature p { font-size: 15.5px; line-height: 1.55; color: var(--text-soft); }

/* ---------- Device / privacy cards: same tile language ---------- */
.device-grid, .priv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
}

.device, .priv { padding: 36px 32px 40px; }
.card-icon {
  width: 34px;
  height: 34px;
  color: var(--lime-deep);
  display: block;
  margin-bottom: 24px;
}
.device h3, .priv h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.2px; margin-bottom: 12px; }
.device p, .priv p { font-size: 15.5px; line-height: 1.55; color: var(--text-soft); }

/* ---------- Steps: center timeline with dots, alternating sides ---------- */
.timeline { position: relative; padding: 20px 0 40px; }

.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  translate: -50% 0;
  background: var(--hairline);
}

.tl-step {
  position: relative;
  width: 50%;
  padding: 28px 56px;
}
.tl-left { left: 0; text-align: right; }
.tl-right { left: 50%; text-align: left; }

.tl-dot {
  position: absolute;
  /* Level with the centre of the step number (28px pad + half its size). */
  top: calc(28px + clamp(17px, 2.5vw, 27px));
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: var(--shadow-float);
  translate: 0 -50%;
}
.tl-left .tl-dot { right: -8px; }
.tl-right .tl-dot { left: -8px; }

.step-num {
  display: block;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1;
  color: var(--lime-deep);
  margin-bottom: 10px;
}

.tl-content h3 { font-size: clamp(20px, 3vw, 26px); font-weight: 600; margin-bottom: 6px; }
.tl-content p { font-size: 16px; color: var(--text-soft); line-height: 1.5; }

/* ---------- Download rows ---------- */
.download-list { display: flex; flex-direction: column; }
.dl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 4px;
  border-top: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s;
}
.download-list .dl-row:last-child { border-bottom: 1px solid var(--hairline); }
.dl-row:not(.is-soon):hover { background: var(--bg-raised); }
.dl-name { font-size: clamp(22px, 3vw, 32px); font-weight: 600; letter-spacing: -0.2px; }
.dl-note { font-size: 11px; color: var(--text-muted); }
.dl-row.is-soon { cursor: default; }
.dl-row.is-soon .dl-name { color: var(--text-muted); }
.dl-live { color: var(--lime-deep); font-weight: 500; }

/* ---------- Support: dev note card with parallaxing crowd photo ---------- */
.support {
  position: relative;
  overflow: hidden;
  background: var(--lime);
  border-radius: 26px;
  padding: clamp(70px, 12vh, 130px) 32px;
  text-align: center;
}
.support.float-card:hover { transform: none; box-shadow: var(--shadow-float); }

/* Oversized so its counter-parallax never exposes an edge. */
.support-photo {
  position: absolute;
  left: -5%;
  top: -20%;
  width: 110%;
  height: 140%;
  object-fit: cover;
  opacity: 0.16;
  filter: grayscale(1) contrast(1.15);
  pointer-events: none;
  will-change: transform;
}

.support-inner { position: relative; max-width: 680px; margin: 0 auto; }

.support-title {
  font-size: clamp(34px, 5.5vw, 68px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111;
  margin-bottom: 28px;
}

.support-copy {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.65;
  color: rgba(17, 17, 17, 0.78);
  margin-bottom: 36px;
}

.btn-dark { background: #111; color: var(--lime); box-shadow: var(--shadow-float); }
.btn-dark:hover { background: #000; box-shadow: var(--shadow-hover); }

/* The support heading reuses the statement letter cascade (.st-line). */
.support-title .ltr {
  opacity: 0;
  transform: translateY(0.4em) rotate(4deg);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: calc(var(--i) * 24ms);
}
html:not(.js) .support-title .ltr { opacity: 1; transform: none; }
.support-title .st-line.in .ltr { opacity: 1; transform: translateY(0) rotate(0); }

/* ---------- Footer ---------- */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 32px 64px;
}
.footer-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.footer-mark { width: 34px; height: auto; }
.footer-credit { font-size: 11px; letter-spacing: 0.2em; color: var(--text-muted); }
.footer-links { display: flex; gap: 24px; }
.footer-links a {
  font-size: 13px;
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-links a:hover { color: var(--text); }

@media (max-width: 560px) {
  .footer { flex-direction: column; gap: 20px; align-items: flex-start; }
}

/* ---------- Motion: load-in after the intro ----------
   Hidden states are gated behind html.js (set by main.js), so if the script
   ever fails to run, everything is simply visible. */
html.js [data-load] { opacity: 0; transform: translateY(24px); }
html.js body.loaded [data-load] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
body.loaded [data-load="1"] { transition-delay: 0.05s; }
body.loaded [data-load="2"] { transition-delay: 0.16s; }
body.loaded [data-load="3"] { transition-delay: 0.27s; }
body.loaded [data-load="4"] { transition-delay: 0.38s; }
body.loaded [data-load="5"] { transition-delay: 0.49s; }

/* Scroll reveals: rise in, staggered inside a group. Same html.js gate:
   without the script, content is never hidden. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
html.js [data-reveal].in { opacity: 1; transform: translateY(0); }
[data-reveal].in:nth-child(2) { transition-delay: 0.07s; }
[data-reveal].in:nth-child(3) { transition-delay: 0.14s; }
[data-reveal].in:nth-child(4) { transition-delay: 0.21s; }
[data-reveal].in:nth-child(5) { transition-delay: 0.28s; }
[data-reveal].in:nth-child(6) { transition-delay: 0.35s; }

/* Statement letters cascade once revealed (the reveal lands per line). */
.statement-title .ltr {
  opacity: 0;
  transform: translateY(0.4em) rotate(4deg);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: calc(var(--i) * 24ms);
}
html:not(.js) .statement-title .ltr { opacity: 1; transform: none; }
.statement-title .st-line.in .ltr { opacity: 1; transform: translateY(0) rotate(0); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .feature-grid, .device-grid, .priv-grid { grid-template-columns: 1fr; gap: 20px; }
  .timeline-line { left: 8px; }
  .tl-step, .tl-left, .tl-right { width: 100%; left: 0; text-align: left; padding: 24px 0 24px 40px; }
  .tl-left .tl-dot, .tl-right .tl-dot { left: 0; right: auto; top: calc(24px + clamp(17px, 2.5vw, 27px)); }
}