.staff-startup {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #f5f8fc;
  color: #143d60;
  text-align: center;
}
.staff-startup-content { width: min(100%, 380px); animation:staff-startup-appear .24s ease-out both; }
.staff-startup-brand { position:relative;display:grid;place-items:center;width:156px;height:96px;margin:0 auto;isolation:isolate; }
.staff-startup-ripples { position:absolute;inset:0;z-index:-1;pointer-events:none; }
.staff-startup-ripples>span { position:absolute;left:50%;top:50%;width:160px;height:160px;border-radius:50%;background:#006bc5;opacity:0;transform:translate(-50%,-50%) scale(.2);animation:staff-startup-ripple 1.6s linear infinite; }
.staff-startup-ripples>span:nth-child(2) { animation-delay:-.32s; }
.staff-startup-ripples>span:nth-child(3) { animation-delay:-.64s; }
.staff-startup-logo { position:relative;display:block;width:156px;height:auto;margin:0 auto;object-fit:contain; }
.staff-startup-progress { display: block; height: 3px; width: 160px; margin: 28px auto 0; overflow: hidden; border-radius: 4px; background: #dce6f0; }
.staff-startup-progress span { display: block; width: 45%; height: 100%; border-radius: inherit; background: #006bc5; animation: staff-startup-travel 1.8s ease-in-out infinite; }
@keyframes staff-startup-appear { from { opacity:0; } to { opacity:1; } }
@keyframes staff-startup-ripple { 0% { transform:translate(-50%,-50%) scale(.15);opacity:0; } 15% { opacity:.1; } 100% { transform:translate(-50%,-50%) scale(1);opacity:0; } }
@keyframes staff-startup-travel { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
@media (prefers-reduced-motion: reduce) { .staff-startup-content,.staff-startup-logo,.staff-startup-ripples>span,.staff-startup-progress span { animation:none; } .staff-startup-logo,.staff-startup-progress span { transform:none;opacity:1; } .staff-startup-ripples>span { opacity:0; } .staff-startup-ripples>span:first-child { opacity:.14;transform:translate(-50%,-50%) scale(.55); } .staff-startup-progress span { margin:0 auto; } }
@media (max-width: 480px) { .staff-startup { padding: 24px 20px; } .staff-startup-logo { width: 140px; } }

.staff-startup-panel { min-height: 160px; background: transparent; padding: 24px; }
.staff-startup-panel .staff-startup-logo { width: 108px; }
.staff-startup-panel .staff-startup-brand { width:108px;height:64px; }
.staff-startup-panel .staff-startup-ripples>span { width:108px;height:108px; }
.staff-startup-panel .staff-startup-progress { width: 112px; margin-top: 18px; }
.staff-startup-inline { display: inline-grid; vertical-align: middle; min-height: 0; background: transparent; padding: 8px 12px; }
.staff-startup-inline .staff-startup-logo { width: 56px; }
.staff-startup-inline .staff-startup-brand { width:56px;height:34px; }
.staff-startup-inline .staff-startup-ripples>span { width:56px;height:56px; }
.staff-startup-inline .staff-startup-progress { width: 60px; height: 2px; margin-top: 8px; }

.staff-page-loading { background:#fff; }
.staff-page-rings { position:relative;display:block;width:150px;height:150px;margin:0 auto; }
.staff-page-rings>span { position:absolute;inset:0;border-radius:50%;box-shadow:0 3px 3px #e30613;--ring-start:0deg;animation:staff-page-spin 2s linear infinite; }
.staff-page-rings>span:nth-child(2) { inset:6px;box-shadow:0 3px 3px #00529b;--ring-start:120deg;animation-duration:3s;transform:rotate(120deg); }
.staff-page-rings>span:nth-child(3) { inset:16px;box-shadow:0 3px 3px #00a7e1;--ring-start:240deg;animation-duration:1.5s;transform:rotate(240deg); }
.staff-page-loading.staff-startup-panel { min-height:320px;background:#fff;border-radius:12px; }
.staff-page-loading.staff-startup-panel .staff-page-rings { width:112px;height:112px; }
@keyframes staff-page-spin { from { transform:rotate(var(--ring-start)); } to { transform:rotate(calc(var(--ring-start) + 360deg)); } }
@media(prefers-reduced-motion:reduce) { .staff-page-rings>span { animation:none; } }
