/* richardson.dev home page placeholder (#2947): design C "Power On"'s intro, held.
   intro.js draws the scene on #xmb and adds html.gl once it runs. Until then the page
   is black (C's "black screen until the first frame"). The CSS slab (.fallback) is the
   page without the scene: shown at once with JavaScript off (the <noscript> style in
   core/index.php), without WebGL or after a lost WebGL context (html.flat), and after
   3 s if intro.js never ran at all. Under the slab, drawn or CSS, sit the GitHub and
   LinkedIn buttons (nav.links, #3032): intro.js places them below the drawn slab
   (--mark-below) and shows them once the wordmark has assembled (html.ready). */

@font-face {
  font-family: "Jersey 10";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/vendor/jersey-10-latin-400-normal.woff2") format("woff2");
}

:root {
  /* The PS3's XMB blue (#3032), the same five values as intro.ts's BLUE. */
  --top: #2c74d8;
  --bottom: #081f52;
  --glow: #bfd9ff;
  --block: #1c4ea4;
  --edge: #e2eeff;
  --ink: #ffffff;
  /* The art pixel: about min(vw, vh) / 450 CSS px, 1.5-3. intro.js sets the exact value
     (a whole number of device pixels) while the scene runs. */
  --px: clamp(1.5px, calc(min(100vw, 100vh) / 450), 3px);
  /* One icon pixel of the buttons' glyphs: two art pixels. */
  --ip: calc(2 * var(--px));
  /* The CSS slab's font size, and where the buttons' row starts below the screen's centre:
     the slab's half height (line-height 1 plus its 0.16em padding) and a gap. intro.js
     replaces --mark-below with the drawn slab's while the scene runs. */
  --slab-font: clamp(36px, 10.5vw, 128px);
  --mark-below: calc(0.58 * var(--slab-font) + 10 * var(--px));
  color-scheme: dark;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: #000000;
  color: var(--ink);
  font-family: "Jersey 10", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

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

/* ---- The scene ---- */

#xmb {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  display: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.gl #xmb {
  display: block;
}

/* ---- The CSS slab: the wordmark without the scene ---- */

.fallback {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 0 16px;
  background: linear-gradient(var(--top), var(--bottom));
  visibility: hidden;
  /* A safety net: if intro.js never runs, the slab shows after 3 s. */
  animation: show 0s 3s forwards;
}

.flat .fallback {
  visibility: visible;
  animation: none;
}

.gl .fallback {
  display: none;
}

@keyframes show {
  to {
    visibility: visible;
  }
}

.slab {
  display: inline-block;
  max-width: 100%;
  padding: 0.12em 0.36em 0.04em;
  background: var(--block);
  font-size: var(--slab-font);
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
  -webkit-font-smoothing: none;
  text-shadow: 0.05em 0 0 rgba(0, 0, 0, 0.6), -0.05em 0 0 rgba(0, 0, 0, 0.6), 0 0.05em 0 rgba(0, 0, 0, 0.6),
    0 -0.05em 0 rgba(0, 0, 0, 0.6), 0.09em 0.09em 0 rgba(0, 0, 0, 0.6);
  box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge), calc(-1 * var(--px)) 0 0 0 var(--edge),
    var(--px) 0 0 0 var(--edge), calc(3 * var(--px)) calc(3 * var(--px)) 0 0 rgba(0, 0, 0, 0.35);
  animation: bob 4s steps(8) infinite;
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(-2 * var(--px)));
  }
}

/* ---- The buttons: GitHub and LinkedIn, under the wordmark (#3032) ---- */

.links {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(50% + var(--mark-below));
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(2 * var(--px)) calc(8 * var(--px));
  margin: 0;
  padding: 0 16px;
  visibility: hidden;
  /* The slab's safety net, the same 3 s: shown if intro.js never runs. */
  animation: show 0s 3s forwards;
}

.flat .links {
  visibility: visible;
  animation: none;
}

.gl .links {
  animation: none;
}

.gl.ready .links {
  visibility: visible;
}

.links a {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--px));
  padding: calc(2 * var(--px)) calc(3 * var(--px));
  color: var(--ink);
  font-size: calc(15 * var(--px));
  line-height: 1;
  letter-spacing: 0.04em;
  text-decoration: none;
  -webkit-font-smoothing: none;
  text-shadow: 0.05em 0.05em 0 rgba(0, 0, 0, 0.6);
}

/* C's rail box: the glyph on a --block square with --edge pixel borders. */
.links .box {
  display: grid;
  place-items: center;
  width: calc(13 * var(--ip));
  height: calc(13 * var(--ip));
  margin: var(--px);
  background: var(--block);
  box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge), calc(-1 * var(--px)) 0 0 0 var(--edge),
    var(--px) 0 0 0 var(--edge), calc(2 * var(--px)) calc(2 * var(--px)) 0 0 rgba(0, 0, 0, 0.35);
}

.links svg {
  display: block;
  width: calc(9 * var(--ip));
  height: calc(9 * var(--ip));
  fill: var(--ink);
}

.links a:hover,
.links a:focus-visible {
  color: var(--edge);
}

.links a:hover .box,
.links a:focus-visible .box {
  background: var(--top);
}

.links a:focus-visible {
  outline: var(--px) solid var(--edge);
  outline-offset: calc(2 * var(--px));
}

@media (prefers-reduced-motion: reduce) {
  .slab {
    animation: none;
  }
}