/*
 * Page loader: the logo mark with a green dot in orbit around it.
 * /system/loader.js builds the markup and decides when it leaves (see its
 * header).
 *
 * Every animation here is transform or opacity on an HTML element, so the
 * browser runs it on the compositor thread and it stays smooth while the
 * page underneath is still busy starting up. Keep it that way: animating
 * anything else (masks, filters, SVG children, layout) would run on the
 * main thread and stutter during load.
 */

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  background: #000;
}

/* Leaving: the mark flies toward you as the black falls away. */
.site-loader.is-leaving {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease 0.15s;
}
.site-loader.is-leaving .sl-stage {
  transform: scale(1.8);
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.6, 0, 0.4, 1), opacity 0.5s ease 0.2s;
}

/* 176px square on a 160-unit grid (loader.js places things in % of it). */
.sl-stage {
  position: relative;
  width: 176px;
  height: 176px;
  will-change: transform, opacity;
}
.sl-stage > *,
.sl-orbit > * {
  position: absolute;
}

/* The orbit: the r=50 circle. */
.sl-ring {
  inset: 18.75%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}

/* The mark (logo scaled 1.25 on the grid: 35 units wide), breathing. */
.sl-mark {
  left: 50%;
  top: 50%;
  width: 21.94%;
  height: 21.94%;
  margin: -10.97% 0 0 -10.97%;
  will-change: transform;
  animation: sl-breathe 2.4s ease-in-out infinite;
}
.sl-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}
@keyframes sl-breathe {
  50% { transform: scale(1.06); }
}

/* The dot and its fading trail ride one spinning layer. */
.sl-orbit {
  inset: 0;
  will-change: transform;
  animation: sl-spin 1.8s linear infinite;
}
@keyframes sl-spin {
  to { transform: rotate(360deg); }
}
.sl-dot,
.sl-trail {
  border-radius: 50%;
  background: #00ff73;
  transform: translate(-50%, -50%);
}
.sl-dot {
  width: 7.5px;
  height: 7.5px;
  box-shadow: 0 0 8px 1px rgb(0 255 115 / 0.8);
}
.sl-trail--1 { width: 5.5px; height: 5.5px; opacity: 0.65; }
.sl-trail--2 { width: 4.2px; height: 4.2px; opacity: 0.4; }
.sl-trail--3 { width: 3.1px; height: 3.1px; opacity: 0.2; }

/* A few stars, blinking out of step. */
.sl-star {
  width: 2px;
  height: 2px;
  margin: -1px 0 0 -1px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  animation: sl-twinkle 2.6s ease-in-out infinite;
}
.sl-star:nth-child(2) { animation-delay: 0.7s; }
.sl-star:nth-child(3) { animation-delay: 1.4s; }
.sl-star:nth-child(4) { animation-delay: 2s; }
@keyframes sl-twinkle {
  40% { opacity: 0.9; }
  80% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sl-mark, .sl-orbit, .sl-star { animation: none; }
  .sl-star { opacity: 0.5; }
  .site-loader.is-leaving .sl-stage { transform: none; }
}