:root {
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
  display: grid;
  place-items: center;
  transition: background .8s var(--ease), color .8s var(--ease);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.brand {
  position: fixed;
  bottom: 1.2rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .35;
  transition: opacity .4s var(--ease), letter-spacing .4s var(--ease);
  pointer-events: none;
}

.brand__link {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
  transition: opacity .3s var(--ease);
}

.brand__link:hover {
  opacity: .6;
}
.brand.is-hidden   { opacity: 0; }
.brand.is-changing { opacity: 0; }

/* Арабский, иврит, персидский: буквы соединяются, трекинг только мешает */
.brand__link #brand-word.is-rtl {
  letter-spacing: .08em;
  text-transform: none;
  direction: rtl;
  display: inline-block;
}

/* CJK: иероглифы моноширинные, крупный трекинг разносит их слишком далеко */
.brand__link #brand-word.is-cjk {
  letter-spacing: .18em;
  text-transform: none;
  display: inline-block;
}

.brand.is-hidden { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}