Verso/services/web/frontend/stylesheets/pages/editor/loading-screen.scss

@mixin loading-screen-dark {
  --loading-screen-bg-color: var(--bg-dark-primary);
  --loading-screen-color: var(--content-secondary-dark);
  --loading-screen-danger-color: var(--content-danger-dark);
}

@mixin loading-screen-light {
  --loading-screen-bg-color: var(--bg-light-primary);
  --loading-screen-color: var(--content-secondary);
  --loading-screen-danger-color: var(--content-danger);
}

:root {
  @include loading-screen-light;

  @include theme('default') {
    @include loading-screen-dark;
  }

  .loading-screen-init-system {
    @include loading-screen-light;

    @media (prefers-color-scheme: dark) {
      @include loading-screen-dark;
    }
  }

  .loading-screen-init-light {
    @include loading-screen-light;
  }

  .loading-screen-init-dark {
    @include loading-screen-dark;
  }
}

@keyframes blink {
  0% {
    opacity: 0.2;
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0.2;
  }
}

.loading-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: var(--loading-screen-bg-color);

  .loading-screen-brand-container {
    min-width: 240px;
  }

  // Verso logo loader: the four quadrant circles drift on their own little
  // orbits (each a different swirl + phase) while the colour "warms up" from
  // de-saturated to full as the project finishes loading. The white "V" gently
  // breathes on top.
  .verso-loader {
    display: block;
    width: 240px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .verso-loader-circles {
    // Reveal the colour as load progress increases (driven by the inline
    // --verso-loader-saturation custom property, 0 → 1).
    filter: saturate(calc(0.12 + 0.88 * var(--verso-loader-saturation, 0)))
      brightness(calc(0.72 + 0.28 * var(--verso-loader-saturation, 0)));
    transition: filter 0.6s ease;

    circle {
      mix-blend-mode: screen;
      transform-box: fill-box;
      transform-origin: center;
      animation: 4.8s ease-in-out infinite;
    }
  }

  .verso-loader-c1 {
    animation-name: verso-orbit-1;
  }

  .verso-loader-c2 {
    animation-name: verso-orbit-2;
    animation-delay: -0.8s;
  }

  .verso-loader-c3 {
    animation-name: verso-orbit-3;
    animation-delay: -1.6s;
  }

  .verso-loader-c4 {
    animation-name: verso-orbit-4;
    animation-delay: -2.4s;
  }

  .verso-loader-v {
    transform-box: fill-box;
    transform-origin: center;
    animation: verso-v-breathe 4.8s ease-in-out infinite;
  }

  .loading-screen-label {
    margin: 0;
    padding-top: var(--spacing-09);
    font-family: $font-family-serif;
    font-size: var(--font-size-07);
    color: var(--loading-screen-color);
  }

  .loading-screen-ellip {
    animation: blink 1.4s both infinite;

    &:nth-child(2) {
      animation-delay: 0.2s;
    }

    &:nth-child(3) {
      animation-delay: 0.4s;
    }
  }

  .loading-screen-error {
    margin: 0;
    padding-top: var(--spacing-06);
    color: var(--loading-screen-danger-color);
  }
}

// Each circle swirls on its own small, closed orbit; different paths + phase
// offsets make the overlaps (and the colours they screen together) shimmer.
@keyframes verso-orbit-1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  25% {
    transform: translate(7px, 4px) scale(1.04);
  }

  50% {
    transform: translate(3px, 10px) scale(1);
  }

  75% {
    transform: translate(-5px, 4px) scale(0.97);
  }
}

@keyframes verso-orbit-2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  25% {
    transform: translate(-6px, 5px) scale(0.97);
  }

  50% {
    transform: translate(-9px, 0) scale(1.05);
  }

  75% {
    transform: translate(-4px, -5px) scale(1);
  }
}

@keyframes verso-orbit-3 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  25% {
    transform: translate(5px, -5px) scale(1.05);
  }

  50% {
    transform: translate(9px, -1px) scale(1);
  }

  75% {
    transform: translate(4px, 5px) scale(0.96);
  }
}

@keyframes verso-orbit-4 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  25% {
    transform: translate(-4px, -6px) scale(1.03);
  }

  50% {
    transform: translate(2px, -10px) scale(1);
  }

  75% {
    transform: translate(6px, -4px) scale(1.05);
  }
}

@keyframes verso-v-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.92;
  }

  50% {
    transform: scale(1.035);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .verso-loader-circles circle,
  .verso-loader-v {
    animation: none;
  }
}