/* Stage canvas */
#stage { position:fixed; inset:0; width:100vw; height:100vh; z-index:50; pointer-events:none; mix-blend-mode:difference; }

/* Hero copy overlay */
.hero-space { height:100vh; position:relative; }
.hero-copy { position:absolute; left:0; right:auto; bottom:9%; text-align:left; padding:0 56px; max-width:640px;
  pointer-events:none; opacity:0; transform:translateY(20px); }
.hero-copy.in { opacity:1; transform:translateY(0); }
.hero-copy h1 { font-family:var(--display); font-weight:500; font-size:clamp(34px,6vw,76px);
  line-height:0.98; letter-spacing:-0.02em; max-width:16ch; margin:0; }
.hero-copy p { margin-top:18px; font-size:clamp(12px,1.3vw,15px); letter-spacing:0.04em;
  color:var(--muted); max-width:44ch; line-height:1.7; }
@media(max-width:640px){ .hero-copy { padding:0 24px; } }

/* Loading poster */
#poster { position:fixed; inset:0; z-index:90; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:32px; background:var(--bg);
  transition:opacity .35s; }
#poster.hidden { opacity:0; pointer-events:none; }
.poster-mark { display:flex; align-items:center; justify-content:center; }
.poster-mark svg { height:128px; width:auto; display:block; }
.loader-track { width:160px; height:2px; background:var(--line); overflow:hidden; }
.loader-fill  { height:100%; width:0%; background:var(--text); transition:width .15s; }
.poster-pct   { font-size:11px; letter-spacing:0.2em; color:var(--muted); }