/* LoopNest cassette figure. Copy into the site's stylesheet (or link this file). The box keeps the
   site's aspect; the poster and the canvas stack inside it and cross-fade once the canvas has drawn. */
[data-ln-cassette] { position: relative; aspect-ratio: 1536 / 590; }
[data-ln-cassette] .ln-poster,
[data-ln-cassette] .ln-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
[data-ln-cassette] .ln-poster { object-fit: contain; transition: opacity .25s linear; }
[data-ln-cassette] .ln-canvas { opacity: 0; transition: opacity .25s linear; }
[data-ln-cassette].ln-live .ln-canvas { opacity: 1; }
[data-ln-cassette].ln-live .ln-poster { opacity: 0; }
[data-ln-cassette].ln-fallback .ln-canvas { display: none; }
[data-ln-cassette].ln-lost .ln-poster { transition: none; } /* context lost: the poster is back at once */