/* ============================================================
   BASE — colours, type, resets and the small shared pieces.
   Change the look of the whole site from the :root block below.
   Nothing else needs editing.

   The look is "carbon + instrument panel": near-black surfaces,
   hairline borders, almost-square corners, mono type for anything
   that reads as data, and exactly two colour pops.
   ============================================================ */

:root {
  /* ---- EDIT ME: palette ----------------------------------- */
  --bg:         #060709;   /* page carbon */
  --bg-deep:    #030405;   /* the deepest wells */
  --panel:      #0b0d11;   /* panel fill */
  --panel-2:    #10141a;   /* raised panel / toolbars */
  --surface:    rgba(255, 255, 255, 0.035);
  --surface-2:  rgba(255, 255, 255, 0.07);
  --line:       rgba(158, 178, 206, 0.16);
  --line-soft:  rgba(158, 178, 206, 0.075);
  --text:       #e7ebf1;
  --dim:        #a3acba;
  --muted:      #6d7786;

  --accent:     #2f9bff;   /* electric blue — each project overrides this */
  --pop:        #ffc23d;   /* deep yellow — stays constant site-wide */

  /* ---- EDIT ME: type -------------------------------------- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* ---- geometry & motion ---------------------------------- */
  --radius:     4px;       /* almost square, on purpose */
  --radius-sm:  2px;
  --gutter:     clamp(1.1rem, 7vw, 6.5rem);
  --maxw:       1340px;
  /* Width of the strip each side rail is drawn into. This is wider than the
     rails look: they rest in its outer ~42% and the rest is swing room, so a
     wave can reach past the hairline and in toward the content instead of
     being chopped off at the edge of its canvas. The inner half is masked in
     fx.css, so anything reaching in fades out rather than ending abruptly. */
  --rail:       clamp(0px, 11vw, 200px);
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);   /* UI: leaves fast, arrives slow */
  --ease-snap:  cubic-bezier(0.16, 1, 0.3, 1);    /* UI: harder still, for taps */
  /* Content: barely any speed off the mark, then a long asymptotic settle.
     This is the one that reads as liquid. Do not use it on buttons — it
     feels unresponsive when you have just clicked something. */
  --ease-liquid: cubic-bezier(0.32, 0.26, 0.18, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);

  /* Always leave room for the scrollbar, even on views short enough not to
     need one. Page height is set by the tallest slide, so switching between
     a long view and a short one made the scrollbar appear and disappear, and
     the whole page jumped sideways by its width. Reserving the space costs a
     strip of background nobody looks at and removes the jump entirely. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Everything real sits above the FX layer. */
.site-header, .site-main, .site-footer { position: relative; z-index: 1; }

.site-main { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

img, svg, video, canvas { display: block; max-width: 100%; }

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; stroke-linejoin: miter; }

kbd {
  font: 500 0.72em/1 var(--font-mono);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  padding: 0.28em 0.42em;
  color: var(--dim);
  background: var(--surface);
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

/* ---------- shared primitives ------------------------------ */

/* The little uppercase mono labels that do most of the technical talking. */
.label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A flat Unreal-style panel: hairline edge, faint top highlight, no glow. */
.panel {
  position: relative;
  background: linear-gradient(to bottom, var(--panel-2), var(--panel));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 24px 60px -34px rgba(0, 0, 0, 0.95);
}

/* Panel title bar — the row of small caps across the top of a panel. */
.panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.44rem 0.7rem;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.018);
  border-radius: var(--radius) var(--radius) 0 0;
}
/* The bar belongs to the slide under it, so it carries that slide's accent:
   blue, yellow, or the full spectrum on the rainbow one. It picks this up
   for free, because --accent is set per slide and rewritten every frame. */
.panel__bar .label {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: color-mix(in srgb, var(--accent) 80%, var(--text));
}
.panel__tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  /* Tinted the same way but weaker than the label, so the bar still has a
     hierarchy rather than two things shouting the same colour. */
  color: color-mix(in srgb, var(--accent) 45%, var(--dim));
  font-variant-numeric: tabular-nums;
}

/* Square-ish action button. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.56rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
              color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  color: color-mix(in srgb, var(--accent) 45%, var(--text));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
              0 8px 26px -14px color-mix(in srgb, var(--accent) 90%, transparent);
}
.btn svg { width: 0.9em; height: 0.9em; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0.5rem; left: 0.5rem;
  z-index: 100;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.25s var(--ease);
}
.skip-link:focus-visible { transform: none; }

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.noscript {
  margin: var(--gutter);
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--pop);
  border-radius: var(--radius-sm);
  color: var(--dim);
}

/* Anyone who has asked their OS for less motion gets a calm version. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}