/* Fonts loaded via <link> in index.html */

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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #ffffff;
  cursor: none;
  font-family: 'Slabo 13px', serif;
}

#bg-video {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0; opacity: 0;
  transition: opacity 0.9s ease;
}

#draw-canvas {
  position: fixed; inset: 0;
  z-index: 3; pointer-events: none;
}

#stage {
  position: fixed; inset: 0;
  z-index: 4;
}

#bones-layer, #head-layer {
  mix-blend-mode: multiply;
  transition: mix-blend-mode 0.3s;
}

/* ── Display title: "the strike / of the / heron" ────── */
#display-title {
  position: fixed;
  top: 52px;
  left: 30px;
  z-index: 10;
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-size: 200px;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: #d2deef;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.9s ease;   /* fades with watch mode */
}

/* ── Top left: RISD label ─────────────────────────────── */
#top-left {
  position: fixed;
  top: 28px; left: 36px;
  z-index: 10;
}

#title {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1;
  color: #1ca06a;
  transition: color 0.6s ease;
}

/* ── Top right: clear ─────────────────────────────────── */
#top-right {
  position: fixed;
  top: 28px; right: 36px;
  z-index: 10;
}

#clear-btn {
  background: none; border: none;
  font-family: 'Slabo 13px', serif;
  font-size: 16px;
  letter-spacing: 0.06em;
  color: #7cb0c8;          /* same blue as body text */
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  opacity: 0.75;
  transition: opacity 0.2s;
  padding: 0;
}
#clear-btn:hover { opacity: 1; }
#clear-btn .dot { font-size: 30px; }

/* ── Hint ─────────────────────────────────────────────── */
#hint {
  position: fixed;
  top: 160px; right: 200px;
  z-index: 10;
  font-size: 16px;
  color: #7cb0c8;
  letter-spacing: 0.04em;
  line-height: 1.5;
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

/* ── Nav: DRAW / WATCH ────────────────────────────────── */
#nav {
  position: fixed;
  bottom: 300px;
  left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  padding: 0 36px;
  pointer-events: none;
}

.nav-btn {
  background: none; border: none;
  font-family: 'Slabo 13px', serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: #1ca06a;          /* same green as RISD title */
  cursor: pointer;
  pointer-events: all;
  transition: color 0.5s ease, opacity 0.5s ease;
  opacity: 1;
  padding: 0;
}
.nav-btn.active {
  color: #1ca06a;
  opacity: 1;
}
.nav-btn:hover { opacity: 0.85; }

/* ── Body copy ────────────────────────────────────────── */
#body-copy {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 500px;
  font-size: 16px;
  color: #7cb0c8;
  line-height: 1.65;
  text-align: left;
  pointer-events: none;
}