/* The boot curtain's ring. One colour comes in — `--sg-spinner`, the colour the studio picked
   (walked off the ground only if the ground would swallow it) — and everything else is an alpha
   of it. The fallback is the platform violet, for the one frame before any paint is known.

   It has to look right in ANY colour a studio can pick, and the way to do that is to put less of
   the colour on screen, not to thin the colour itself: a translucent or blend-moded brand colour
   goes muddy, and means something different on every ground. So the ring is a comet — full
   strength only at the head, where the dot is, and fading to nothing behind it — over a track
   that is barely there. About half the ink of the solid half-ring it replaces, which is what made
   a loud hue (a yellow, a hot pink) glare. No glow: on a dark ground it is what turned every hue
   into a neon sign, and on a white one it is a smudge. (Dark's colour also arrives already set
   back into the page — see SPINNER_DARK_SINK in the theme engine.) */

body {
  margin: 0;
}

.layout-preloader-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background-color: var(--sg-app-background, #0f172a);
}
/* Its own box model, stated. This sheet paints before the app's CSS exists, and without it the ring was a
   content-box 75px + two 3px borders = 81px — until the app's `* { box-sizing: border-box }` landed and it
   snapped to 75px (on a hard refresh: a big spinner that flicked smaller). */
.layout-preloader-container .layout-preloader,
.layout-preloader-container .layout-preloader span {
  box-sizing: border-box;
}
.layout-preloader-container .layout-preloader {
  position: relative;
  width: 75px;
  height: 75px;
  background: transparent;
  border: 3px solid color-mix(in srgb, var(--sg-spinner, #7c3aed) 13%, transparent);
  border-radius: 50%;
}
/* The comet. The head sits at 4:30 — where the dot starts — and the two turn together. */
.layout-preloader-container .layout-preloader:before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 135deg, transparent 0turn, transparent 0.3turn, var(--sg-spinner, #7c3aed) 1turn);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation: preloader-rotate-c 1s linear infinite;
  /* The two turning parts are GPU layers from the moment they exist. A rotation is run by the compositor, off
     the main thread — but only once the main thread has handed it over, on a frame it paints. The spinner
     shows exactly while the main thread is busiest (Firebase, the first render), and a ring still waiting
     for that hand-off sat frozen. Layered up front, the hand-off is the ring's first frame. */
  will-change: transform;
}
.layout-preloader-container .layout-preloader span {
  display: block;
  position: absolute;
  top: calc(50% - 2px);
  left: 50%;
  width: 50%;
  height: 4px;
  background: transparent;
  transform-origin: left;
  animation: preloader-rotate 1s linear infinite;
  will-change: transform;
}
.layout-preloader-container .layout-preloader span:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sg-spinner, #7c3aed);
  top: -4px;
  right: -6px;
}
@keyframes preloader-rotate-c {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes preloader-rotate {
  0% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(405deg);
  }
}