/* ExaltWorks opening: a large X in the logo's colours, then the rest of the logo slides out of it, then the page.
   .xw-splash.auto hides itself (server pages); .xw-splash.hold waits for the app to say it's ready (adds .done). */
.xw-splash { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #fff; pointer-events: none; }
.xw-splash.auto { animation: xw-out .5s cubic-bezier(.6,0,.4,1) 1.35s forwards; }
.xw-splash.done { animation: xw-out .5s cubic-bezier(.6,0,.4,1) forwards; }
.xw-stage { position: relative; width: min(520px, 78vw); display: grid; justify-items: center; gap: 26px; }
.xw-logo { position: relative; width: 100%; aspect-ratio: 971 / 160; animation: xw-reveal 1.25s cubic-bezier(.7,0,.25,1) both; }
.xw-logo img { display: block; width: 100%; height: auto; }
/* a light passing over the X as it lands */
.xw-logo::after { content: ''; position: absolute; inset: -10% 76% -10% -4%; background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .85) 50%, transparent 70%); background-size: 250% 100%; animation: xw-shine .9s ease .15s both; mix-blend-mode: soft-light; }
.xw-line { width: 120px; height: 3px; border-radius: 3px; background: #eceaf5; overflow: hidden; opacity: 0; animation: xw-fade .3s ease 1s forwards; }
.xw-line span { display: block; height: 100%; width: 40%; border-radius: 3px; background: linear-gradient(90deg, #1b8fd6, #22c0e8, #5b2da6); animation: xw-run 1s cubic-bezier(.6,0,.4,1) infinite; }
.xw-splash.auto .xw-line { display: none; }
@keyframes xw-reveal {
  0%   { opacity: 0; transform: translateX(38.4%) scale(1.5); clip-path: inset(0 76.6% 0 0); filter: blur(6px); }
  22%  { opacity: 1; transform: translateX(38.4%) scale(2.05); clip-path: inset(0 76.6% 0 0); filter: blur(0); }
  40%  { transform: translateX(38.4%) scale(1.9); clip-path: inset(0 76.6% 0 0); }
  100% { opacity: 1; transform: none; clip-path: inset(0 -2% 0 0); }
}
@keyframes xw-shine { from { background-position: 120% 0; } to { background-position: -60% 0; } }
@keyframes xw-out { to { opacity: 0; transform: translateY(-12px) scale(1.01); visibility: hidden; } }
@keyframes xw-fade { to { opacity: 1; } }
@keyframes xw-run { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) {
  .xw-logo, .xw-logo::after { animation: none; }
  .xw-splash.auto { animation: xw-out .2s ease .3s forwards; }
}