.srpan-loader[hidden] { display: none; }
.srpan-loader { position: fixed; z-index: 99999; inset: 0; display: grid; place-items: center; pointer-events: none; animation: loader-safety 0s 4.3s forwards; }
.srpan-loader-panel { position: absolute; left: 0; width: 100%; height: 51%; background: #fff; transition: transform .8s cubic-bezier(.76,0,.24,1); }
.srpan-loader-top { top: 0; }
.srpan-loader-bottom { bottom: 0; }
.srpan-loader-center { position: relative; padding: 28px; transition: opacity .25s ease, transform .4s ease; }
.srpan-loader-mustache { display: block; width: 120px; height: 48px; margin: 0 auto; object-fit: contain; animation: loader-wiggle 1.25s ease-in-out infinite; }
.srpan-loader-line { width: 112px; height: 3px; margin: 32px auto 0; overflow: hidden; border-radius: 4px; background: #ededed; }
.srpan-loader-line::after { content: ""; display: block; width: 100%; height: 100%; border-radius: inherit; background: #1a1a1a; transform-origin: left; animation: loader-fill 2.8s cubic-bezier(.16,1,.3,1) forwards; }
.srpan-loader.is-complete .srpan-loader-line::after { animation: none; transform: scaleX(1); }
.srpan-loader.is-leaving .srpan-loader-top { transform: translateY(-101%); }
.srpan-loader.is-leaving .srpan-loader-bottom { transform: translateY(101%); }
.srpan-loader.is-leaving .srpan-loader-center { opacity: 0; transform: scale(.95); }
@keyframes loader-wiggle { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes loader-fill { from { transform: scaleX(.08); } to { transform: scaleX(.9); } }
@keyframes loader-safety { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .srpan-loader { display: none; } }