/* Spartacus web loader. Three uses of one design:
   .sp-splash   the app's own loading screen, patched into the Spartacus UI at image build
                (deploy/paperclip/patch-boot-logo.js) to show this same screen
   :is(#sp-loader,.sp-splash)  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. */

:is(#sp-loader,.sp-splash){position:fixed;inset:0;z-index:2147483000;background:#1A1714;display:flex;align-items:center;justify-content:center;transition:opacity .45s ease,visibility .45s ease}
:is(#sp-loader,.sp-splash).sp-done{opacity:0;visibility:hidden;pointer-events:none}
:is(#sp-loader,.sp-splash) .sp-top{position:absolute;top:0;left:0;right:0;height:3px;background:#2A2521}
:is(#sp-loader,.sp-splash) .sp-top i{display:block;height:100%;width:0;background:#D8463C;transition:width .6s ease}
:is(#sp-loader,.sp-splash) .sp-center{display:flex;flex-direction:column;align-items:center;gap:48px}
:is(#sp-loader,.sp-splash) .sp-lockup{display:flex;align-items:center;gap:28px}
:is(#sp-loader,.sp-splash) svg{width:104px;height:104px;flex-shrink:0}
:is(#sp-loader,.sp-splash) .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}
:is(#sp-loader,.sp-splash) .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}
:is(#sp-loader,.sp-splash) .sp-track{width:480px;max-width:70vw;height:2px;background:#2A2521;overflow:hidden}
:is(#sp-loader,.sp-splash) .sp-run{width:140px;height:100%;background:#D8463C;animation:spRun 1.6s cubic-bezier(.6,0,.4,1) infinite}
:is(#sp-loader,.sp-splash) .sp-bar{transform-box:fill-box;transform-origin:50% 100%;animation:spWave 1.2s ease-in-out infinite}
:is(#sp-loader,.sp-splash) .sp-bar:nth-child(2){animation-delay:.1s}
:is(#sp-loader,.sp-splash) .sp-bar:nth-child(3){animation-delay:.2s}
:is(#sp-loader,.sp-splash) .sp-bar:nth-child(4){animation-delay:.3s}
:is(#sp-loader,.sp-splash) .sp-bar:nth-child(5){animation-delay:.4s}
:is(#sp-loader,.sp-splash) .sp-bar:nth-child(6){animation-delay:.5s}
:is(#sp-loader,.sp-splash) .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){
  :is(#sp-loader,.sp-splash) .sp-lockup{flex-direction:column;gap:20px;text-align:center}
  :is(#sp-loader,.sp-splash) svg{width:88px;height:88px}
  :is(#sp-loader,.sp-splash) .sp-word{font-size:36px}
  :is(#sp-loader,.sp-splash) .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){
  :is(#sp-loader,.sp-splash) .sp-bar,:is(#sp-loader,.sp-splash) .sp-run{animation:none}
  :is(#sp-loader,.sp-splash),#sp-nav,#sp-nav i,:is(#sp-loader,.sp-splash) .sp-top i{transition:none}
}

/* Upstream links that do not belong in Spartacus: the "Documentation" menu item
   (docs.paperclip.ing) and the "Share feedback" link (paperclip.ing/feedback). */
a[href^="https://docs.paperclip.ing"],a[href^="https://paperclip.ing/feedback"]{display:none!important}

/* Office (Claw3D): its server-rendered "Loading office" fallback and the
   "Connecting to your runtime" card are restyled into the same splash. Their own
   contents are hidden and the splash is drawn from /sp-splash.svg, which carries the
   helmet, animated plume, wordmark, tagline and running bar in one image. */
[aria-label="Loading office"],[class*="border-amber-700/45"][class*="bg-[#1a1008]"]{position:fixed!important;inset:0!important;z-index:2147483000;display:flex!important;align-items:center!important;justify-content:center!important;background:#1A1714!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;margin:0!important;width:auto!important;height:auto!important}
[aria-label="Loading office"]>*,[class*="border-amber-700/45"][class*="bg-[#1a1008]"]>*{display:none!important}
[aria-label="Loading office"]::before,[class*="border-amber-700/45"][class*="bg-[#1a1008]"]::before{content:url("/sp-splash.svg");display:block}
@media (max-width:700px){[aria-label="Loading office"]::before,[class*="border-amber-700/45"][class*="bg-[#1a1008]"]::before{transform:scale(.6)}}

/* Spartacus UI sign-in page: the right-hand panel (was an ASCII paperclip animation)
   shows the splash on Iron. Class set by deploy/paperclip/patch-boot-logo.js. */
.sp-panel{display:flex!important;align-items:center;justify-content:center;background:#1A1714}
.sp-panel::before{content:url("/sp-panel.svg");display:block;max-width:80%}
@media (max-width:1100px){.sp-panel::before{transform:scale(.75)}}