/* three-kit.css: the 3D stage (assets/three-kit.js, references/3d.md). The poster is the real content:
   phones, reduced-motion visitors and no-WebGL browsers only ever see it. The canvas fades in over it
   once a frame has rendered. */
.three-stage { position: relative; aspect-ratio: 1 / 1; width: 100%; isolation: isolate; }
.three-stage > .three-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .8s ease; }
.three-stage > .three-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity .8s ease; }
.three-stage.is-3d > .three-canvas { opacity: 1; }
.three-stage.is-3d > .three-poster { opacity: 0; }
.three-stage--wide { aspect-ratio: 16 / 9; }
.three-stage--bg { position: absolute; inset: 0; aspect-ratio: auto; z-index: -1; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .three-stage > .three-canvas { display: none; } }