/* Loader after sign-up — Figma 601-5537 ("Creating your profile…"). Full screen over everything: the wizard
   while ARMember sends the form, the thank-you page during its pixel pause. Avishai's drift animation
   (onboarding-loader.js). Sizes are clamp()s around the design's 1440 values. */

.ssp-onb-loader {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(16px, 2.6vh, 24px);
  padding: 16px;
  background: #f3e3ee var(--ssp-onb-panel) center / cover no-repeat;   /* the design's gradient */
  font-family: Assistant, sans-serif; color: #363636; text-align: center;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s;
}
.ssp-onb-loader[hidden] { display: none; }
.ssp-onb-loader.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease; }
html.ssp-onb-loading, html.ssp-onb-loading body { overflow: hidden; }

/* QA3 #15 — Avishai's drift (loader_export.zip): the zone is centred, every picture sits at its centre and
   onboarding-loader.js moves it with transform. Shapes from his README; --s scales them with the zone width. */
.ssp-onb-loader__group { position: relative; height: calc(210px * var(--s, 1)); }
.ssp-onb-loader__item { position: absolute; left: 50%; top: 50%; overflow: hidden; will-change: transform, opacity; opacity: 0; }
.ssp-onb-loader__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ssp-onb-loader__item.is-circle  { width: calc(148px * var(--s, 1)); height: calc(148px * var(--s, 1)); margin: calc(-74px * var(--s, 1)) 0 0 calc(-74px * var(--s, 1)); border-radius: 50%; }
.ssp-onb-loader__item.is-rounded { width: calc(138px * var(--s, 1)); height: calc(178px * var(--s, 1)); margin: calc(-89px * var(--s, 1)) 0 0 calc(-69px * var(--s, 1)); border-radius: calc(26px * var(--s, 1)); }
.ssp-onb-loader__item.is-oval    { width: calc(136px * var(--s, 1)); height: calc(176px * var(--s, 1)); margin: calc(-88px * var(--s, 1)) 0 0 calc(-68px * var(--s, 1)); border-radius: 50%; }

.ssp-onb-loader__text { margin: 0; font: 400 clamp(20px, 1.8vw, 26px) / 1.4 "Frank Ruhl Libre", serif; }

@media (prefers-reduced-motion: reduce) {
  .ssp-onb-loader { transition: none; }
}