/* os-loader.css -- RitmoOS shared staged OS-boot / handoff loader.
   One full-screen ~5s boot, themed per tenant, used across every gym surface. */
.osl{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  --osl-brand:#FF7A00; --osl-accent:#FFB000; --osl-bg:#0D1117;
  color:#fff; font-family:'Sora',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  background:
    radial-gradient(900px 520px at 50% 38%, color-mix(in srgb, var(--osl-brand) 16%, transparent), transparent 70%),
    var(--osl-bg);
  transition:opacity .5s ease; opacity:1; -webkit-tap-highlight-color:transparent;
}
.osl.osl-hide{ opacity:0; pointer-events:none; }
.osl-inner{ display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; padding:0 24px; }

.osl-slot{ position:relative; width:120px; height:120px; }
.osl-slot > *{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }

.osl-logo{
  filter:drop-shadow(0 8px 34px color-mix(in srgb, var(--osl-brand) 45%, transparent));
  animation:osl-pulse 2.2s ease-in-out infinite;
}
.osl-logo img{ width:100%; height:100%; object-fit:contain; }
.osl-mono{
  width:104px; height:104px; border-radius:26px; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:42px; letter-spacing:.02em; color:#fff;
  background:linear-gradient(140deg, var(--osl-brand), color-mix(in srgb, var(--osl-accent) 70%, var(--osl-brand)));
}
/* Monogram -> gym-logo crossfade (no hard swap). Both stack in the logo tile. */
.osl-mono{ transition:opacity .45s ease; }
.osl-mono.osl-mono-out{ opacity:0; }
.osl-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .45s ease; }
.osl-img.osl-img-in{ opacity:1; }

.osl-word{ font-weight:800; font-size:32px; letter-spacing:.18em; color:#fff; }

.osl-fade{ opacity:0; transition:opacity .55s ease; }
.osl-fade.osl-in{ opacity:1; }

.osl-name{ font-size:clamp(20px,4.4vw,32px); font-weight:800; letter-spacing:-.01em; min-height:1.2em; }
.osl-status{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; min-height:1.2em;
  color:color-mix(in srgb, #fff 62%, transparent); transition:opacity .18s ease;
  font-family:'Courier New',ui-monospace,monospace;
}
.osl-bar{ width:200px; height:3px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden; }
.osl-fill{ height:100%; width:0; border-radius:3px; background:linear-gradient(90deg, var(--osl-brand), var(--osl-accent)); transition:width .15s linear; }
.osl-foot{ font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:color-mix(in srgb, #fff 36%, transparent); margin-top:6px; }

/* Pulse must NOT animate opacity -- the .osl-fade crossfade controls opacity, and a
   keyframed opacity here would override it (logo stays visible, overlapping the wordmark). */
@keyframes osl-pulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.05) } }
@media (prefers-reduced-motion:reduce){ .osl-logo{ animation:none } .osl-fill{ transition:none } .osl-fade{ transition:none } }
@media (max-width:560px){
  .osl-slot{ width:100px; height:100px }
  .osl-mono{ width:88px; height:88px; font-size:36px }
  .osl-word{ font-size:27px }
  .osl-bar{ width:170px }
}