/* ORAX VTC — écran de chargement applicatif
 * Remplace l'animation Pac-Man par défaut de JHipster par une scène de marque :
 * la voiture ORAX roule sur une route défilante (roues qui tournent),
 * sous le wordmark, avec un texte « Chargement… ».
 * Tokens couleurs : _orax-tokens.scss (royal blue #013d9c, deep navy #061a3d,
 * signal amber #ffb43b, silver road #d6e1ef). */

/* ── Splash overlay (durée minimale d'affichage gérée dans index.html) ──── */
.orax-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f6faff;
  opacity: 1;
  transition: opacity 0.45s ease;
}
.orax-splash.orax-splash--hidden {
  opacity: 0;
  pointer-events: none;
}
/* Centré par le flex du splash : neutralise le décalage par défaut */
.orax-splash .app-loading {
  top: 0;
}

.app-loading {
  font-family: 'Helvetica Neue', 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-inline-start: 0;
  margin-inline-end: 0;
  font-weight: normal;
}

/* ── Conteneur ─────────────────────────────────────────────────────────── */
.orax-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

/* ── Wordmark ──────────────────────────────────────────────────────────── */
.orax-loader__logo {
  width: 200px;
  height: auto;
  opacity: 0;
  animation: orax-logo-in 0.7s ease-out 0.1s forwards;
}

/* ── Scène (voiture + route) ───────────────────────────────────────────── */
.orax-loader__scene {
  position: relative;
  width: 240px;
  height: 96px;
}

.orax-loader__car {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 150px;
  height: 70px;
  transform: translateX(-50%);
  animation: orax-car-bounce 0.55s ease-in-out infinite;
  filter: drop-shadow(0 6px 6px rgba(6, 26, 61, 0.18));
}

/* Roues : rotation continue, origine au centre de chaque roue (transform-box) */
.orax-loader__wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: orax-wheel-spin 0.7s linear infinite;
}

/* ── Route défilante ───────────────────────────────────────────────────── */
.orax-loader__road {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  height: 4px;
  border-radius: 4px;
  background-color: #d6e1ef;
  overflow: hidden;
}
.orax-loader__road::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, #013d9c 0 28px, transparent 28px 56px);
  background-size: 56px 100%;
  animation: orax-road-move 0.5s linear infinite;
}

/* ── Texte ─────────────────────────────────────────────────────────────── */
.orax-loader__text {
  color: #013d9c;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 0;
}

/* ── Keyframes ─────────────────────────────────────────────────────────── */
@keyframes orax-wheel-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes orax-car-bounce {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-3px);
  }
}

@keyframes orax-road-move {
  to {
    background-position: -56px 0;
  }
}

@keyframes orax-logo-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect de la préférence « réduire les animations » (WCAG / a11y) */
@media (prefers-reduced-motion: reduce) {
  .orax-loader__logo,
  .orax-loader__car,
  .orax-loader__wheel,
  .orax-loader__road::after {
    animation: none;
  }
  .orax-loader__logo {
    opacity: 1;
  }
}