/* SpecEnvoy branded loading indicator — the hex cube-mark folds together from its six
   triangles, then folds back apart (the same motion reversed), looping forever. Pure CSS.
   Reusable: include this + /loading.js, then SELoading.mount(el, { label }).
   Respects prefers-reduced-motion (shows the assembled mark, no motion). */

.se-load { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 15px; padding: 30px 20px; }
/* Sizing + colours use !important + a scoped selector so the mark survives hostile host CSS —
   e.g. the score player sets `.wv-score svg { width:100% }` and `svg * { fill:#1a1a1a }`, which
   would otherwise blow the mark up to full width and paint it black. */
.se-load .se-load-mark { width: 58px !important; height: 58px !important; max-width: 58px;
  overflow: visible; filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.se-load .se-load-mark .t0 { fill: #5b86ec !important; }
.se-load .se-load-mark .t1 { fill: #5181ea !important; }
.se-load .se-load-mark .t2 { fill: #3b6fe0 !important; }
.se-load .se-load-mark .t3 { fill: #3568d9 !important; }
.se-load .se-load-mark .t4 { fill: #2c54a6 !important; }
.se-load .se-load-mark .t5 { fill: #274c98 !important; }
.se-load .se-load-mark .rim { fill: none !important; stroke: #ff5d8f !important; }
.se-load .se-load-mark .seam line { stroke: #cdd9ff !important; }

/* each triangle folds in toward the centre; `alternate` plays it forward (assemble) then
   backward (fold apart). A small per-triangle delay makes it ripple rather than snap. */
.se-load-mark .t { transform-box: fill-box; transform-origin: 50% 50%;
  animation: se-load-fold 1.15s cubic-bezier(.45,0,.25,1) infinite alternate; }
.se-load-mark .t0 { animation-delay: 0s; }
.se-load-mark .t1 { animation-delay: .05s; }
.se-load-mark .t2 { animation-delay: .1s; }
.se-load-mark .t3 { animation-delay: .15s; }
.se-load-mark .t4 { animation-delay: .2s; }
.se-load-mark .t5 { animation-delay: .25s; }
@keyframes se-load-fold {
  from { opacity: .12; transform: scale(.26) rotate(-40deg); }
  to   { opacity: 1;   transform: none; }
}

/* the pink rim draws itself on as the mark assembles, and un-draws as it folds apart */
.se-load-mark .rim { stroke-dasharray: 252;
  animation: se-load-rim 1.15s cubic-bezier(.45,0,.25,1) .12s infinite alternate; }
@keyframes se-load-rim { from { stroke-dashoffset: 252; } to { stroke-dashoffset: 0; } }

/* faint inner facet seams breathe with it */
.se-load-mark .seam { animation: se-load-seam 1.15s ease infinite alternate; }
@keyframes se-load-seam { from { opacity: 0; } to { opacity: .22; } }

.se-load-label { color: var(--dim, #8b93a8); font-size: 14px; letter-spacing: .02em; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .se-load-mark .t, .se-load-mark .rim, .se-load-mark .seam { animation: none; }
  .se-load-mark .t { opacity: 1; }
  .se-load-mark .rim { stroke-dashoffset: 0; }
  .se-load-mark .seam { opacity: .22; }
}