/* Deepos mark loader — the symbol to the left of the wordmark, drawn as grid cells.
   Mark color sampled from assets/img/deepos-logo.png (#185291). */

.deepos-loader {
  position: fixed;
  inset: 0;
  z-index: 100000000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F6F7F9;
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  animation: deepos-loader-dismiss 0.4s ease 4s forwards;
}

.deepos-loader.is-done {
  animation: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.32s ease, visibility 0s linear 0.32s;
}

.deepos-mark {
  display: grid;
  grid-template-columns: repeat(11, 6px);
  grid-template-rows: repeat(11, 6px);
  gap: 2px;
  width: 86px;
  height: 86px;
  pointer-events: none;
}

.deepos-cell {
  grid-column: var(--c);
  grid-row: var(--r);
  width: 6px;
  height: 6px;
  border-radius: 1.5px;
  background: #185291;
  opacity: 0.82;
  transform: translate3d(var(--dx), 3px, 0) scale(0.9);
  animation: deepos-cell 2.15s ease-in-out infinite;
  animation-delay: calc((var(--r) - 1) * 0.07s + var(--lag));
}

.deepos-cell.r-tl { border-top-left-radius: 5px; }
.deepos-cell.r-tr { border-top-right-radius: 5px; }
.deepos-cell.r-bl { border-bottom-left-radius: 5px; }
.deepos-cell.r-br { border-bottom-right-radius: 5px; }

@keyframes deepos-cell {
  0%, 100% {
    opacity: 0.72;
    transform: translate3d(var(--dx), 3px, 0) scale(0.88);
  }
  46%, 72% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes deepos-loader-dismiss {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .deepos-cell {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .deepos-loader {
    animation-duration: 0.01s;
  }
  .deepos-loader.is-done {
    transition: none;
  }
}