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

:root {
  --bg: #0a0a0a;
  --fg: #f5f5f4;
  --muted: #a8a29e;
  --line: #292524;
  --accent: #f5f5f4;
  --pill-bg: rgba(10, 10, 10, 0.85);
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  /* Room to scroll so the IntersectionObserver fires */
  padding-bottom: 24rem;
}

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.1em 0.35em;
  border-radius: 0.3em;
}

a { color: inherit; }

/* ===== Header ===== */
/* The original Casefinite page uses `mix-blend-mode: difference` because its
   hero is dark — the white logo inverts to white on dark and dark on light.
   Our demo page is light by default, so we keep the mode only in dark scheme
   to preserve legibility without forcing the logo to a single color. */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.25rem;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .header { mix-blend-mode: difference; }
}
.header > * { pointer-events: auto; }

.header__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--fg);
}

.header__wordmark {
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  /* Hide on small screens, show only logo — matches the original */
  display: none;
  transition: opacity 0.32s cubic-bezier(0.45, 0, 0.55, 1);
}
.header[data-brand-collapsed] .header__wordmark {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 768px) {
  .header__wordmark { display: inline; }
}

.header__nav {
  display: flex;
  gap: 1.25rem;
  font-size: 0.9rem;
}
.header__nav a {
  color: var(--fg);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.header__nav a:hover { opacity: 1; }

/* ===== Brand morph (core) ===== */

@property --fold {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.brand-morph {
  --fold: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 0;
  transition: --fold 0.62s cubic-bezier(0.45, 0, 0.55, 1);
  isolation: isolate;
}
.brand-morph[data-collapsed] { --fold: 1; }

/* Pill background that appears behind the collapsed mark.
   Stacks behind the slot via z-index 0 (slot is z-index 1). */
.brand-morph::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: calc(100% + 18px);
  height: 2.5rem;
  border-radius: 9999px;
  background-color: var(--pill-bg);
  opacity: clamp(0, (var(--fold) - 0.18) * 2, 1);
  transform: translate(-50%, -50%)
    scale(calc(0.82 + 0.18 * clamp(0, (var(--fold) - 0.1) * 1.7, 1)));
  pointer-events: none;
}

.brand-morph__slot {
  position: relative;
  z-index: 1;
  height: 1.625rem;
  display: flex;
  align-items: center;
  /* The slot width shrinks; the wordmark text inside the SVG visually
     vanishes because every letter path has opacity 0 once --fold >= 0.3.
     We do NOT clip here — clipping would also clip the pill which lives
     on the parent (.brand-morph::before) and overflows the slot by 18px. */
  width: calc(125px - 74px * var(--fold));
}

.bm-cf {
  height: 1.625rem;
  width: 125px;
  flex: 0 0 auto;
  display: block;
  color: currentcolor;
  transition: color 0.24s;
  translate: 0px 1.6px;
}

.bm-frame {
  transform: translate(calc(-37px * var(--fold)));
}

/* The infinity curve that draws on */
.bm-fig {
  fill: none;
  stroke: currentcolor;
  stroke-width: 2.9366;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: max(0, 100 - 200 * var(--fold));
  opacity: min(2 * var(--fold), 2 - 2 * var(--fold));
}

/* Dot inside the curve */
.bm-disc {
  fill: currentcolor;
  opacity: clamp(0, (var(--fold) - 0.5) * 2.2, 1);
  transform: translate(calc(3.311px * (1 - clamp(0, (var(--fold) - 0.5) * 2, 1))));
}

/* The C's round geometry */
.bm-geo {
  fill: currentcolor;
  opacity: clamp(0, (var(--fold) - 0.5) * 2.2, 1);
  transform: translate(calc(61.787px + 3.738px * clamp(0, (var(--fold) - 0.5) * 2, 1)));
}

/* The C's mouth piece */
.bm-mouthp {
  fill: currentcolor;
  opacity: clamp(0, calc(1 - (var(--fold) - 0.62) * 4.5455), 1);
  transform: translate(calc(100px * clamp(0, (var(--fold) - 0.62) * 4.5455, 1)));
}

/* The C letter itself — exits right */
.bm-c {
  fill: currentcolor;
  transform: translate(calc(61.787px * min(2 * var(--fold), 1)));
  opacity: max(1 - 2 * var(--fold), 0);
}

/* All other letters — staggered fade + 6px slide */
.bm-rest path {
  --mid: 0.3;
  fill: currentcolor;
  opacity: clamp(0, (var(--mid) - var(--fold)) * 9, 1);
  transform: translate(calc(6px * var(--fold)));
}
.bm-rest path:nth-child(1) { --mid: 0.3; }
.bm-rest path:nth-child(2) { --mid: 0.275; }
.bm-rest path:nth-child(3) { --mid: 0.25; }
.bm-rest path:nth-child(4) { --mid: 0.225; }
.bm-rest path:nth-child(5) { --mid: 0.2; }
.bm-rest path:nth-child(6) { --mid: 0.175; }
.bm-rest path:nth-child(7) { --mid: 0.15; }
.bm-rest path:nth-child(8) { --mid: 0.125; }
.bm-rest path:nth-child(9) { --mid: 0.1; }

@media (prefers-reduced-motion: reduce) {
  .brand-morph { transition: none !important; }
  .bm-fig { opacity: 0 !important; }
}

/* ===== Demo rails (frozen frames) ===== */
.demo {
  max-width: 56rem;
  margin: 4rem auto;
  padding: 0 1.25rem;
  display: grid;
  gap: 2.5rem;
}
.demo__row {
  display: grid;
  gap: 0.6rem;
}
.demo__label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.demo__rail {
  position: relative;
  height: 5rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, #131211, #0c0b0a);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Inline a brand-morph clone with a fixed --fold */
.demo__rail .brand-morph {
  --fold: attr(data-fold number, 0);
}
/* attr() with number type isn't animatable — use inline style fallback via :style attr() not supported across browsers yet */
.demo__rail::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 50% 50%, rgba(255,255,255,0.04), transparent);
  pointer-events: none;
}

/* Hero ===== */
.hero {
  max-width: 48rem;
  margin: 7rem auto 3rem;
  padding: 0 1.25rem;
}
.hero__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.25rem;
}
.hero__title {
  font-size: clamp(2.1rem, 7vw, 3.6rem);
  line-height: 1.05;
  font-weight: 600;
  margin: 0 0 1.25rem;
  letter-spacing: -0.02em;
}
.hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.hero__lede {
  font-size: 1.05rem;
  line-height: 1.55;
  color: #d6d3d1;
  margin: 0 0 2rem;
  max-width: 38rem;
}
.hero__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 9999px;
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero__hint-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--fg);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* How / Code ===== */
.how, .code {
  max-width: 48rem;
  margin: 4rem auto;
  padding: 0 1.25rem;
}
.how__title, .code__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 1.25rem;
  letter-spacing: -0.01em;
}
.how__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
  counter-reset: step;
}
.how__list li {
  position: relative;
  padding: 1.1rem 1.1rem 1.1rem 3.25rem;
  background: linear-gradient(180deg, #131211, #0c0b0a);
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  counter-increment: step;
  color: #d6d3d1;
  font-size: 0.97rem;
  line-height: 1.55;
}
.how__list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.how__list li strong { color: var(--fg); }

.code pre {
  margin: 0;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(180deg, #131211, #0c0b0a);
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  overflow-x: auto;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #d6d3d1;
}
.code pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}
.code__foot {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Footer ===== */
.footer {
  max-width: 48rem;
  margin: 4rem auto 2rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

/* Light theme on prefers-color-scheme */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f5f4;
    --fg: #0a0a0a;
    --muted: #57534e;
    --line: #e7e5e4;
    --pill-bg: rgba(10, 10, 10, 0.10);
  }
  .code pre, .how__list li, .demo__rail {
    background: linear-gradient(180deg, #ffffff, #f0efee);
  }
}