/*
 * sebastianschasse.de: the terminal page.
 *
 * Still no classes and no ids: elements are styled by tag, role and
 * data attributes. JavaScript sets html[data-mode] to
 *   loading  while modules and fonts load
 *   3d       the workshop scene (WebGL)
 *   flat     the terminal alone, no WebGL
 * Without JavaScript there is no data-mode and <main> is shown.
 *
 * Type: IBM 3270 by Ricardo Banffy et al. (BSD-3-Clause / OFL), subset to WOFF2.
 *       IBM VGA 9x16 by VileR (CC BY-SA 4.0) as fallback for missing glyphs.
 */

@font-face {
  font-family: "IBM 3270";
  src: url("fonts/3270-Regular.woff2") format("woff2");
  font-display: block;
}

@font-face {
  font-family: "IBM VGA";
  src: url("fonts/WebPlus_IBM_VGA_9x16.woff2") format("woff2");
  font-display: block;
}

:root {
  color-scheme: dark;
  --night: #0b0a0e;
  --phosphor: #e0891a;
  --phosphor-hi: #ffc04a;
  --glow: 0 0 .2em rgb(255 138 0 / .5), 0 0 1.1em rgb(255 106 0 / .15);
  background: var(--night);
  color: var(--phosphor);
  font: 1.25rem/1.4 "IBM 3270", "IBM VGA", ui-monospace, monospace;
  text-shadow: var(--glow);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
}

main {
  max-width: 64ch;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

h1 {
  font-size: 2rem;
  font-weight: normal;
  color: var(--phosphor-hi);
}

a {
  color: var(--phosphor-hi);
  text-underline-offset: .2em;
}

a:focus-visible {
  outline: 2px solid var(--phosphor-hi);
  outline-offset: 2px;
}

::selection {
  background: var(--phosphor);
  color: var(--night);
  text-shadow: none;
}

/* ---- while loading (JS running): a blinking cursor in the dark ---------- */

html[data-mode="loading"] body::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  width: .6em;
  height: .12em;
  background: var(--phosphor);
  box-shadow: var(--glow);
  animation: blink 1.05s steps(1) infinite;
}

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

/* ---- once the terminal runs ------------------------------------------- */

html[data-mode="3d"],
html[data-mode="flat"] {
  overflow: hidden;
  overscroll-behavior: none;
}

html[data-mode="3d"] body,
html[data-mode="flat"] body {
  height: 100dvh;
  overflow: hidden;
}

/* keep the real text for screen readers and crawlers, but out of sight */
html[data-mode] main,
section[role="log"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Shift+Tab out of the terminal lands on these links: show them as a small panel instead of focusing
   something invisible. Only the paragraphs with links, the intro stays hidden. */
html[data-mode] main:focus-within {
  position: fixed;
  inset: auto 1rem 1rem 1rem;
  z-index: 2;
  width: auto;
  height: auto;
  max-height: calc(100dvh - 2rem);
  margin: 0;
  padding: 1rem 1.5rem;
  overflow: auto;
  clip-path: none;
  white-space: normal;
  background: var(--night);
  outline: 2px solid var(--phosphor-hi);
}

html[data-mode] main:focus-within > :not(:has(a)) {
  display: none;
}

html[data-mode] main:focus-within > p {
  margin: .5em 0;
}

html[data-mode="3d"] canvas,
html[data-mode="flat"] canvas {
  position: fixed;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100dvh;
  touch-action: pinch-zoom; /* one finger scrolls the terminal (JS); two fingers zoom, for anyone who needs it */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* no WebGL: the bare terminal, scaled to fit, with a CSS glow */
html[data-mode="flat"] body {
  background: radial-gradient(ellipse at center, #1a0f05 0%, var(--night) 75%);
}

html[data-mode="flat"] canvas {
  object-fit: contain;
  padding: max(2vmin, env(safe-area-inset-top)) max(2vmin, env(safe-area-inset-right)) max(2vmin, env(safe-area-inset-bottom)) max(2vmin, env(safe-area-inset-left));
  box-sizing: border-box;
  filter: drop-shadow(0 0 .35vmin rgb(255 138 0 / .55)) drop-shadow(0 0 2.5vmin rgb(255 106 0 / .18));
}

/* the input that brings up the phone keyboard; never visible */
textarea {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  resize: none;
  font-size: 16px; /* below 16px iOS zooms on focus */
  color: transparent;
  background: transparent;
  caret-color: transparent;
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  html[data-mode="loading"] body::after {
    animation: none;
  }
}