@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/karla-700.woff2) format('woff2');
}

:root {
  --rust: #892203;
  --gold: #eeab3d;
  /* the mark is a square window onto the logo art (x 418–1418, y 121–1121 of 2048×1316) */
  --m: min(88vw, 56svh, 600px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--rust);
  -webkit-text-size-adjust: 100%;
}

body {
  /* nothing here is meant to be selected: clicking the logo replays it, and Safari's
     Live Text would otherwise highlight the words inside the logo art on a double-click */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

.stage {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(24px + env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom));
  overflow: clip;
}

.mark {
  position: relative;
  width: var(--m);
  height: var(--m);
  margin: 0;
  font-size: 0;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

/* the logo's own dark glow, rebuilt in CSS so it is already there while the beads come in */
.glow {
  position: absolute;
  left: -44.1%;
  top: -50.4%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    #521220 0%, #56131e 20%, #5b141c 30%, #631718 40%, #6d1912 50%,
    #761c0d 60%, #7e1e0a 70%, #831f08 80%, #872105 90%, #892004 97%, rgba(137, 34, 3, 0) 100%);
  pointer-events: none;
}

#logo {
  position: absolute;
  left: -41.8%;
  top: -12.1%;
  width: 204.8%;
  height: auto;
  max-width: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 47.7% 46.9%, #000 80%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 47.7% 46.9%, #000 80%, transparent 100%);
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.soon {
  position: relative;
  margin: clamp(28px, 6svh, 56px) 0 0;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'Karla', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 1.3vw + 7px, 15px);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.soon::before,
.soon::after {
  content: '';
  width: clamp(28px, 6vw, 56px);
  height: 1px;
  background: currentColor;
  opacity: .55;
}
/* letter-spacing trails the last letter; pull it back so the line stays centered */
.soon { padding-left: .42em; }

#beads {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---- animated entrance (html.anim is set by boot.js before paint) ---- */
html.anim #logo { opacity: 0; animation: failsafe .9s ease 7s forwards; }
html.anim .soon { opacity: 0; animation: failsafe .9s ease 7.4s forwards; }
html.anim .mark.ready { cursor: pointer; }
@keyframes failsafe { to { opacity: 1; } }

#logo, .soon { transition: opacity 1.3s ease, transform 1.3s cubic-bezier(.2, .7, .2, 1); }
html.anim .soon { transform: translateY(8px); }
html.anim .soon.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  #logo, .soon { transition: none; }
}