/* The first 3D frame reveals the page; this screen never restarts on scroll. */
.loader {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  padding: 28px; background: #070910; color: #F5F8FF;
  opacity: 1; visibility: visible; transition: opacity .15s ease, visibility .15s ease;
}
.loader[hidden] { display: none !important; }
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.loader__mark { position: relative; display: grid; place-items: center; width: 82px; height: 82px; }
.loader__mark img { width: 58px; height: 58px; }
.loader__mark::after {
  content: ''; position: absolute; inset: 0; border: 1px solid #3159D740;
  border-top-color: #9DB4FF; border-right-color: #3D6BFF; border-radius: 50%;
  animation: scene-loader-orbit 1.8s linear infinite;
}
.loader__text { font: 500 28px/1.2 var(--font-display); letter-spacing: -.04em; }
.loader__text > span { color: #9DB4FF; }
.loader__status { margin: 0; color: #BAC4D8; font: 400 13px/1.6 var(--font-body); }
.loader__bar { width: 150px; height: 2px; overflow: hidden; border-radius: 2px; background: #263556; }
.loader__bar i { display: block; width: 40%; height: 100%; background: #7F9FFF; animation: scene-loader-travel 1.5s ease-in-out infinite alternate; }
@keyframes scene-loader-orbit { to { transform: rotate(360deg); } }
@keyframes scene-loader-travel { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) {
  .loader { transition: none; }
  .loader__mark::after, .loader__bar i { animation: none; }
}
html[data-motion="paused"] .loader { transition: none; }
html[data-motion="paused"] .loader__mark::after,
html[data-motion="paused"] .loader__bar i { animation: none; }