/* The loader (DECISIONS R16-5). Its own small file, loaded first, so it paints before anything else
   has arrived; a separate file so a strict Content-Security-Policy needs no exception for it.
   One pass of everything is exactly 0.5 s and ends with the whole logo lit; boot.js slows further
   passes while loading is slow. The comet's head reaches the stars at 0, 25, 57 and 82 % of a pass. */
#zg-loader { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: #0A0C1B; transition: opacity 200ms ease; }
#zg-loader.zg-loader--out { opacity: 0; pointer-events: none; }
#zg-loader svg { width: 120px; height: 120px; }
.zg-loader__star { transform-box: fill-box; transform-origin: center; }
.zg-loader__comet { stroke-dasharray: .22 1.6; animation: zg-comet .5s linear infinite; }
.zg-loader__seg { stroke-dasharray: 1 1; }
.zg-loader__l1 { animation: zg-line1 .5s linear infinite; }
.zg-loader__l2 { animation: zg-line2 .5s linear infinite; }
.zg-loader__l3 { animation: zg-line3 .5s linear infinite; }
.zg-loader__s1 { animation: zg-star1 .5s linear infinite; }
.zg-loader__s2 { animation: zg-star2 .5s linear infinite; }
.zg-loader__s3 { animation: zg-star3 .5s linear infinite; }
.zg-loader__s4 { animation: zg-star4 .5s linear infinite; }
@keyframes zg-comet { from { stroke-dashoffset: .22; } to { stroke-dashoffset: -1; } }
@keyframes zg-line1 { 0%, 3% { stroke-dashoffset: 1; } 24%, 100% { stroke-dashoffset: 0; } }
@keyframes zg-line2 { 0%, 27% { stroke-dashoffset: 1; } 56%, 100% { stroke-dashoffset: 0; } }
@keyframes zg-line3 { 0%, 59% { stroke-dashoffset: 1; } 80%, 100% { stroke-dashoffset: 0; } }
@keyframes zg-star1 { 0% { fill: #3D4478; transform: scale(1); } 6% { fill: #C8F26A; transform: scale(1.25); } 22%, 100% { fill: #C8F26A; transform: scale(1); } }
@keyframes zg-star2 { 0%, 20% { fill: #3D4478; transform: scale(1); } 28% { fill: #C8F26A; transform: scale(1.25); } 44%, 100% { fill: #C8F26A; transform: scale(1); } }
@keyframes zg-star3 { 0%, 52% { fill: #3D4478; transform: scale(1); } 60% { fill: #C8F26A; transform: scale(1.25); } 76%, 100% { fill: #C8F26A; transform: scale(1); } }
@keyframes zg-star4 { 0%, 77% { fill: #3D4478; transform: scale(1); } 85% { fill: #62F0A6; transform: scale(1.25); } 100% { fill: #62F0A6; transform: scale(1); } }
/* Reduced motion: the whole logo, lit and still. */
@media (prefers-reduced-motion: reduce) {
  .zg-loader__comet { animation: none; display: none; }
  .zg-loader__seg { animation: none; stroke-dasharray: none; }
  .zg-loader__star { animation: none; fill: #C8F26A; }
}