/* FOOTPASS Messenger v2 · splash de démarrage */

.fp-splash {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: #0F0F0F;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s ease;
}
.fp-splash { transition: opacity 0.5s ease; }
.fp-splash.leaving { opacity: 0; pointer-events: none; }
.fp-splash .statusbar { position: absolute; top: 0; left: 0; right: 0; }

.fp-splash-mark { position: relative; width: 168px; transition: transform 0.35s ease; }
.fp-splash.leaving .fp-splash-mark { transform: scale(1.04); }
.fp-splash-mark svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Les deux pièces du monogramme s'emboîtent le long de la diagonale 45° */
.fp-sp-a, .fp-sp-b { animation: fpSpIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.fp-sp-a { --dx: 44px; --dy: -44px; animation-delay: 0.15s; }
.fp-sp-b { --dx: -44px; --dy: 44px; animation-delay: 0.35s; }
@keyframes fpSpIn {
  from { opacity: 0; transform: translate(var(--dx), var(--dy)); }
  to { opacity: 1; transform: translate(0, 0); }
}

.fp-sp-r { animation: fpSpFade 0.5s ease 1.15s both; }
@keyframes fpSpFade { from { opacity: 0; } to { opacity: 1; } }

/* Balayage lumineux à 45°, masqué par le monogramme */
.fp-sp-shine { animation: fpSpShine 0.9s ease-in-out 1.45s both; opacity: 0; }
@keyframes fpSpShine {
  0% { transform: translateX(-340px); opacity: 1; }
  100% { transform: translateX(340px); opacity: 1; }
}

.fp-splash-word {
  margin-top: 8px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: #EAEAEA;
  animation: fpSpUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.25s both;
}
.fp-splash-word sup { font-size: 8px; }
@keyframes fpSpUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fp-splash-bar {
  margin-top: 36px;
  width: 72px;
  height: 2px;
  border-radius: 1px;
  background: rgba(234, 234, 234, 0.14);
  overflow: hidden;
  position: relative;
  animation: fpSpFade 0.5s ease 1.5s both;
}
.fp-splash-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  border-radius: 1px;
  background: #EAEAEA;
  animation: fpSpBar 1.1s ease-in-out 1.6s infinite;
}
@keyframes fpSpBar {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

@media (prefers-reduced-motion: reduce) {
  .fp-sp-a, .fp-sp-b, .fp-sp-r, .fp-splash-word, .fp-splash-bar, .fp-splash-bar i { animation: none; }
  .fp-sp-shine { display: none; }
}