/* Shared SKAM identity. Geometry: public/brand/mark.svg; no paper motif. */
:root {
  --brand-ink: var(--accent);
  --brand-ground: var(--bg);
  --brand-type: "Unbounded", "Golos Text", sans-serif;
  --brand-copy: "Golos Text", -apple-system, "Segoe UI", sans-serif;
  --brand-cycle: 2800ms;
}
#screen-loading {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: auto; max-width: none; margin: 0;
  padding: max(24px, var(--inset-top)) 24px max(24px, var(--inset-bottom));
  background: var(--brand-ground); color: var(--text);
  overflow: auto; isolation: isolate;
}
#screen-loading::before, #screen-loading::after { display: none; }
#screen-loading:not(.hidden):not(.leaving) { animation: none; }
.brand-loading-core { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; transform: translateY(-28px); }
.brand-sigil { display: block; width: 156px; height: 156px; color: var(--brand-ink); overflow: visible; }
/* Default geometry is the finished S; only loading unfolds it. The lower
   half flips around the waist. Countertranslation keeps the closed link centred. */
.sigil-half, .sigil-link { transform-box: view-box; transform-origin: 64px 64px; }
.brand-sigil .sigil-link { animation: skam-link-centre var(--brand-cycle) cubic-bezier(.45,0,.2,1) infinite; }
.brand-sigil .sigil-half--bottom { animation: skam-link-unfold var(--brand-cycle) cubic-bezier(.45,0,.2,1) infinite; backface-visibility: visible; }
.brand-wordmark { margin-top: 16px; padding-left: .12em; font: 600 26px/1.25 var(--brand-type); letter-spacing: .12em; color: var(--text); }
.brand-promise { margin: 12px 0 0; font: 400 12px/1.5 var(--brand-copy); letter-spacing: .045em; color: var(--muted); }
.brand-loading-status { position: absolute; bottom: max(48px, calc(var(--inset-bottom) + 24px)); left: 24px; right: 24px; text-align: center; color: var(--muted); font: 400 13px/1.5 var(--brand-copy); }
#loading-slow-msg { max-width: 28ch; margin: 10px auto 0; font: inherit; color: var(--muted); }
@keyframes skam-link-centre {
  0%, 12%, 96%, 100% { transform: translateY(24px); }
  40%, 76% { transform: translateY(0); }
}
@keyframes skam-link-unfold {
  0%, 12%, 96%, 100% { transform: perspective(240px) rotateX(-180deg); }
  40%, 76% { transform: perspective(240px) rotateX(0deg); }
}
#screen-loading.hidden .sigil-half, #screen-loading.leaving .sigil-half,
#screen-loading.hidden .sigil-link, #screen-loading.leaving .sigil-link { animation-play-state: paused; }
@media (max-height: 480px) {
  .brand-loading-core { transform: none; }
  .brand-sigil { width: 104px; height: 104px; }
  .brand-wordmark { margin-top: 6px; font-size: 22px; }
  .brand-promise { margin-top: 8px; }
  .brand-loading-status { position: static; margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-sigil .sigil-half, .brand-sigil .sigil-link { animation: none !important; transform: none; opacity: 1; }
}