/**
  The browser's loading page, while it fetches the runtime and the app and before .NET can draw: the app's background,
  the download bar in the mark's green, and the mark itself in motion in the middle, as the app's splash shows it once
  running (140 px). Its three cells trade places as the trio turns a third at a time: a hexagon turned 120 degrees looks
  the same, so each cell lands upright in the next one's spot. The turn is round the middle of the three cells (24, 26.83
  of the 48 grid). Timing as AnimatedMark: a move of 975 ms, then a rest of 270 ms.
*/
:root {
  --light-theme-bg-color: #F2F3F0;
  --dark-theme-bg-color: #141F29;
  --accent-color: #2FA56B;
}

/* The bootstrapper shows the still splash image over the moving mark, on a background it sets on the element itself */
.uno-loader .logo {
  display: none !important;
}

.uno-loader {
  background-color: var(--light-theme-bg-color) !important;
}

@media (prefers-color-scheme: dark) {
  .uno-loader {
    background-color: var(--dark-theme-bg-color) !important;
  }
}

.uno-loader::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  margin: -70px 0 0 -70px;
  transform-origin: 50% 55.9%;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFD95A' d='M21.45 6.49 Q24.00 5.02 26.55 6.49 L30.55 8.80 Q33.09 10.27 33.09 13.21 L33.09 17.83 Q33.09 20.77 30.55 22.24 L26.55 24.55 Q24.00 26.02 21.45 24.55 L17.45 22.24 Q14.91 20.77 14.91 17.83 L14.91 13.21 Q14.91 10.27 17.45 8.80 Z'/%3E%3Cpath fill='%238BD86A' d='M11.66 23.45 Q14.21 21.98 16.75 23.45 L20.75 25.76 Q23.30 27.23 23.30 30.17 L23.30 34.79 Q23.30 37.73 20.75 39.20 L16.75 41.51 Q14.21 42.98 11.66 41.51 L7.66 39.20 Q5.11 37.73 5.11 34.79 L5.11 30.17 Q5.11 27.23 7.66 25.76 Z'/%3E%3Cpath fill='%232FA56B' d='M31.25 23.45 Q33.79 21.98 36.34 23.45 L40.34 25.76 Q42.89 27.23 42.89 30.17 L42.89 34.79 Q42.89 37.73 40.34 39.20 L36.34 41.51 Q33.79 42.98 31.25 41.51 L27.25 39.20 Q24.70 37.73 24.70 34.79 L24.70 30.17 Q24.70 27.23 27.25 25.76 Z'/%3E%3C/svg%3E");
  animation: uno-mark-turn 3735ms infinite;
  /* Turned by the compositor, so it keeps turning while the page's thread compiles and starts .NET */
  will-change: transform;
  pointer-events: none;
}

/* Three moves of 975 ms, each followed by a rest of 270 ms (1245 ms a step, a third of the loop) */
@keyframes uno-mark-turn {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  26.1% { transform: rotate(120deg); }
  33.3% { transform: rotate(120deg); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  59.4% { transform: rotate(240deg); }
  66.7% { transform: rotate(240deg); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  92.8% { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .uno-loader::before {
    animation: none;
  }
}