/* The bust, wherever it's mounted: size the .cyrus box by width, the photo's shape does the rest.
   <div class="cyrus"><div class="cyrus-bust"><canvas></canvas></div></div> */
.cyrus { aspect-ratio: 523 / 959; perspective: 600px; }
.cyrus-bust { width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
/* the renderer places and sizes the canvas: a little past the box on each side (BUST.pad), so his head can move */
.cyrus canvas { display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* Things he thinks with (thinking/): a layer over his box. Each prop goes under him (behind his head)
   or over him (in front) as it comes round, so where he's mounted his .cyrus needs
   position: relative; z-index: 1. Behind him they're a shade darker, out of his light (orbit.js). */
.thinking { position: absolute; inset: 0; pointer-events: none; }
.thinking-prop { position: absolute; left: 0; top: 0; z-index: 0; height: auto; user-select: none; will-change: transform, opacity; }
.thinking-prop.is-front { z-index: 2; }
.thinking-path { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; }
.thinking-path ellipse { fill: none; stroke: #000; stroke-width: 1.5; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; }