/* SLA Pilot app bootstrap loader (branded — replaces the default JHipster pacman).
   A spinning orange ring sweeps around the brand tile (the rounded-square logo mark with the
   white navigation arrow), which gently breathes/bobs; below it the "SLA Pilot" wordmark fades
   and a thin orange progress bar slides. Pure CSS, no external assets. */

.app-loading {
  font-family: 'Segoe UI', system-ui, Helvetica, Arial, sans-serif;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 8em;
}
.app-loading p {
  display: block;
  font-size: 1.17em;
  margin: 0;
  font-weight: normal;
}

.xpilot-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* --- logo mark: a sweeping ring around the orange brand tile --- */
.xpilot-loader__mark {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* sweeping orange ring (conic gradient masked into a thin donut) */
.xpilot-loader__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 122, 0, 0) 0deg, #ffb347 140deg, #ff7a00 300deg, #e95420 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  animation: xpilot-spin 1s linear infinite;
}

/* the rounded-square brand tile with a soft breathing pulse */
.xpilot-loader__tile {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ff9d2f 0%, #ef7d00 55%, #e95420 100%);
  box-shadow: 0 8px 22px rgba(233, 84, 32, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: xpilot-breathe 1.8s ease-in-out infinite;
}

/* the white navigation arrow (mirrors the SLA Pilot logo mark), gently bobbing */
.xpilot-loader__arrow {
  width: 30px;
  height: 30px;
  fill: #fff;
  animation: xpilot-bob 1.8s ease-in-out infinite;
}

/* --- wordmark: SLA (dark) + Pilot (orange), fading --- */
.xpilot-loader__brand {
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  color: #5a3210;
  animation: xpilot-fade 1.8s ease-in-out infinite;
}
.xpilot-loader__brand span {
  color: #e95420;
}

/* --- indeterminate progress bar --- */
.xpilot-loader__bar {
  position: relative;
  width: 150px;
  height: 4px;
  border-radius: 4px;
  background: rgba(233, 84, 32, 0.14);
  overflow: hidden;
}
.xpilot-loader__bar span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  border-radius: 4px;
  background: linear-gradient(90deg, #ff9d2f, #e95420);
  animation: xpilot-slide 1.3s ease-in-out infinite;
}

@keyframes xpilot-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes xpilot-breathe {
  0%,
  100% {
    transform: scale(0.94);
  }
  50% {
    transform: scale(1.02);
  }
}
@keyframes xpilot-bob {
  0%,
  100% {
    transform: translateY(1.5px);
  }
  50% {
    transform: translateY(-1.5px);
  }
}
@keyframes xpilot-fade {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
@keyframes xpilot-slide {
  0% {
    left: -45%;
  }
  100% {
    left: 100%;
  }
}

/* Respect users who prefer reduced motion: keep it calm — no spin/slide. */
@media (prefers-reduced-motion: reduce) {
  .xpilot-loader__ring,
  .xpilot-loader__tile,
  .xpilot-loader__arrow,
  .xpilot-loader__brand,
  .xpilot-loader__bar span {
    animation: none;
  }
  .xpilot-loader__bar span {
    width: 100%;
  }
}