/* ---- animated character layer ---- */
.char-layer{ position:absolute; inset:0; pointer-events:none; z-index:4; }
.stage.char-hover{ cursor:pointer; }
.char{
  position:absolute; transform:translateX(-50%);
  pointer-events:none;
  transform-origin:bottom center;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), filter .28s ease;
  outline:none;
}
.char video, .char canvas, .char img{
  display:block; height:100%; width:auto;
  user-select:none; -webkit-user-select:none;
  background:transparent;
}
.char.hidden{ display:none; }
/* note: no drop-shadow filters here — Chromium shadows a <video>'s full box, not its alpha */
.char.hover, .char:focus-visible, .char.active{
  transform:translateX(-50%) translateY(-10px) scale(1.09);
  filter:brightness(1.1) saturate(1.08);
}
.char[data-char="tent"].hover{ transform:translateX(-50%) translateY(-4px) scale(1.025); z-index:4 !important; }
.char .tag{ position:absolute; bottom:calc(100% + 6px); left:50%; width:170px; transform:translateX(-50%) translateY(6px); }
.char.hover .tag, .char:focus-visible .tag{ opacity:1; transform:translateX(-50%) translateY(0); }
.char .tag .eyebrow{ display:block; font-size:11px; letter-spacing:.03em; color:var(--gold); font-weight:600; margin-bottom:2px; }
.char .tag .title{ display:block; font-family:'Fraunces',serif; font-size:16px; line-height:1.2; margin-bottom:2px; }
.char .tag .sub{ display:block; font-size:12px; opacity:.8; }
/* ---- world: fixed-aspect scene that scales like background-size:cover ---- */
.world{ position:absolute; bottom:0; left:0; }
/* ---- viewport cover: one 16:9 design stage, scaled as a single unit ---- */
html, body{ background:#988678; } /* sampled from the scene; shows only for a frame while assets load */
.stage-viewport{ position:relative; width:100vw; height:100vh; height:100dvh; overflow:hidden; background:#988678; }
.stage{ position:absolute; top:0; left:0; transform-origin:0 0; will-change:transform; }
.dock{ left:var(--dock-cx, 50%); transform:translateX(-50%) scale(var(--dock-scale, 1)); transform-origin:bottom center; }
.world .bg-layer{ background-size:100% 100%; background-position:center bottom; }
/* the star sits over the doorway in the new artwork */
.star{ top:10%; left:47%; }

@media (max-width:680px){
  .char .tag{ display:none; }
}