/* ==========================================================================
   Liquid Glass — preloader
   --------------------------------------------------------------------------
   Butterfly's fullpage-loading ships two counter-rotating squares in salmon
   and cyan. It is a fine spinner and it belongs to a different blog: the first
   thing a reader sees should be the material the rest of the site is made of.

   The markup is fixed (layout/includes/loading/fullpage-loading.pug):

     #loading-box
       .loading-left-bg          two panels that slide apart on load
       .loading-right-bg
       .spinner-box
         .configure-border-1 > .configure-core
         .configure-border-2 > .configure-core
         .loading-word

   Rather than hide both squares and rebuild the spinner on .spinner-box's own
   pseudo-elements, .configure-border-1 is repurposed as the bead and the
   sweep goes on ITS ::after.

   That distinction is the whole fix. Every child of .spinner-box is
   absolutely positioned -- .loading-word is, and an ::after given
   `position: absolute` is too -- so none of them participate in flex layout.
   Laying the bead and the sweep out as flex siblings with a gap therefore did
   nothing, and the sweep had to be nudged onto the bead with a hand-guessed
   `margin-bottom`, which drifted out of alignment the moment the font metrics
   changed. Anchored to the bead with `inset: 0`, the sweep is concentric by
   construction and there is no number left to get wrong.

   This file loads with the design tokens, before the glass engine runs -- the
   loader is on screen precisely while the JS has not started -- so everything
   here is plain CSS. No backdrop-filter either: the panels behind it are flat,
   so there would be nothing to refract.
   ========================================================================== */

#loading-box .loading-left-bg,
#loading-box .loading-right-bg {
  background-color: var(--g-bg);
}

#loading-box .spinner-box {
  position: fixed;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

/* The second square is retired outright. */
#loading-box .configure-border-2 {
  display: none;
}

/* The first one becomes the bead. */
#loading-box .configure-border-1 {
  position: absolute;
  width: 104px;
  height: 104px;
  padding: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.55), transparent 52%),
    var(--g-tint);
  box-shadow: var(--g-shine), var(--g-shadow);
  /* Kill the theme's configure-clockwise rotation. */
  animation: none;
  transform: none;
}

/* .configure-core exists to fill the square; the bead has no use for it. */
#loading-box .configure-border-1 .configure-core {
  display: none;
}

/* The sweep: one bright arc travelling around the rim, masked to a ring so it
   reads as light running around the edge of the bead rather than a spinning
   disc sitting on top of it. Anchored to the bead, so it cannot drift. */
#loading-box .configure-border-1::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0turn,
    transparent 0deg,
    rgba(255, 255, 255, 0.00) 30deg,
    rgba(255, 255, 255, 0.62) 78deg,
    rgba(255, 236, 202, 0.30) 104deg,
    transparent 150deg,
    transparent 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 66%, #000 100%);
  mask: radial-gradient(circle, transparent 60%, #000 66%, #000 100%);
  animation: g-loading-sweep 1.5s linear infinite;
}

@keyframes g-loading-sweep {
  to { transform: rotate(1turn); }
}

/* The word is absolutely positioned and centred like everything else here, so
   it lands on top of the bead. Half the bead plus a little air puts it under.
   This one offset is unavoidable -- but it only moves text, and text sitting a
   few pixels high is nothing like a ring sitting off-centre. */
#loading-box .loading-word {
  position: absolute;
  transform: translateY(84px);
  color: var(--g-ink-dim, var(--g-ink));
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  opacity: 0.78;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #loading-box .configure-border-1::after {
    background: conic-gradient(
      from 0turn,
      transparent 0deg,
      rgba(255, 236, 212, 0.00) 30deg,
      rgba(255, 236, 212, 0.52) 78deg,
      rgba(255, 190, 130, 0.26) 104deg,
      transparent 150deg,
      transparent 360deg
    );
  }
}

:root[data-theme="dark"] #loading-box .configure-border-1::after {
  background: conic-gradient(
    from 0turn,
    transparent 0deg,
    rgba(255, 236, 212, 0.00) 30deg,
    rgba(255, 236, 212, 0.52) 78deg,
    rgba(255, 190, 130, 0.26) 104deg,
    transparent 150deg,
    transparent 360deg
  );
}

/* A spinner is the one animation a reader cannot opt out of by not scrolling,
   so honour the preference: keep the bead, stop the sweep. */
@media (prefers-reduced-motion: reduce) {
  #loading-box .configure-border-1::after {
    animation: none;
    opacity: 0.5;
  }
}