/* BASE — reset, fonts, page background, shared utilities */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
}

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

html,
body {
  height: 100%;
}

body {
  min-height: 100dvh;
  overflow: hidden;
  background-color: var(--sky-base);
  transition: background-color var(--dur-fade) ease;
}

/* Night and day skies cross-fade behind the desktop Home menu. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  transition: opacity var(--dur-fade) ease;
}

body::before {
  background-image: var(--sky-night);
  opacity: 1;
}

body::after {
  background-image: var(--sky-day);
  opacity: 0;
}

body.theme-day::before {
  opacity: 0;
}

body.theme-day::after {
  opacity: var(--sky-day-opacity);
}

button,
input {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* The hand appears over everything you can press. */
button:not(:disabled),
a[href],
label[for],
[role="button"],
[role="radio"] {
  cursor: var(--cursor-point);
}

button:disabled {
  cursor: default;
}

/* When pointer.js draws the hand, the system cursor hides, except in text
   fields, which keep the normal text cursor. */
html.has-soft-cursor,
html.has-soft-cursor * {
  cursor: none !important;
}

html.has-soft-cursor input,
html.has-soft-cursor textarea {
  cursor: text !important;
}

.soft-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  width: var(--soft-cursor-size);
  height: var(--soft-cursor-size);
  margin: calc(-1 * var(--soft-cursor-hot-y)) 0 0 calc(-1 * var(--soft-cursor-hot-x));
  transform-origin: var(--soft-cursor-hot-x) var(--soft-cursor-hot-y);
  pointer-events: none;
  will-change: transform;
}

.soft-cursor.is-hidden {
  opacity: 0;
}

.soft-cursor-hand {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: var(--soft-cursor-hot-x) var(--soft-cursor-hot-y);
  filter: var(--soft-cursor-shadow);
  transition: translate var(--dur-fast) var(--ease-fade), scale var(--dur-fast) var(--ease-fade);
}

/* pressing pokes the finger down a little */
.soft-cursor.is-pressing .soft-cursor-hand {
  translate: var(--soft-cursor-poke);
  scale: var(--soft-cursor-poke-scale);
}

/* a soft ring where a finger taps */
.tap-ripple {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  width: var(--ripple-size);
  height: var(--ripple-size);
  margin: calc(var(--ripple-size) / -2) 0 0 calc(var(--ripple-size) / -2);
  background: var(--ripple-face);
  border-radius: var(--radius-pill);
  pointer-events: none;
}

:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: var(--hairline);
  height: var(--hairline);
  padding: 0;
  margin: calc(-1 * var(--hairline));
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}