/* PropheSCAI logo loop, pure CSS
   Usage:  <svg class="ps-loop" viewBox="0 0 97 97"> … </svg>
   Tune:   .ps-loop { width; height; --ps-ink; --ps-accent; --ps-duration; }

   The pieces build in one by one (top-left square, bar, bottom-left square,
   bottom-right square, then the accent arrow slides in from the top-right),
   hold, then leave in the same order, and the loop repeats. */

.ps-loop {
  --ps-ink: #fff;
  --ps-accent: #ff6b3d;
  --ps-duration: 3s;
  display: block;
  width: 48px;
  height: 48px;
  overflow: visible;
}

.ps-loop > * {
  transform-box: fill-box;
  transform-origin: center;
  animation: ps-piece var(--ps-duration) cubic-bezier(.2, .8, .2, 1) infinite both;
}

.ps-loop .ink { fill: var(--ps-ink); }
.ps-loop .arrow { fill: var(--ps-accent); }

/* build order */
.ps-loop .tl    { animation-delay: calc(var(--ps-duration) * 0); }
.ps-loop .ink   { animation-delay: calc(var(--ps-duration) * 0.06); }
.ps-loop .bl    { animation-delay: calc(var(--ps-duration) * 0.12); }
.ps-loop .br    { animation-delay: calc(var(--ps-duration) * 0.18); }
.ps-loop .arrow {
  animation-name: ps-arrow;
  animation-delay: calc(var(--ps-duration) * 0.26);
}

@keyframes ps-piece {
  0%        { opacity: 0; transform: scale(0.4); }
  12%, 66%  { opacity: 1; transform: scale(1); }
  78%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes ps-arrow {
  0%        { opacity: 0; transform: translate(18%, -18%); }
  12%, 66%  { opacity: 1; transform: translate(0, 0); }
  78%, 100% { opacity: 0; transform: translate(18%, -18%); }
}

@media (prefers-reduced-motion: reduce) {
  .ps-loop > * {
    animation: none;
  }
}