/* ==========================================================================
   Info-Wiz loader: compass arrow turns and settles inside the O while the
   gold swoosh sweeps. Loaded from index.html (before the app bundle) so the
   same screen shows from first byte, through session check, to sign-in.
   This is the one animation kept outside src/ui/motion.css, because it must
   run before the app's own stylesheets exist. Reduced motion: static logo.
   ========================================================================== */
.iw-loader {
  --iw-loader-bg: #ffffff;
  --iw-loader-muted: #5b6477;
  --iw-loader-track: #e6e8ee;
  --iw-loader-gold: #a87333;
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  padding: 24px 16px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: var(--iw-loader-bg);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

 /* Before the app stylesheets load, keep the page edge-to-edge. */
body:has(> #root > .iw-loader) { margin: 0; background: #ffffff; }
:root[data-theme="dark"] body:has(> #root > .iw-loader) { background: #0d1424; }

:root[data-theme="dark"] .iw-loader,
.iw-loader[data-theme="dark"] {
  --iw-loader-bg: #0d1424;
  --iw-loader-muted: #a3adc2;
  --iw-loader-track: #1d2840;
  --iw-loader-gold: #d4a45f;
}

.iw-loader .iw-loader-mark {
  position: relative;
  width: min(360px, 72vw);
  aspect-ratio: 1491 / 417;
  animation: iw-loader-in 560ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.iw-loader .iw-loader-mark .iw-loader-layer {
  position: absolute;
  max-width: none;
  margin: 0;
  filter: none;
}

.iw-loader .iw-loader-mark .iw-loader-base { left: 0.537%; top: 1.679%; width: 94.098%; height: 93.525%; }

.iw-loader .iw-loader-mark .iw-loader-swoosh {
  left: 2.683%; top: 28.058%; width: 97.317%; height: 28.297%;
  animation: iw-loader-sweep 2.4s cubic-bezier(0.6, 0, 0.3, 1) infinite;
}

.iw-loader .iw-loader-mark .iw-loader-needle {
  left: 41.717%; top: 59.472%; width: 5.835%; height: 19.185%;
  transform-origin: 43.7% 52.5%;
  animation: iw-loader-seek 2.4s cubic-bezier(0.55, 0, 0.25, 1) infinite;
}

/* Only the static HTML carries both theme images; React renders one. */
.iw-loader-static .iw-loader-mark [data-variant="dark"] { display: none; }
:root[data-theme="dark"] .iw-loader-static .iw-loader-mark [data-variant="light"] { display: none; }
:root[data-theme="dark"] .iw-loader-static .iw-loader-mark [data-variant="dark"] { display: block; }

.iw-loader .iw-loader-track {
  position: relative;
  width: min(180px, 40vw);
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--iw-loader-track);
}

.iw-loader .iw-loader-track > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: 3px;
  background: var(--iw-loader-gold);
  animation: iw-loader-slide 1.2s ease-in-out infinite;
}

.iw-loader .iw-loader-message {
  min-height: 1.4em;
  margin: 0;
  color: var(--iw-loader-muted);
  font-size: 14px;
  text-align: center;
  animation: iw-loader-in 320ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* Handoff: when loading finishes, the mark lifts toward the header corner
   and the screen fades while the app rises in underneath. */
.iw-loader.is-leaving {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  animation: iw-loader-fade 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.iw-loader.is-leaving .iw-loader-mark {
  animation: iw-loader-lift 620ms cubic-bezier(0.6, 0, 0.2, 1) forwards;
}

.iw-loader.is-leaving .iw-loader-track,
.iw-loader.is-leaving .iw-loader-message {
  animation: iw-loader-fade 220ms ease-out forwards;
}

@keyframes iw-loader-fade {
  to { opacity: 0; }
}

@keyframes iw-loader-lift {
  0% { transform: none; opacity: 1; }
  70% { opacity: 0.9; }
  100% { transform: translate(-34vw, -42vh) scale(0.34); opacity: 0; }
}

@keyframes iw-loader-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes iw-loader-sweep {
  0% { clip-path: inset(0 100% 0 0); }
  45%, 70% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}

@keyframes iw-loader-seek {
  0% { transform: rotate(0deg); }
  40% { transform: rotate(372deg); }
  50% { transform: rotate(354deg); }
  58% { transform: rotate(363deg); }
  66%, 100% { transform: rotate(360deg); }
}

@keyframes iw-loader-slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
  .iw-loader .iw-loader-mark,
  .iw-loader .iw-loader-mark .iw-loader-swoosh,
  .iw-loader .iw-loader-mark .iw-loader-needle,
  .iw-loader .iw-loader-message {
    animation: none;
  }

  .iw-loader.is-leaving,
  .iw-loader.is-leaving .iw-loader-mark {
    animation: iw-loader-fade 1ms forwards;
  }

  .iw-loader .iw-loader-track > span {
    width: 100%;
    animation: none;
    opacity: 0.6;
  }
}