:root {
  --bg: #000000;
  --fg: #f3f1ec;
  --dim: #8e8b85;
  --faint: #56544f;
  --font: "Inter", ui-sans-serif, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

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

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  overscroll-behavior: none;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  html.custom-cursor, html.custom-cursor * { cursor: none !important; }
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.ui {
  position: fixed;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
}

/* ---------- opening type ---------- */

#title {
  top: 64px;
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 500;
  letter-spacing: .62em;
  padding-left: .62em; /* optically recentre tracked caps */
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 1.4s var(--ease) .25s, transform 1.4s var(--ease) .25s;
}

#sub {
  top: 80%;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--dim);
  opacity: 0;
  transition: opacity .9s var(--ease);
}

body.ready #title { opacity: 1; transform: none; }
body.ready #sub.show { opacity: 1; }

/* ---------- the callout ---------- */

#hint {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: none;
  mix-blend-mode: difference;
  color: #fff;
  opacity: 0;
  transition: opacity .7s var(--ease);
  white-space: nowrap;
}
#hint .line {
  display: block;
  width: var(--len, 120px);
  height: 1px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--ease);
}
#hint .txt {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .34em;
  transform: translateY(.5px);
}
#hint.show { opacity: 1; }
#hint.show .line { transform: scaleX(1); }
#hint.narrow { left: 0 !important; right: 0; justify-content: center; }
#hint.narrow .line { display: none; }
#hint.narrow .txt { padding-left: .34em; }
#hint.flip { flex-direction: row-reverse; }
#hint.flip .line { transform-origin: right center; }

/* ---------- after the break ---------- */

#broken > * {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .6s var(--ease), transform .8s var(--ease);
}
#broken.s1 #broke-h,
#broken.s2 #broke-p,
#broken.s3 #again { opacity: 1; transform: none; }
#broken.s3 { pointer-events: auto; }
#broken.hide > * { opacity: 0 !important; transition-duration: .14s; }

#broke-h {
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: .2em;
  padding-left: .2em;
  line-height: 1.1;
}
#broke-p {
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--dim);
}
#again {
  position: relative;
  margin-top: 22px;
  padding: 14px 8px 10px 8px;
  background: none;
  border: 0;
  color: var(--fg);
  font: 500 11px/1 var(--font);
  letter-spacing: .42em;
  padding-left: calc(8px + .42em);
  pointer-events: none;
  touch-action: manipulation;
}
#broken.s3 #again { pointer-events: auto; }
#again::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%) scaleX(.18);
  transition: transform .5s var(--ease);
}
#again:hover::after,
#again:focus-visible::after { transform: translateX(-50%) scaleX(1); }
#again:focus { outline: none; }

/* ---------- secrets ---------- */

#stop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(56px, 11vw, 150px);
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  visibility: hidden;
  z-index: 20;
}
#stop.on { visibility: visible; }

#veil {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .17s linear;
  z-index: 30;
}
#veil.on { opacity: 1; }
#veil.slow { transition-duration: 1.2s; }
#veil.out { transition-duration: .3s; }

#moved {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  letter-spacing: .12em;
  color: #cfccc6;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease);
  z-index: 31;
}
#moved.on { opacity: 1; }

/* ---------- token line ---------- */

#socials {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .28em;
  color: var(--faint);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.6s var(--ease);
}
#socials.show { opacity: 1; pointer-events: auto; }
#socials a,
#socials button {
  color: var(--dim);
  text-decoration: none;
  background: none;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  padding: 8px 0;
  transition: color .3s;
}
#socials a:hover,
#socials button:hover { color: var(--fg); }
#socials .sep { opacity: .6; }

#sound {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  right: 18px;
  background: none;
  border: 0;
  color: var(--faint);
  font: 500 10px/1 var(--font);
  letter-spacing: .22em;
  padding: 8px 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease) 1.2s, color .3s;
  z-index: 10;
  touch-action: manipulation;
}
body.ready #sound { opacity: 1; }
#sound:hover, #sound[aria-pressed="true"] { color: var(--dim); }
#sound:focus { outline: none; }

/* ---------- physical cursor ---------- */

#cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 60;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .25s;
}
#cursor.on { opacity: 1; }
#cursor .ring {
  position: absolute;
  left: -13px;
  top: -13px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .85);
  transition: transform .28s var(--ease), background-color .2s, border-color .2s;
}
#cursor.near .ring {
  transform: scale(.5);
  background: #fff;
}
#cursor.link .ring { transform: scale(.35); background: #fff; }
#cursor.down .ring { transform: scale(.28, .22); background: #fff; transition-duration: .06s; }