/* Spartacus web loader. Two parts:
   #sp-loader  full-screen screen on hard page loads (from the brand kit's page loader)
   #sp-nav     thin top bar for in-app, page-to-page navigation
   Injected by nginx into every HTML page of the Spartacus UI and the office
   (deploy/host/nginx-spartacus-loader.conf); the script is /sp-loader.js. */

#sp-loader{position:fixed;inset:0;z-index:2147483000;background:#1A1714;display:flex;align-items:center;justify-content:center;transition:opacity .45s ease,visibility .45s ease}
#sp-loader.sp-done{opacity:0;visibility:hidden;pointer-events:none}
#sp-loader .sp-top{position:absolute;top:0;left:0;right:0;height:3px;background:#2A2521}
#sp-loader .sp-top i{display:block;height:100%;width:0;background:#D8463C;transition:width .6s ease}
#sp-loader .sp-center{display:flex;flex-direction:column;align-items:center;gap:48px}
#sp-loader .sp-lockup{display:flex;align-items:center;gap:28px}
#sp-loader svg{width:104px;height:104px;flex-shrink:0}
#sp-loader .sp-word{font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;font-stretch:125%;font-weight:800;font-size:60px;line-height:.9;letter-spacing:.02em;color:#F2EDE4}
#sp-loader .sp-tag{margin-top:10px;font:13px/1 'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.32em;text-transform:uppercase;color:#B8AFA3}
#sp-loader .sp-track{width:480px;max-width:70vw;height:2px;background:#2A2521;overflow:hidden}
#sp-loader .sp-run{width:140px;height:100%;background:#D8463C;animation:spRun 1.6s cubic-bezier(.6,0,.4,1) infinite}
#sp-loader .sp-bar{transform-box:fill-box;transform-origin:50% 100%;animation:spWave 1.2s ease-in-out infinite}
#sp-loader .sp-bar:nth-child(2){animation-delay:.1s}
#sp-loader .sp-bar:nth-child(3){animation-delay:.2s}
#sp-loader .sp-bar:nth-child(4){animation-delay:.3s}
#sp-loader .sp-bar:nth-child(5){animation-delay:.4s}
#sp-loader .sp-bar:nth-child(6){animation-delay:.5s}
#sp-loader .sp-bar:nth-child(7){animation-delay:.6s}
@keyframes spWave{0%,100%{transform:scaleY(.45);opacity:.55}40%{transform:scaleY(1);opacity:1}}
@keyframes spRun{0%{transform:translateX(-100%)}100%{transform:translateX(480px)}}
@media (max-width:700px){
  #sp-loader .sp-lockup{flex-direction:column;gap:20px;text-align:center}
  #sp-loader svg{width:88px;height:88px}
  #sp-loader .sp-word{font-size:36px}
  #sp-loader .sp-tag{font-size:11px}
}

/* Page-to-page bar: hidden until .sp-on, creeps to ~92%, completes and fades. */
#sp-nav{position:fixed;top:0;left:0;right:0;height:3px;z-index:2147482000;pointer-events:none;opacity:0;transition:opacity .25s ease}
#sp-nav.sp-on{opacity:1}
#sp-nav i{display:block;height:100%;width:0;background:#D8463C;box-shadow:0 0 8px rgba(216,70,60,.6);transition:width .25s ease}

@media (prefers-reduced-motion: reduce){
  #sp-loader .sp-bar,#sp-loader .sp-run{animation:none}
  #sp-loader,#sp-nav,#sp-nav i,#sp-loader .sp-top i{transition:none}
}