/* ==========================================================================
   powers-technology.systems
   One hand-written stylesheet, no preprocessor, no build step.

    1. Fonts            6. Hero              11. Case studies
    2. Tokens           7. Buttons and tags  12. Diagrams
    3. Base             8. Cards             13. 404
    4. Layout           9. Sections          14. Footer
    5. Header          10. Terminal          15. Motion preferences
   ========================================================================== */


/* 1. Fonts
   -------------------------------------------------------------------------- */

/* JetBrains Mono, Latin subset, variable weight. SIL OFL 1.1: see ../fonts/OFL.txt */
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-var.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* Local fallbacks resized to JetBrains Mono's metrics (0.6em advance,
   1.02em ascent, 0.30em descent) so text doesn't shift when the web font
   swaps in. Consolas ships with Windows, Menlo with macOS. */
@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local("Consolas");
  size-adjust: 109.13%;
  ascent-override: 93.47%;
  descent-override: 27.49%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "JetBrains Mono Fallback Mac";
  src: local("Menlo");
  size-adjust: 99.7%;
  ascent-override: 102.3%;
  descent-override: 30.1%;
  line-gap-override: 0%;
}


/* 2. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Contrast against --bg: text 16.4:1, text-soft 11.9:1, muted 6.4:1, accent 10.9:1 */
  --bg: #0b0e11;
  --bg-deep: #07090b;
  --surface: #131920;
  --surface-raised: #19212a;
  --border: #232b34;
  --border-strong: #34414e;
  --text: #e6edf3;
  --text-soft: #c3ccd6;
  --muted: #8b96a3;
  --accent: #38d5e8;
  --accent-hover: #74e3f0;
  --accent-soft: rgb(56 213 232 / 0.1);
  --accent-line: rgb(56 213 232 / 0.4);
  --error: #ff9b9b;

  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", "JetBrains Mono Fallback Mac", ui-monospace, monospace;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 70rem;
  --gutter: 1rem;
  --radius: 10px;
  --radius-sm: 6px;
  --header-h: 3.5rem;
}

@media (min-width: 40rem) {
  :root { --gutter: 1.5rem; }
}


/* 3. Base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.65 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-mono);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--accent-hover);
  text-decoration-thickness: 2px;
}

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

::selection {
  background: var(--accent);
  color: var(--bg);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

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

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

.skip-link {
  position: absolute;
  top: -4rem;
  left: var(--gutter);
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: var(--bg);
  font: 600 0.9375rem/1 var(--font-mono);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: 0.5rem;
}

.skip-link:hover {
  color: var(--bg);
}


/* 4. Layout
   -------------------------------------------------------------------------- */

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

.section {
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
  border-top: 1px solid var(--border);
}

.section-head {
  max-width: 44rem;
  margin-bottom: 2rem;
}

.section-head h2 {
  font-size: clamp(1.5rem, 3.6vw, 2rem);
  font-weight: 700;
}

.section-lede {
  margin-top: 0.75rem;
  color: var(--muted);
}

.section-foot {
  margin-top: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
}

/* Shell-prompt label above each heading, e.g. "~/about $ cat about.md" */
.prompt {
  margin-bottom: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}

.prompt-path {
  color: var(--accent);
}

.prompt-sym {
  color: var(--muted);
}

.flow > * + * {
  margin-top: 1rem;
}


/* 5. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(11 14 17 / 0.9);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: 700 0.875rem/1 var(--font-mono);
  letter-spacing: 0.02em;
  text-decoration: none;
}

.brand:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.nav ul {
  display: flex;
  gap: clamp(0.85rem, 3vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  display: inline-block;
  padding-block: 0.5rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  text-decoration: none;
}

.nav a:hover {
  color: var(--text);
}


/* 6. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4rem, 12vw, 8rem) clamp(3.5rem, 9vw, 6rem);
}

/* Faint grid, faded out with a mask so it never competes with the text */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.45;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 75% 35%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 70% at 75% 35%, #000 10%, transparent 70%);
}

.hero h1 {
  font-size: clamp(2.5rem, 9vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}

.tagline {
  margin-top: 1rem;
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: clamp(0.875rem, 2.3vw, 1.0625rem);
}

/* Each item carries its own separator so lines only break between items */
.tagline span {
  white-space: nowrap;
}

/* Left margin only: the space between spans supplies the right-hand gap */
.tagline span:not(:last-child)::after {
  content: "|";
  content: "|" / "";
  margin-left: 0.6em;
  color: var(--accent);
}

.hero-statement {
  max-width: 36rem;
  margin-top: 1.5rem;
  font-size: clamp(1.125rem, 2.7vw, 1.375rem);
  line-height: 1.5;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

/* Blinking block cursor. Stops (and stays visible) under reduced motion. */
.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.15em;
  margin-left: 0.2em;
  vertical-align: -0.2em;
  background: var(--accent);
  animation: blink 1.1s steps(1, end) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}


/* 7. Buttons and tags
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent);
  font: 500 0.9375rem/1 var(--font-mono);
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
}

.btn-primary:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  color: var(--bg);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tags li {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-raised);
  color: var(--text-soft);
  font: 500 0.8125rem/1.2 var(--font-mono);
}


/* 8. Cards
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.15s;
}

.card:hover {
  border-color: var(--accent-line);
}

.card-kicker {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.card h3 {
  font-size: 1.1875rem;
  font-weight: 700;
}

.card h3 a {
  color: var(--text);
  text-decoration: none;
}

/* Stretch the title link over the whole card */
.card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card h3 a:focus-visible {
  outline: none;
}

.card:has(h3 a:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.card-summary {
  color: var(--text-soft);
}

.card-more {
  margin-top: auto;
  padding-top: 0.25rem;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

.card:hover .card-more {
  color: var(--accent-hover);
}

/* Repository cards */
.repo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.repo h3 {
  font-size: 1.0625rem;
}

.repo-lang {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.repo-lang::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: #3572a5; /* GitHub's Python color */
}


/* 9. Sections
   -------------------------------------------------------------------------- */

/* About: single column until a headshot is added, then two columns */
.about {
  display: grid;
  gap: 2rem;
  align-items: start;
}

.about-text {
  max-width: 44rem;
  color: var(--text-soft);
  font-size: 1.125rem;
}

.headshot {
  width: 100%;
  max-width: 13rem;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

@media (min-width: 48rem) {
  .about:has(.headshot) {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 3rem;
  }
}

/* Tech stack */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 2rem 2.5rem;
}

.stack-group h3 {
  margin-bottom: 0.8rem;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Certifications */
.cert-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cert-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.95rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  font: 500 0.875rem/1.3 var(--font-mono);
}

.cert-list li::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
}

/* How this site works */
.meta-grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 60rem) {
  .meta-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 3.5rem;
  }
}

.meta-text {
  color: var(--text-soft);
}

.pipeline-block + .pipeline-block {
  margin-top: 1.75rem;
}

.pipeline-block h3 {
  margin-bottom: 0.75rem;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Pipeline: an ordered list drawn as a flow. Row on wide screens, column on phones. */
.pipeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pipeline li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.pipeline li + li::before {
  content: "\2192";
  content: "\2192" / "";
  color: var(--muted);
  font-family: var(--font-sans);
}

.step {
  display: flex;
  flex-direction: column;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.step-name {
  color: var(--text);
  font: 600 0.875rem/1.3 var(--font-mono);
}

.step-note {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

@media (max-width: 40rem) {
  .pipeline {
    gap: 0.25rem;
  }

  .pipeline,
  .pipeline li {
    flex-direction: column;
    align-items: stretch;
  }

  .pipeline li {
    gap: 0.25rem;
  }

  .pipeline li + li::before {
    content: "\2193";
    content: "\2193" / "";
    align-self: center;
  }
}

/* Contact */
.contact-list {
  max-width: 40rem;
  margin: 0;
  font-family: var(--font-mono);
}

.contact-list div {
  display: grid;
  gap: 0.25rem;
  padding-block: 0.9rem;
  border-bottom: 1px dashed var(--border-strong);
}

.contact-list div:first-child {
  border-top: 1px dashed var(--border-strong);
}

.contact-list dt {
  color: var(--muted);
  font-size: 0.875rem;
}

.contact-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 36rem) {
  .contact-list div {
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: baseline;
    gap: 1rem;
  }
}


/* 10. Terminal
   -------------------------------------------------------------------------- */

.term {
  max-width: 52rem;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-deep);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.7);
}

.term-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.term-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--border-strong);
}

.term-title {
  margin-left: 0.5rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

.term-log {
  height: clamp(15rem, 45vh, 21rem);
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  line-height: 1.6;
}

.term-log p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.t-echo {
  margin-top: 0.85rem;
  color: var(--text);
}

.t-echo:first-child {
  margin-top: 0;
}

.t-ps1 {
  color: var(--accent);
}

.t-out {
  color: var(--text-soft);
}

.t-head {
  margin-top: 0.5rem;
  color: var(--text);
  font-weight: 700;
}

.t-muted {
  color: var(--muted);
}

/* Indent via padding so wrapped lines keep the indent */
.t-indent {
  padding-left: 2ch;
}

.t-err {
  color: var(--error);
}

.term-form {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--border);
}

.term-form:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.term-input {
  flex: 1;
  min-width: 0;
  padding: 0.2rem 0;
  border: 0;
  background: transparent;
  color: var(--text);
  caret-color: var(--accent);
  font: 400 1rem/1.4 var(--font-mono); /* 16px stops iOS zooming on focus */
}

.term-input:focus {
  outline: none;
}

.term-input::placeholder {
  color: var(--muted);
}

.term-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 52rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.chip {
  min-height: 2.25rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font: 500 0.8125rem/1 var(--font-mono);
  cursor: pointer;
}

.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.chip:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}


/* 11. Case studies
   -------------------------------------------------------------------------- */

.case {
  max-width: 46rem;
  margin-inline: auto;
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(3.5rem, 9vw, 5.5rem);
}

.case h1 {
  font-size: clamp(1.875rem, 6vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.lede {
  margin-top: 1rem;
  color: var(--text-soft);
  font-size: 1.1875rem;
  line-height: 1.55;
}

.case > .tags {
  margin-top: 1.5rem;
}

.case-section {
  margin-top: 2.75rem;
}

.case-section h2 {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-bottom: 1rem;
  font-size: 1.3125rem;
  font-weight: 700;
}

.case-section h2 .num {
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 500;
}

.case-section p,
.case-section li {
  color: var(--text-soft);
}

.points {
  margin: 0;
  padding-left: 1.25rem;
}

.points li + li {
  margin-top: 0.75rem;
}

.points li::marker {
  color: var(--accent);
}

.points strong {
  color: var(--text);
  font-weight: 600;
}

.case-section .pipeline {
  margin-top: 1.5rem;
}

.case-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
}


/* 12. Diagrams (inline SVG, styled from here so the CSP needs no inline styles)
   -------------------------------------------------------------------------- */

.figure {
  margin: 2.5rem 0 0;
  padding: 1.5rem 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.figure svg {
  width: 100%;
  max-width: 29rem;
  margin-inline: auto;
}

/* Give diagrams every pixel on phones */
@media (max-width: 30rem) {
  .figure {
    padding-inline: 0.25rem;
  }
}

.figure .pipeline {
  justify-content: center;
}

.figure figcaption {
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: 0.875rem;
  text-align: center;
}

.dg {
  font-family: var(--font-mono);
}

.dg-node {
  fill: var(--surface-raised);
  stroke: var(--border-strong);
  stroke-width: 1;
}

.dg-node-accent {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 1.25;
}

.dg-group {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1;
  stroke-dasharray: 6 5;
}

.dg-label {
  fill: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.dg-sub {
  fill: var(--muted);
  font-size: 12px;
}

.dg-edge {
  fill: var(--muted);
  font-size: 11px;
}

.dg-group-label {
  fill: var(--accent);
  font-size: 12px;
}

.dg-line {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
}

.dg-line-accent {
  stroke: var(--accent);
}

.dg-dash {
  stroke-dasharray: 4 4;
}

.dg-arrowhead {
  fill: var(--muted);
}

.dg-arrowhead-accent {
  fill: var(--accent);
}


/* 13. 404
   -------------------------------------------------------------------------- */

.notfound {
  max-width: 46rem;
  margin-inline: auto;
  padding-block: clamp(3rem, 10vw, 6rem);
}

.notfound h1 {
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 800;
}

.notfound .term {
  margin-top: 2rem;
}

.notfound .term-log {
  height: auto;
}

.notfound .actions {
  margin-top: 2rem;
}

.ls-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}


/* 14. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: 2rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.875rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text);
  text-decoration: underline;
}


/* 15. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .cursor {
    animation: none;
  }
}