/* ── FILM — fixed WebGL canvas + fixed copy layer + weighted scroll spacers.
   The DOM sun hands off to the three.js gold coin at matched screen position. ── */
#scene-canvas {
  position: fixed;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
}

.copy-layer {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.beat-copy {
  position: absolute;
  opacity: 0;
  will-change: opacity, transform;
  max-width: min(90vw, 460px);
}
.beat-copy__eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sun);
}
.beat-copy__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--bone);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}
.beat-copy__body {
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--bone-soft);
}
.beat-copy__mono {
  margin: 16px 0 0;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--sun);
}

/* per-beat placement — object holds the upper frame; words get the margins */
.beat-copy--handoff { left: 50%; bottom: 11vh; transform: translateX(-50%); text-align: center; }
.beat-copy--handoff .beat-copy__mono { margin: 0; font-size: 1rem; }
.beat-copy--mint { left: clamp(24px, 7vw, 110px); bottom: 10vh; }
.beat-copy--transaction { right: clamp(24px, 7vw, 110px); bottom: 10vh; text-align: right; }
/* Step 2 rides bottom-right while the macro glide reads the bottom bar —
   low enough to clear the zoomed plate crossing the frame's mid */
.beat-copy--guardrails { right: clamp(24px, 7vw, 110px); bottom: 5vh; text-align: right; }
/* Step 4 copy sits lower-left under the (left-biased) lattice — the right
   40% belongs to the growing ledger panel */
.beat-copy--dock { left: clamp(24px, 5vw, 90px); bottom: 6vh; text-align: left; max-width: 46ch; }
@media (max-width: 860px) {
  /* Step 4: the copy pins to the top so it never fights the ledger list
     scrolling up behind it — every errand gets to pass through view */
  .beat-copy--dock {
    left: var(--pad-gutter); right: var(--pad-gutter);
    top: calc(66px + 3vh); bottom: auto;
    max-width: none;
  }
}

@media (max-width: 860px) {
  .beat-copy--mint,
  .beat-copy--guardrails,
  .beat-copy--transaction {
    left: var(--pad-gutter);
    right: var(--pad-gutter);
    bottom: 8vh;
    max-width: none;
    text-align: left;
  }
}

/* ── guardrail chips — real designed DOM beside the coin ── */
.chip-layer {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.guard-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(250, 204, 21, 0.35);
  background: rgba(12, 22, 17, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--bone);
  white-space: nowrap;
}
.guard-chip .tick {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.6);
}
.chip-layer .guard-chip {
  position: absolute;
  opacity: 0;
  transform: translate(var(--chip-x, 0px), var(--chip-y, 12px));
  will-change: opacity, transform;
}
.guard-chip--l1 { left: 50%; top: 24%; --chip-x: calc(-100% - 34vmin); }
.guard-chip--l2 { left: 50%; top: 38%; --chip-x: calc(-100% - 37vmin); }
.guard-chip--l3 { left: 50%; top: 52%; --chip-x: calc(-100% - 34vmin); }
.guard-chip--r1 { left: 50%; top: 28%; --chip-x: 34vmin; }
.guard-chip--r2 { left: 50%; top: 42%; --chip-x: 37vmin; }
.guard-chip--r3 { left: 50%; top: 56%; --chip-x: 34vmin; }

@media (max-width: 680px) {
  .guard-chip { font-size: 10.5px; padding: 7px 11px; }
  .guard-chip--l1 { left: 4vw; top: auto; bottom: 45vh; --chip-x: 0; }
  .guard-chip--l2 { left: 4vw; top: auto; bottom: 39vh; --chip-x: 0; }
  .guard-chip--l3 { left: 4vw; top: auto; bottom: 33vh; --chip-x: 0; }
  .guard-chip--r1 { left: auto; right: 4vw; top: auto; bottom: 45vh; --chip-x: 0; }
  .guard-chip--r2 { left: auto; right: 4vw; top: auto; bottom: 39vh; --chip-x: 0; }
  .guard-chip--r3 { left: auto; right: 4vw; top: auto; bottom: 33vh; --chip-x: 0; }
}

/* ── scroll spacers — heights assigned at runtime from BEATS.
   The top gradient continues the hero's warm dark into the void. ── */
#film {
  position: relative;
  background: linear-gradient(to bottom, rgb(33, 24, 10) 0%, rgba(33, 24, 10, 0) 16%, transparent 100%);
}
.beat { display: block; width: 100%; }