/* Palette v2. Every other colour below is a mix of two of these. */
:root {
  --charcoal: #1A1A1A;
  --paper: #F9F9F7;

  --ground: var(--charcoal);
  --ink: var(--paper);
  --ink-off: color-mix(in srgb, var(--paper) 50%, var(--charcoal));
  --line-off: color-mix(in srgb, var(--paper) 25%, var(--charcoal));

  /* Fibonacci spacing and control size; type steps by root-phi off 16. */
  --s8: 8px;
  --s13: 13px;
  --s21: 21px;
  --s34: 34px;
  --s55: 55px;
  --control: 55px;
  --step-0: 16px;
  --step-3: 33px;
  --step-4: 42px;

  --fast: 0.21s;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: dark;
}

@font-face {
  font-family: "Outfit";
  src: url("/fonts/Outfit-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Variable.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

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

html { background: var(--ground); }

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--step-0) / 1.5 "Open Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Top bar: nav centred on the page, Sign In on the right. */
.bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s21);
  padding: var(--s21) var(--s34);
}

.nav {
  grid-column: 2;
  display: flex;
  gap: var(--s13);
}

.sign-in {
  grid-column: 3;
  justify-self: end;
}

/* Every control is a capsule. */
.pill {
  height: var(--control);
  padding: 0 var(--s34);
  border: 3px solid var(--ink);
  border-radius: calc(var(--control) / 2);
  background: transparent;
  color: var(--ink);
  font: 600 var(--step-0) / 1 "Open Sans", system-ui, sans-serif;
  cursor: pointer;
  transition: background-color var(--fast), color var(--fast);
}

.pill-on:hover {
  background: var(--ink);
  color: var(--ground);
}

.pill:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 5px;
}

.pill-off,
.pill-off:disabled {
  border-color: var(--line-off);
  color: var(--ink-off);
  cursor: default;
}

/* The mark and the slogan, centred in what is left. */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s13);
  padding: var(--s21) var(--s34) var(--s55);
  text-align: center;
}

.logo {
  width: min(100%, 610px);
  margin: 0;
  line-height: 0;
}

.logo svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 520;
}

.slogan {
  margin: 0;
  font: 600 var(--step-4) / 1.2 "Outfit", system-ui, sans-serif;
  letter-spacing: 0.01em;
}

/*
  Load animation, about 1.7 seconds. Fast forward: the reels pop in from the
  middle out, the tape runs across, the pin lands on the end of it, then the
  letters and the slogan follow in quick succession. Times are the Fibonacci
  series in hundredths of a second. Every part rests at its normal look, so
  with motion off (or if this fails) the logo is simply there.
*/
.reel-l, .hub-l, .core-l { transform-origin: 245px 160px; }
.reel-r, .hub-r, .core-r { transform-origin: 475px 160px; }

/* Reels pop in from the middle out: reel, then hub, then centre; left, then right. */
.reel   { animation: pop 0.55s var(--spring) 0s backwards; }
.hub    { animation: pop 0.55s var(--spring) 0.05s backwards; }
.core   { animation: pop 0.55s var(--spring) 0.08s backwards; }
.reel-r { animation-delay: 0.13s; }
.hub-r  { animation-delay: 0.18s; }
.core-r { animation-delay: 0.21s; }

.tape {
  stroke-dasharray: 1 1;
  animation: run 0.55s 0.34s cubic-bezier(0.65, 0, 0.35, 1) backwards;
}

.rail {
  transform-origin: 115px 316px;
  animation: slide 0.34s 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.pin {
  transform-origin: 647px 166px;
  animation: pop 0.34s var(--spring) 0.89s backwards;
}

.ch { animation: rise 0.34s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.ch:nth-child(1) { animation-delay: 0.89s; }
.ch:nth-child(2) { animation-delay: 0.94s; }
.ch:nth-child(3) { animation-delay: 0.99s; }
.ch:nth-child(4) { animation-delay: 1.04s; }
.ch:nth-child(5) { animation-delay: 1.09s; }
.ch:nth-child(6) { animation-delay: 1.14s; }
.ch:nth-child(7) { animation-delay: 1.19s; }
.ch:nth-child(8) { animation-delay: 1.24s; }

.slogan { animation: lift 0.55s 1.13s cubic-bezier(0.22, 1, 0.36, 1) backwards; }

@keyframes pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

@keyframes run {
  from { stroke-dashoffset: 1; opacity: 0; }
  1%   { opacity: 1; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes slide {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* The wordmark is drawn upside down, so a negative Y is down on screen. */
@keyframes rise {
  from { transform: translateY(-233px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes lift {
  from { transform: translateY(var(--s21)); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Phone: Sign In stays top right; the nav drops to its own row, centred. */
@media (max-width: 640px) {
  .bar {
    grid-template-columns: 1fr;
    gap: var(--s13);
    padding: var(--s21);
  }

  .sign-in {
    grid-column: 1;
    grid-row: 1;
  }

  .nav {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
  }

  .pill { padding: 0 var(--s21); }

  .slogan { font-size: var(--step-3); }
}

@media (prefers-reduced-motion: reduce) {
  .pill { transition: none; }

  .logo *,
  .slogan { animation: none; }
}