/* MultiView loader: the one loading screen for every page.
   Used by app.html (hub and video rooms), craft.html and play.html. This file
   is the only place the loader is styled; styles.css and craft-styles.css no
   longer carry loader rules, so nothing can fight it.

   Markup (static HTML or React, same classes):
   <div class="mv-loader-screen" role="status" aria-live="polite">
     <div class="mv-loader-content">
       <div class="mv-loader-emblem">
         <span class="mv-loader-orbit"></span>
         <span class="mv-loader-orbit mv-loader-orbit-alt"></span>
         <img class="mv-loader-logo" src="/logo.png" alt="">
       </div>
       <span class="mv-loader-progress" aria-hidden="true"></span>
       <p class="mv-loader-label">Loading MultiView</p>
       <p class="mv-loader-subtitle">...</p>
     </div>
   </div>

   --mvl-t is a negative animation delay set from performance.now() when a
   loader mounts, so a loader that replaces another one on the same page picks
   the rings up where the last one left them instead of jumping back.
   .is-leaving (or .fade-out, which the craft and play pages use) fades it out. */

.mv-loader-screen {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 24px;
  box-sizing: border-box;
  overflow: hidden;
  /* Fully opaque: the page underneath must never show through. */
  background-color: #070809;
  background-image: radial-gradient(ellipse 60% 52% at 50% 44%, color-mix(in srgb, var(--gold, #d4a824) 11%, #070809) 0%, #0b0b0d 46%, #070809 100%);
  color: #f4f0e7;
  font-family: 'Plus Jakarta Sans', 'Red Hat Text', 'Inter', system-ui, sans-serif;
  opacity: 1;
  visibility: visible;
  transition: opacity .36s ease, visibility .36s ease;
  pointer-events: all;
  isolation: isolate;
}
.mv-loader-screen.is-leaving,
.mv-loader-screen.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.mv-loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.mv-loader-emblem {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 176px;
  height: 176px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold, #d4a824) 9%, transparent) 0%, transparent 68%);
}
.mv-loader-emblem::before {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gold, #d4a824) 20%, transparent);
  box-shadow: inset 0 0 26px color-mix(in srgb, var(--gold, #d4a824) 8%, transparent);
}
.mv-loader-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--gold-light, var(--gold, #d4a824));
  border-right-color: color-mix(in srgb, var(--gold, #d4a824) 40%, transparent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold, #d4a824) 45%, transparent));
  animation: mvLoaderSpin 1.6s linear infinite;
  animation-delay: var(--mvl-t, 0ms);
}
.mv-loader-orbit-alt {
  inset: 8px;
  border-width: 1px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: color-mix(in srgb, var(--gold-light, var(--gold, #d4a824)) 80%, white);
  border-left-color: color-mix(in srgb, var(--gold, #d4a824) 30%, transparent);
  filter: none;
  animation-duration: 2.4s;
  animation-direction: reverse;
}
.mv-loader-logo {
  position: relative;
  z-index: 1;
  width: 84px;
  height: 84px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--gold-light, var(--gold, #d4a824)) 32%, transparent));
  animation: mvLoaderBreathe 2.4s ease-in-out infinite;
  animation-delay: var(--mvl-t, 0ms);
}

.mv-loader-progress {
  position: relative;
  display: block;
  width: 132px;
  height: 2px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
}
.mv-loader-progress::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--gold, #d4a824), var(--gold-light, var(--gold, #d4a824)), transparent);
  animation: mvLoaderSweep 1.5s ease-in-out infinite;
  animation-delay: var(--mvl-t, 0ms);
}

.mv-loader-label {
  margin: 6px 0 0;
  font-family: 'Plus Jakarta Sans', 'Red Hat Text', 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.3;
  color: #f4f0e7;
}
.mv-loader-subtitle {
  min-height: 1.5em;
  margin: 0;
  font-family: 'Red Hat Text', 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.5;
  color: #a79f92;
}
.mv-loader-note {
  max-width: 380px;
  margin: 10px 0 0;
  font-family: 'Red Hat Text', 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: #b7ada0;
}
.mv-loader-note a { display: inline-block; margin-top: 6px; color: var(--gold, #d4a824); font-weight: 600; text-decoration: none; }
.mv-loader-note a:hover { text-decoration: underline; }
.mv-loader-note small { display: block; color: #6b6459; font-size: 11px; }

/* Light mode: same loader on a warm paper ground. */
[data-mode="light"] .mv-loader-screen {
  background-color: #f6f1e7;
  background-image: radial-gradient(ellipse 60% 52% at 50% 44%, color-mix(in srgb, var(--gold, #d4a824) 16%, #f6f1e7) 0%, #f4eee2 46%, #efe8da 100%);
  color: #2a241c;
}
[data-mode="light"] .mv-loader-label { color: #2a241c; }
[data-mode="light"] .mv-loader-subtitle,
[data-mode="light"] .mv-loader-note { color: #6b6154; }
[data-mode="light"] .mv-loader-progress { background: rgba(60, 45, 20, .1); }
[data-mode="light"] .mv-loader-orbit-alt { border-bottom-color: var(--gold-dark, var(--gold, #a07810)); }

@keyframes mvLoaderSpin { to { transform: rotate(360deg); } }
@keyframes mvLoaderBreathe { 0%, 100% { opacity: .86; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03); } }
@keyframes mvLoaderSweep { 0% { transform: translateX(0); } 100% { transform: translateX(350%); } }

/* Slower, never frozen: a still loader reads as a hang. */
@media (prefers-reduced-motion: reduce) {
  .mv-loader-orbit { animation-duration: 4s; }
  .mv-loader-orbit-alt { animation-duration: 6s; }
  .mv-loader-logo { animation: none; }
  .mv-loader-progress::after { animation-duration: 3s; }
}
@media (max-width: 520px) {
  .mv-loader-emblem { width: 148px; height: 148px; }
  .mv-loader-logo { width: 70px; height: 70px; }
}