@layer reset, base, components, scene, sections, motion;

@font-face {
  font-family: "Michroma";
  src: url("../fonts/michroma.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-italic.woff2") format("woff2");
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Registered so they can transition and be animated by scroll timelines. */
@property --px { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --py { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --yaw { syntax: "<angle>"; inherits: true; initial-value: -24deg; }
@property --pitch { syntax: "<angle>"; inherits: true; initial-value: -9deg; }
@property --tyaw { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --tpitch { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --tiltk { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --zoom { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --lift { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --sx { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --sy { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --count { syntax: "<integer>"; inherits: false; initial-value: 5; }

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

  html,
  body,
  h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul, pre {
    margin: 0;
  }

  ol[class],
  ul[class] {
    padding: 0;
    list-style: none;
  }

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

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
  }

  table {
    border-collapse: collapse;
  }
}

@layer base {
  :root {
    --night-0: #05030a;
    --night-1: #0e0718;
    --night-2: #160c26;
    --night-3: #211038;
    --haze: #2c1648;
    --panel: #110a1d;
    --panel-2: #1a1029;
    --rule: #33244c;

    --cyan: #82e4dc;
    --cyan-deep: #4cc4ba;
    --magenta: #f119a0;
    /* White text on it reaches 4.6:1. */
    --magenta-deep: #dd0d8f;
    --pink: #ff5faf;
    --yellow: #ffd500;
    --blue: #6ca1d0;
    --crimson: #dc143c;

    --ink: #ece6f6;
    --ink-2: #bcb0d4;
    --ink-3: #8f81ab;

    --font-display: "Michroma", "Arial Black", sans-serif;
    --font-sans: "IBM Plex Sans", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
    --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.1rem);
    --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
    --step-2: clamp(1.35rem, 1.2rem + 0.75vw, 1.8rem);
    --step-3: clamp(1.7rem, 1.4rem + 1.5vw, 2.5rem);
    --step-4: clamp(2.3rem, 1.6rem + 3.4vw, 4.4rem);
    --step-chrome: clamp(1.9rem, 1.15rem + 2.9vw, 3.7rem);

    --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
    --wrap: 72rem;
    --bar-h: 4rem;
    --shadow-hard: 0.75rem 0.75rem 0 rgb(0 0 0 / 0.6);

    color-scheme: dark;
  }

  html {
    background: var(--night-0);
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--bar-h) + 1rem);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-height: 100svh;
    overflow-x: clip;
    font: 400 var(--step-0) / 1.65 var(--font-sans);
    color: var(--ink);
    background:
      linear-gradient(var(--night-1), var(--night-1)) top / 100% 100% no-repeat;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  ::selection {
    color: #fff;
    background: var(--magenta);
  }

  a {
    color: var(--cyan);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: rgb(130 228 220 / 0.45);
  }

  a:hover {
    color: #c9fff9;
    text-decoration-color: currentColor;
  }

  :focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 3px;
  }

  h1, h2, h3 {
    line-height: 1.15;
    text-wrap: balance;
  }

  h3 {
    font-size: var(--step-1);
    font-weight: 600;
  }

  p {
    text-wrap: pretty;
  }

  em {
    font-style: italic;
  }

  code,
  kbd,
  pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  /* Paths and commands may break anywhere when a line can't hold them. */
  code {
    padding: 0.05em 0.3em;
    border-radius: 3px;
    overflow-wrap: anywhere;
    color: #f4e9ff;
    background: rgb(255 255 255 / 0.07);
  }

  kbd {
    display: inline-block;
    min-width: 1.6em;
    padding: 0.05em 0.4em 0.1em;
    border: 1px solid #4a3a66;
    border-bottom-width: 3px;
    border-radius: 4px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    color: var(--ink);
    background: var(--panel-2);
  }

  pre code {
    padding: 0;
    background: none;
  }
}

@layer components {
  .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  .skip {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    font: 600 var(--step--1) / 1 var(--font-mono);
    color: var(--night-0);
    background: var(--yellow);
    translate: 0 -200%;
  }

  .skip:focus {
    translate: 0 0;
  }

  .wrap {
    width: min(100% - 2 * var(--gutter), var(--wrap));
    margin-inline: auto;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.85em 1.6em;
    border: 2px solid #f779c8;
    border-radius: 6px;
    font: 600 var(--step-0) / 1 var(--font-mono);
    letter-spacing: 0.01em;
    text-decoration: none;
    color: #fff;
    background: var(--magenta-deep);
    box-shadow: var(--shadow-hard);
    transition:
      translate 0.15s ease-out,
      box-shadow 0.15s ease-out,
      background-color 0.15s ease-out;
  }

  .btn:hover {
    color: #fff;
    translate: -2px -2px;
    box-shadow:
      0.9rem 0.9rem 0 rgb(0 0 0 / 0.6),
      0 0 1.6rem rgb(241 25 160 / 0.45);
  }

  .btn:active {
    translate: 0.4rem 0.4rem;
    box-shadow: 0.2rem 0.2rem 0 rgb(0 0 0 / 0.6);
  }

  .btn--ghost {
    border-color: var(--cyan);
    color: var(--cyan);
    background: var(--night-1);
  }

  .btn--ghost:hover {
    color: var(--night-0);
    background: var(--cyan);
    box-shadow:
      0.9rem 0.9rem 0 rgb(0 0 0 / 0.6),
      0 0 1.6rem rgb(130 228 220 / 0.4);
  }

  .btn--small {
    padding: 0.6em 1.05em;
    font-size: var(--step--1);
    box-shadow: 0.4rem 0.4rem 0 rgb(0 0 0 / 0.55);
  }

  /* Chrome lettering after the logo: blue sky, a hard horizon, violet
     ground. Michroma has one weight; the synthesized bold and the light
     stroke give its thin strokes enough area for the gradient, and the
     stroke draws an inline like the logo's letters. The longest heading,
     Screenshots, is 11.4em wide; on narrow phones the size follows the
     width of the column. */
  .chrome {
    margin-bottom: 0.6em;
    font: 700 min(var(--step-chrome), (100vw - 2 * var(--gutter)) / 11.6) / 1.05 var(--font-display);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: transparent;
    background: linear-gradient(
      180deg,
      #5a8fe8 0%,
      #9fd6ff 28%,
      #e4f8ff 46%,
      #ffffff 49.5%,
      #3a2c8c 50%,
      #6a5fd8 62%,
      #b6a9ff 80%,
      #ffd6f2 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 1px rgb(230 246 255 / 0.55);
    filter: drop-shadow(0 0.05em 0 rgb(241 25 160 / 0.6))
      drop-shadow(0 0 0.5em rgb(241 25 160 / 0.28));
  }

  /* A window as the TUI draws it: border in the dialog color, title bar,
     and a hard shadow offset like the window manager's shadow layer. */
  .tui {
    --c: var(--cyan);
    position: relative;
    border: 2px solid var(--c);
    border-radius: 4px;
    background: var(--panel);
    box-shadow: 0.9rem 0.7rem 0 rgb(0 0 0 / 0.62);
  }

  .tui__title {
    display: block;
    margin: 0;
    padding: 0.2em 1em;
    font: 600 var(--step--1) / 1.5 var(--font-mono);
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--night-0);
    background: var(--c);
  }

  .tui__body {
    padding: clamp(1rem, 0.6rem + 2vw, 2rem);
  }

  .prose > * + * {
    margin-top: 1.1em;
  }

  .prose p {
    max-width: 68ch;
  }

  .term-out {
    max-width: 100%;
    overflow-x: auto;
    padding: 1rem 1.25rem;
    border: 1px solid var(--rule);
    border-radius: 6px;
    font-size: var(--step--1);
    line-height: 1.7;
    color: var(--ink-2);
    background: var(--night-0);
    box-shadow: inset 0 0 2.5rem rgb(130 228 220 / 0.05);
  }

  .term-out .ln {
    color: var(--ink);
    user-select: all;
  }

  .term-out .ps {
    color: var(--magenta);
    user-select: none;
  }

  .term-out .out {
    color: var(--ink-3);
  }

  .cmd code {
    display: block;
    padding: 0.55rem 0.75rem;
    font-size: var(--step--1);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--ink);
    background: var(--night-0);
    user-select: all;
  }

  /* Header bar */
  .bar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 2rem);
    height: var(--bar-h);
    padding-inline: var(--gutter);
    border-bottom: 1px solid rgb(130 228 220 / 0.14);
    background: rgb(14 7 24 / 0.86);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    backdrop-filter: blur(12px) saturate(1.3);
  }

  .bar__home {
    flex: none;
    font: 700 1rem / 1 var(--font-display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: transparent;
    background: linear-gradient(180deg, #9fd6ff 0%, #ffffff 48%, #3a2c8c 52%, #b6a9ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }

  .bar__home:hover {
    color: transparent;
  }

  .bar__nav {
    display: flex;
    gap: clamp(0.9rem, 1.6vw, 1.6rem);
    margin-left: auto;
    overflow-x: auto;
    font: 500 var(--step--1) / 1 var(--font-mono);
    scrollbar-width: none;
  }

  .bar__nav a {
    padding-block: 0.6rem;
    white-space: nowrap;
    text-decoration: none;
    color: var(--ink-2);
  }

  .bar__nav a:hover {
    color: var(--cyan);
  }

  .bar__progress {
    position: absolute;
    inset: auto 0 -1px;
    display: none;
    height: 2px;
    background: linear-gradient(90deg, var(--magenta), var(--yellow));
    transform-origin: 0 50%;
  }

  @media (width < 52rem) {
    :root {
      --bar-h: 6.2rem;
    }

    .bar {
      flex-wrap: wrap;
      align-content: center;
      row-gap: 0.15rem;
    }

    .bar > .btn {
      margin-left: auto;
    }

    .bar__nav {
      order: 3;
      flex: 1 0 100%;
      margin-left: 0;
      mask: linear-gradient(90deg, #000 85%, transparent);
    }
  }
}