/* The loader of the site (owner, 2026-10-26: a loading with the logo of روضه خونگی for the change of pages and the
   waits, in the colours of the site; no design draws it; the same day: no words, only the turning line round the
   disc; the start of the site has its percentage too, 2026-11-02). The logo in a white disc is filled by a light that runs through it, and a ring in the two colours of the
   theme turns round the disc. It is used by the start of the site (index.html, before the application is there), by
   the wait of a page or a card (Loading) and over a page that is being read (PageLoader). The sizes are tokens of
   `site-loader` (component-sizes.json); the colours follow the theme of the page (at the start, the green of the host). */

.site-loader {
  --loader-from: var(--theme-from);
  --loader-to: var(--theme-to);
  --loader-badge: var(--site-loader-badge);
  --loader-ring: var(--site-loader-ring);
  --loader-logo-width: var(--site-loader-logo-width);
  --loader-logo-height: var(--site-loader-logo-height);
  display: flex;
  justify-content: center;
}

.site-loader.small {
  --loader-badge: var(--site-loader-small-badge);
  --loader-ring: var(--site-loader-small-ring);
  --loader-logo-width: var(--site-loader-small-logo-width);
  --loader-logo-height: var(--site-loader-small-logo-height);
}

.loader-badge {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: var(--loader-badge);
  block-size: var(--loader-badge);
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-md-gray-88);
}

/* The ring: an arc that fades in from nothing to the two colours of the theme, turning. The element that turns holds
   no mask (its drawing does), so the browser turns it on its own layer and it keeps turning while the page is busy,
   as at the start of the site. */
.loader-ring {
  position: absolute;
  inset: calc(-1 * var(--loader-ring));
  animation: loader-turn 1s linear infinite;
  will-change: transform;
}

.loader-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0turn, transparent 0turn, color-mix(in srgb, var(--loader-to) 25%, transparent) 0.15turn, var(--loader-to) 0.45turn, var(--loader-from) 0.72turn, transparent 0.73turn);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--loader-ring)), var(--color-black) calc(100% - var(--loader-ring)));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--loader-ring)), var(--color-black) calc(100% - var(--loader-ring)));
}

/* The logo is a shape filled by the colours of the theme, with a light running through it. */
.loader-logo {
  inline-size: var(--loader-logo-width);
  block-size: var(--loader-logo-height);
  background: linear-gradient(110deg, var(--loader-from) 0%, var(--loader-to) 38%, color-mix(in srgb, var(--color-white) 75%, var(--loader-to)) 50%, var(--loader-to) 62%, var(--loader-from) 100%);
  background-size: 260% 100%;
  -webkit-mask: url("/assets/graphics/logo-2-solid.svg") center / contain no-repeat;
  mask: url("/assets/graphics/logo-2-solid.svg") center / contain no-repeat;
  animation: loader-shine 2.2s ease-in-out infinite;
}

@keyframes loader-turn {
  to {
    transform: rotate(1turn);
  }
}

@keyframes loader-shine {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: 0 0;
  }
}

/* The start of the site: the whole window, until the application is there (wwwroot/js/boot.js lets it fade away). The
   tokens of a design pixel do not hold yet, so the sizes follow the window. */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-primary) 12%, var(--color-white)) 0%, var(--color-white) 62%);
  transition: opacity 450ms ease, visibility 0s linear 450ms;
}

/* Fading away, it lets every click through to the page already under it. */
.boot-screen.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boot-screen .site-loader {
  --loader-badge: clamp(112px, 24vmin, 168px);
  --loader-ring: clamp(4px, 0.9vmin, 6px);
  --loader-logo-width: clamp(50px, 10.8vmin, 76px);
  --loader-logo-height: clamp(66px, 14.2vmin, 100px);
  position: relative;
}

/* How far the start has come (owner, 2026-11-02: on a slow line it looked stuck). Blazor writes the figure on the root
   while it loads its files, and it counts files, not bytes. Under the ring and out of the flow, so the disc does not move
   when the figure appears. */
.boot-screen .site-loader::after {
  content: var(--blazor-load-percentage-text, "");
  position: absolute;
  inset-block-start: calc(100% + clamp(16px, 3.4vmin, 24px));
  inset-inline: 0;
  direction: ltr;
  text-align: center;
  font-family: var(--font-family);
  font-size: clamp(14px, 2.4vmin, 18px);
  color: var(--color-gray-45);
}