/* A continuous illustrative cycle. It never changes the selected evidence layer or starts a lookup. */
.layer-viewer { --loop-scale: 1; }
.viewer-heading { gap: 14px; }
.showcase-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 6px 9px; border: 1px solid #86bddd45; border-radius: 4px; font: 8px var(--mono); letter-spacing: .3px; color: #acdcf1; white-space: nowrap; flex-shrink: 0; background: #7cdbff08; }
.showcase-toggle i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.showcase-toggle[aria-pressed="true"] i { box-shadow: 0 0 8px #7addf18c; }
.showcase-toggle:hover { background: #7cdbff16; border-color: #86bdddaa; }
.showcase-toggle:focus-visible { outline-color: #a4e5f5; }
.showcase-toggle:disabled { opacity: .7; cursor: default; }
[data-showcase="loop"] .layer-model { animation: showcase-camera 16s cubic-bezier(.45,0,.3,1) infinite; }
[data-showcase="loop"] .plane-format { animation: showcase-format 16s cubic-bezier(.45,0,.3,1) infinite; }
[data-showcase="loop"] .plane-cipher { animation: showcase-cipher 16s cubic-bezier(.45,0,.3,1) infinite; }
[data-showcase="loop"] .plane-limit { animation: showcase-limit 16s cubic-bezier(.45,0,.3,1) infinite; }
@keyframes showcase-camera {
  0%,8% { transform: translate(-50%,-34%) rotateX(55deg) rotateZ(calc(-33deg + var(--turn))); }
  30% { transform: translate(-50%,-38%) rotateX(49deg) rotateZ(calc(20deg + var(--turn))); }
  55% { transform: translate(-50%,-38%) rotateX(58deg) rotateZ(calc(147deg + var(--turn))); }
  76% { transform: translate(-50%,-36%) rotateX(52deg) rotateZ(calc(267deg + var(--turn))); }
  92%,100% { transform: translate(-50%,-34%) rotateX(55deg) rotateZ(calc(327deg + var(--turn))); }
}
@keyframes showcase-format {
  0%,8%,92%,100% { transform: translateZ(18px); }
  30%,66% { transform: translateZ(calc(50px * var(--loop-scale))); }
}
@keyframes showcase-cipher {
  0%,8%,92%,100% { transform: translateZ(36px); }
  32%,66% { transform: translateZ(calc(104px * var(--loop-scale))); }
}
@keyframes showcase-limit {
  0%,8%,92%,100% { transform: translateZ(58px); }
  34%,66% { transform: translateZ(calc(152px * var(--loop-scale))); }
}
@media(max-width:740px) { .layer-viewer { --loop-scale: .88; } .showcase-toggle { font-size: 7px; } }
@media(max-width:370px) { .viewer-heading { gap: 8px; } .showcase-toggle { font-size: 6px; padding-inline: 7px; } }