/* Uzumaki site. Dark, calm and neutral, with one accent (the app's coral). No web fonts are
   shipped: Inter is used when it is installed, then the system UI font.
   Colours are named by role. Coral is for buttons, highlights and the focus ring only. */
:root {
  /* surfaces */
  --page: #0e0e11;          /* the page itself */
  --page-deep: #0b0b0e;     /* the terminal band, the footer */
  --surface: #141418;       /* cards, steps */
  --surface-hi: #1b1b21;    /* secondary button */
  --window: #0e0e11;        /* the app window (demo) */
  --window-bar: #141418;    /* title bars */
  --term: #0a0a0c;          /* terminal bodies */
  /* ink */
  --ink-1: #f2f2f5;         /* headings, strong text */
  --ink-2: #b4b4bd;         /* body */
  --ink-3: #8a8a94;         /* fine print, eyebrows */
  /* lines */
  --border: rgba(255, 255, 255, .08);
  --border-hi: rgba(255, 255, 255, .16);
  /* the one accent */
  --accent: #ff7a8a;
  --accent-hi: #ffa3ae;
  --accent-ink: #111114;    /* text on a coral button */
  --accent-soft: rgba(255, 122, 138, .14);

  --radius: 16px;
  --e-enter: cubic-bezier(.2, .8, .2, 1);   /* Rune's Easing::ENTER, as in the app's intro */
  --font: "Inter", "Inter Variable", system-ui, -apple-system, "Segoe UI", "Noto Sans", "Cantarell", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "Fira Code", "Cascadia Mono", "DejaVu Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--page); }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink-2);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink-1); text-decoration: underline; text-decoration-color: var(--border-hi); text-underline-offset: .2em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
code { font-family: var(--mono); font-size: .88em; color: var(--ink-1); background: rgba(255, 255, 255, .06); padding: .12em .42em; border-radius: 6px; }
h1, h2, h3 { color: var(--ink-1); margin: 0; }
h2 { font-size: clamp(28px, min(4.4vw, 6.6vh), 54px); line-height: 1.04; letter-spacing: -.04em; font-weight: 700; text-wrap: balance; }
h3 { font-size: 1.08rem; line-height: 1.25; font-weight: 650; letter-spacing: -.015em; }
p { margin: 0; }

.wrap { width: min(1140px, 100% - 40px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--accent-ink); text-decoration: none; padding: 8px 14px; border-radius: 8px; z-index: 110; }
.skip:focus { left: 8px; }

/* Small monospace label above a section: "01 · native", "$ uzu". */
.eyebrow { display: block; margin: 0 0 18px; font: 500 12px/1.2 var(--mono); letter-spacing: .08em; color: var(--ink-3); }
.eyebrow b { font-weight: 500; color: var(--ink-2); }

/* ---------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 5;
  background: rgba(14, 14, 17, .78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-1); font-weight: 700; font-size: 1.05rem; letter-spacing: -.015em; text-decoration: none; }
.brand img { border-radius: 7px; }
.nav nav { display: flex; gap: 26px; }
.nav nav a { color: var(--ink-2); font-size: .92rem; font-weight: 500; text-decoration: none; }
.nav nav a:hover { color: var(--ink-1); }
.nav-x { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: 18px; border-radius: 999px; color: var(--ink-2); border: 1px solid var(--border); }
.nav-x:hover { color: var(--ink-1); border-color: var(--ink-3); }
.nav-in nav { margin-left: auto; }
.foot-social a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); text-decoration: none; font-size: .92rem; }
.foot-social a:hover { color: var(--accent); }
.foot-social { margin: 2px 0 6px; }
.foot-contact { margin: 0 0 6px; color: var(--ink-3); font-size: .9rem; }
.foot-contact a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--border); }
.foot-contact a:hover { color: var(--accent); border-color: currentColor; }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; padding: 72px 0 40px; text-align: center; isolation: isolate; }
.swirl {
  position: absolute; inset: -20% -10% auto; height: 900px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(closest-side at 38% 40%, rgba(122, 108, 208, .26), transparent 70%),
    radial-gradient(closest-side at 64% 46%, rgba(255, 122, 138, .18), transparent 70%);
  filter: blur(10px);
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: rotate(-6deg) scale(1); }
  to { transform: rotate(8deg) scale(1.08); }
}
.hero .eyebrow { margin-bottom: clamp(10px, 1.8vh, 18px); }
/* The tagline is the h1; its words rise in turn, 100 ms apart. */
.hero h1 {
  font-size: clamp(40px, min(6.4vw, 9.6vh), 92px);
  line-height: 1.02; letter-spacing: -.05em; font-weight: 700;
  max-width: 13.5em; margin-inline: auto; text-wrap: balance;
}
.hero h1 .w { display: inline-block; animation: rise .9s var(--e-enter) backwards; animation-delay: calc(var(--rise-from, .08s) + var(--i, 0) * 100ms); }
@keyframes rise { from { opacity: 0; transform: translate3d(0, .42em, 0); } }
.sub { color: var(--ink-2); margin: clamp(10px, 2vh, 20px) auto 0; max-width: 64ch; font-size: clamp(15px, 2vh, 16.5px); }

.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(16px, 3vh, 28px); }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: 999px;
  font-weight: 650; font-size: .98rem; color: var(--ink-1); text-decoration: none;
  background: var(--surface-hi); border: 1px solid var(--border-hi);
  transition: background-color .15s, border-color .15s, transform .15s;
}
.btn:hover { background: #24242c; transform: translateY(-1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.soon { margin-top: 14px; color: var(--ink-3); font-size: .86rem; }
.fineprint { margin-top: 4px; color: var(--ink-3); font-size: .86rem; }
.pill {
  display: inline-block; margin-right: 6px; padding: 2px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .06em; vertical-align: 1px;
}

.shot { margin: 0; }
.shot img {
  border-radius: 12px; border: 1px solid var(--border);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .4);
  background: var(--surface);
}
.note { margin-top: 12px; color: var(--ink-3); font-size: .82rem; }

/* ---------------------------------------------------------------- sections */
section { scroll-margin-top: 72px; }
.features { padding: 104px 0 40px; }
.how { padding: 72px 0 40px; }
.req { padding: 72px 0 20px; }
.faq { padding: 88px 0 40px; }
.features h2, .how h2, .req h2, .faq h2 { max-width: 20ch; }
.lead { color: var(--ink-2); font-size: 1.08rem; margin-top: 16px; max-width: 62ch; }

.grid { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid li, .card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px 24px 28px;
  transition: border-color .2s;
}
.grid li:hover, .card:hover { border-color: var(--border-hi); }
.grid p, .card p { color: var(--ink-2); margin-top: 10px; font-size: .95rem; }

.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; margin-top: 64px; }
.gallery figcaption { color: var(--ink-3); font-size: .88rem; margin-top: 12px; }

/* ---------------------------------------------------------------- how it works */
.steps { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.steps li { border-top: 1px solid var(--border-hi); padding-top: 18px; }
.steps .n { display: block; font: 500 13px/1 var(--mono); letter-spacing: .06em; color: var(--ink-3); margin-bottom: 22px; }
.steps p { color: var(--ink-2); margin-top: 10px; font-size: .95rem; }
.steps .cmd { display: block; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--term); border: 1px solid var(--border); font: 400 12.5px/1.6 var(--mono); color: var(--ink-1); white-space: pre-wrap; overflow-wrap: anywhere; }
.steps .cmd i { font-style: normal; color: var(--ink-3); }

/* ---------------------------------------------------------------- uzu */
.uzu {
  margin-top: 72px; padding: 88px 0;
  background: linear-gradient(180deg, transparent, var(--page-deep) 18%, var(--page-deep) 82%, transparent);
}
.uzu h2 { max-width: 24ch; }
.uzu h2 code { font-size: .8em; padding: .08em .3em; }
.term-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; margin-top: 44px; align-items: start; }
.term {
  background: var(--term); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9);
}
.term-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--window-bar); border-bottom: 1px solid var(--border); }
.term-bar span { width: 11px; height: 11px; border-radius: 50%; background: #34343c; }
.term-bar em { margin-left: 8px; color: var(--ink-3); font: 500 .8rem var(--mono); font-style: normal; }
.term-scroll { overflow-x: auto; scrollbar-color: #34343c transparent; scrollbar-width: thin; }
.term pre {
  margin: 0; padding: 16px 18px; color: #d8d8de;
  font: 400 13.5px/1.25 var(--mono); white-space: pre; tab-size: 4;
  font-variant-ligatures: none;
}
.term pre i { font-style: normal; color: #4a4a55; }
.term pre b { font-weight: 700; }
.term pre .c { color: var(--accent); }   /* the playing song and selected row, a highlight as in the real uzu */
.term pre .m { color: var(--ink-3); }
.term pre .p { color: var(--ink-2); }
.term.small pre { font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.uzu-points { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.uzu-points li { color: var(--ink-2); font-size: .95rem; padding-left: 16px; border-left: 1px solid var(--border-hi); }
.uzu-points strong { color: var(--ink-1); font-weight: 600; }

/* ---------------------------------------------------------------- requirements, FAQ */
.req-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; }
.faq h2 { margin-bottom: 28px; }
.faq details { max-width: 820px; }
details { border-bottom: 1px solid var(--border); }
details:first-of-type { border-top: 1px solid var(--border); }
summary {
  cursor: pointer; list-style: none; padding: 18px 36px 18px 0; position: relative;
  font-weight: 600; font-size: 1.02rem; color: var(--ink-1);
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
summary:hover::after { border-color: var(--ink-1); }
details p { color: var(--ink-2); padding: 0 0 20px; max-width: 68ch; }

/* ---------------------------------------------------------------- footer */
.foot { margin-top: 72px; border-top: 1px solid var(--border); background: var(--page-deep); }
.foot-in { padding: 36px 0 44px; display: grid; gap: 10px; }
.foot .brand { font-size: .98rem; }
.disclaimer { color: var(--ink-2); font-size: .9rem; }
.fine { color: var(--ink-3); font-size: .84rem; }

/* ---------------------------------------------------------------- reveal on scroll
   One IntersectionObserver (site.js) adds .in. Nothing is hidden without JS: the hiding only
   applies once the head script has set .js, and .js-fail lifts it if site.js never ran. */
.js .reveal:not(.in) { opacity: 0; transform: translate3d(0, 22px, 0); }
.js .reveal { transition: opacity .7s var(--e-enter), transform .7s var(--e-enter); transition-delay: calc(var(--i, 0) * 70ms); }
.js-fail .reveal { opacity: 1 !important; transform: none !important; }
.stagger > :nth-child(2) { --i: 1; } .stagger > :nth-child(3) { --i: 2; }
.stagger > :nth-child(4) { --i: 3; } .stagger > :nth-child(5) { --i: 4; } .stagger > :nth-child(6) { --i: 5; }

/* ---------------------------------------------------------------- startup intro
   The app's startup intro (app/src/ui/intro.rs): the swirl twists in and keeps turning, then
   grows and turns out of sight while the page twists out of its middle. Same curves and
   timings, as one CSS timeline of 1.4 s (percent = seconds / 1.4):
     0.00-0.55  swirl twists in (ENTER), fades in over 0.35
     0.55-1.30  swirl twists past and grows 6x (EASE_IN), fades out 0.85-1.25; the cover fades 0.70-1.15
     0.60-1.35  page twists out from a folded pose (28.6deg, 0.3x) to full size (ENTER)
   Only transform and opacity animate. The head script sets .intro-on on the first visit of a
   session (not for reduced motion, not when the page opens scrolled or on a #hash). After the
   timeline the overlay hides itself in CSS, so it can't get stuck if scripts fail. A click, key
   or scroll adds .intro-done (site.js), which fades the overlay out at once. */
.intro { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 100; display: none; overflow: hidden; pointer-events: none; --d: calc(max(100vw, 100vh) * 1.42); }
.intro-bg { position: absolute; inset: 0; background: var(--page); opacity: 0; }
/* Centred with left/top 50% + a negative margin, not inset + margin:auto: Safari pins an over-wide
   absolute box to the left edge instead of centring it. */
.intro-swirl { position: absolute; left: 50%; top: 50%; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); max-width: none; opacity: 0; will-change: transform, opacity; }
.intro-on .intro { display: block; pointer-events: auto; animation: intro-life 1.4s linear forwards; }
.intro-on .intro-bg { animation: intro-cover 1.4s linear backwards; }
.intro-on .intro-swirl { animation: intro-twist 1.4s linear backwards, intro-glow 1.4s linear backwards, intro-spin 5s linear infinite; }
.intro-on:not(.intro-done) .demo-sticky { animation: intro-page 1.4s linear backwards, intro-page-fade 1.4s linear backwards; }
.intro-on:not(.intro-done) .nav { animation: intro-page-fade 1.4s linear backwards; }
.intro-on { --rise-from: .85s; }
.intro-done .intro { animation: intro-skip .25s ease-out forwards; pointer-events: none; }
.intro-done .intro-bg, .intro-done .intro-swirl { animation: none; }
.intro-done { --rise-from: .08s; }

@keyframes intro-life { 0%, 99.9% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes intro-skip { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@keyframes intro-cover {
  0%, 50% { opacity: 1; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
  82.14%, 100% { opacity: 0; }
}
@keyframes intro-twist {
  0% { transform: rotate(137.5deg) scale(.35); animation-timing-function: var(--e-enter); }
  39.29% { transform: rotate(2.1deg) scale(.99); animation-timing-function: cubic-bezier(.42, 0, 1, 1); }
  92.86%, 100% { transform: rotate(-149deg) scale(6); }
}
@keyframes intro-glow {
  0% { opacity: 0; animation-timing-function: cubic-bezier(0, 0, .58, 1); }
  25%, 60.71% { opacity: 1; animation-timing-function: cubic-bezier(.42, 0, 1, 1); }
  89.29%, 100% { opacity: 0; }
}
@keyframes intro-spin { to { rotate: -360deg; } }
@keyframes intro-page {
  0%, 42.86% { transform: rotate(28.65deg) scale(.3); animation-timing-function: var(--e-enter); }
  96.43%, 100% { transform: rotate(0deg) scale(1); }
}
@keyframes intro-page-fade {
  0%, 45% { opacity: 0; animation-timing-function: cubic-bezier(0, 0, .58, 1); }
  66.43%, 100% { opacity: 1; }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .grid, .req-grid, .uzu-points { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .term-grid { grid-template-columns: 1fr; }
  .term.small { max-width: 520px; }
}
@media (max-width: 680px) {
  /* Two rows on phones: brand on top, every section link underneath (none hidden). */
  .nav-in { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 8px; row-gap: 6px; }
  .nav nav { width: 100%; justify-content: space-between; gap: 8px; order: 3; margin-left: 0; }
  .nav-x { order: 2; margin-left: auto; width: 30px; height: 30px; }
  .nav nav a { font-size: .82rem; white-space: nowrap; }
  section { scroll-margin-top: 100px; }
  .hero { padding-top: 48px; }
  .grid, .req-grid, .uzu-points, .gallery, .steps { grid-template-columns: 1fr; }
  .btn { flex: 1 1 100%; justify-content: center; }
  .term pre { font-size: 11px; padding: 12px; }
  .features, .faq { padding-top: 64px; }
  .how, .req { padding-top: 56px; }
  .uzu { padding: 56px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .intro { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}