/* Anamorphosis III: shares anamorph.css; paper stage, four holds, a plan of the viewpoints. */
.stage { background: var(--paper); }
.track { height: 1000vh; }
@media (max-width: 700px) { .track { height: 1100vh; } }

.caption { position: absolute; z-index: 2; left: 50%; bottom: 4.5vh; transform: translate(-50%, 8px); text-align: center;
           opacity: 0; transition: opacity .6s ease, transform .6s ease; pointer-events: none; }
.is-at .caption { opacity: 1; transform: translate(-50%, 0); }
.caption .who { position: static; opacity: .85; transform: none; margin: 0 0 8px; }
.fit { margin: 0; font: 400 12px/1 var(--sans); letter-spacing: .08em; color: var(--ink-soft); white-space: nowrap; }

.target { position: absolute; z-index: 2; right: 26px; top: 60px; width: 64px; height: 64px; background: var(--ink);
          -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat;
          -webkit-mask-mode: luminance; mask-mode: luminance; opacity: 0; transition: opacity .5s ease; }
.is-at .target { opacity: .9; }

.plan { position: absolute; z-index: 2; left: 26px; bottom: 26px; width: 150px; height: 150px; overflow: visible; }
.plan .vol { fill: #6a635b; }
.plan .ray { stroke: #8a8279; stroke-width: .8; }
.plan .views circle { fill: #2a2724; }
.plan .views text { font: 500 7.5px/1 var(--sans); fill: #2a2724; text-anchor: middle; letter-spacing: .04em; }
.plan .cam { fill: none; stroke: #2a2724; stroke-width: 1.4; }

.static figure { max-width: 300px; }
.fig { -webkit-mask-image: var(--mask); mask-image: var(--mask); }
.is-static .plan, .is-static .caption, .is-static .target { display: none; }
@media (max-width: 700px) {
  .static { flex-wrap: wrap; }
  .is-static .static { flex-direction: row; }
  .static figure { flex: 1 1 40%; }
  .plan { width: 96px; height: 96px; left: 12px; bottom: 12px; }
  .target { right: 16px; top: 52px; width: 48px; height: 48px; }
  .caption { bottom: 15vh; }
}