/* ============================================================
   Splash dynamique login — style Stripe (gradient mesh + grille)
   Activé quand aucune image ni vidéo de splash n'est configurée.
   Construit en 4 couches : mesh de blobs, grille perspective,
   particules, logo central avec halo et respiration.
   Palettes dérivées du logo eBrigade (corail/rose/bleu nuit).
   ============================================================ */

.eb-splash-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  isolation: isolate;
  background: #0B0A26;
}

/* ---- Couche 1 : mesh de blobs animés ---- */
.eb-splash-mesh {
  position: absolute;
  inset: -20%;
  filter: blur(80px) saturate(140%);
  opacity: 0.9;
  pointer-events: none;
}
.eb-splash-blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}
.eb-splash-blob--1 {
  width: 55%; height: 55%; left: -5%; top: -10%;
  background: radial-gradient(circle, #FF6B6B 0%, transparent 70%);
  animation: ebSplashFloat1 18s ease-in-out infinite;
}
.eb-splash-blob--2 {
  width: 50%; height: 50%; right: -5%; top: 10%;
  background: radial-gradient(circle, #6C5CE7 0%, transparent 70%);
  animation: ebSplashFloat2 22s ease-in-out infinite;
}
.eb-splash-blob--3 {
  width: 60%; height: 60%; left: 10%; bottom: -15%;
  background: radial-gradient(circle, #1ABFC7 0%, transparent 70%);
  animation: ebSplashFloat3 25s ease-in-out infinite;
}
.eb-splash-blob--4 {
  width: 45%; height: 45%; right: 5%; bottom: 5%;
  background: radial-gradient(circle, #F58A82 0%, transparent 70%);
  animation: ebSplashFloat4 20s ease-in-out infinite;
}

@keyframes ebSplashFloat1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(12%, 20%) scale(1.15); }
  66%     { transform: translate(-8%, 10%) scale(0.9); }
}
@keyframes ebSplashFloat2 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(-15%, 15%) scale(1.1); }
  66%     { transform: translate(10%, -10%) scale(0.95); }
}
@keyframes ebSplashFloat3 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(10%, -15%) scale(1.2); }
  66%     { transform: translate(-12%, 8%) scale(0.85); }
}
@keyframes ebSplashFloat4 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(-10%, -20%) scale(0.95); }
  66%     { transform: translate(15%, 5%) scale(1.1); }
}

/* ---- Couche 2 : grille en perspective ---- */
.eb-splash-grid-layer {
  position: absolute;
  inset: 0;
  perspective: 800px;
  perspective-origin: 50% 50%;
  overflow: hidden;
  pointer-events: none;
}
.eb-splash-grid {
  position: absolute;
  left: -25%;
  top: 40%;
  width: 150%;
  height: 160%;
  background-image:
    linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: rotateX(65deg);
  animation: ebSplashGridMove 14s linear infinite;
  mask-image: radial-gradient(ellipse at center top, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center top, #000 0%, transparent 75%);
}
@keyframes ebSplashGridMove {
  from { background-position: 0 0; }
  to   { background-position: 0 60px; }
}

/* ---- Couche 2b : traits lumineux qui traversent de part et d'autre ---- */
.eb-splash-trails {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.eb-splash-trail {
  fill: none;
  stroke-linecap: round;
  stroke-width: 3.5;
  /* pathLength normalisé à 1000 sur les <path> ; dash visible parcourt le path. */
  stroke-dasharray: 180 1000;
  stroke-dashoffset: 1180;
  filter:
    drop-shadow(0 0 4px currentColor)
    drop-shadow(0 0 12px currentColor)
    drop-shadow(0 0 24px currentColor);
  opacity: 1;
}
.eb-splash-trail--1 { color: #FF6B6B; stroke: url(#ebSplashGrad1); animation: ebSplashDash 9s linear infinite; animation-delay: 0s; }
.eb-splash-trail--2 { color: #F58A82; stroke: url(#ebSplashGrad2); animation: ebSplashDash 11s linear infinite; animation-delay: 2.2s; stroke-dasharray: 150 1000; stroke-width: 3; }
.eb-splash-trail--3 { color: #FFFFFF; stroke: url(#ebSplashGrad3); animation: ebSplashDash 13s linear infinite; animation-delay: 4.5s; stroke-dasharray: 220 1000; stroke-width: 2.5; }
.eb-splash-trail--4 { color: #FF8FA3; stroke: url(#ebSplashGrad4); animation: ebSplashDash 10s linear infinite; animation-delay: 1.1s; stroke-dasharray: 130 1000; stroke-width: 2.8; }
.eb-splash-trail--5 { color: #FF6B6B; stroke: url(#ebSplashGrad5); animation: ebSplashDash 14s linear infinite; animation-delay: 6.3s; stroke-dasharray: 180 1000; stroke-width: 3; }

/* Le dash traverse tout le path puis sort, pour une boucle continue. */
@keyframes ebSplashDash {
  0%   { stroke-dashoffset: 1200; }
  100% { stroke-dashoffset: -200; }
}

/* ---- Couche 3 : particules scintillantes ---- */
.eb-splash-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.eb-splash-particle {
  position: absolute;
  width: 3px; height: 3px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 8px rgba(255,255,255,0.9);
  animation: ebSplashTwinkle 4s ease-in-out infinite;
}
.eb-splash-particle:nth-child(1)  { top: 15%; left: 10%; animation-delay: 0s; }
.eb-splash-particle:nth-child(2)  { top: 25%; left: 80%; animation-delay: 0.3s; }
.eb-splash-particle:nth-child(3)  { top: 45%; left: 30%; animation-delay: 0.8s; }
.eb-splash-particle:nth-child(4)  { top: 65%; left: 70%; animation-delay: 1.2s; }
.eb-splash-particle:nth-child(5)  { top: 75%; left: 20%; animation-delay: 1.8s; }
.eb-splash-particle:nth-child(6)  { top: 35%; left: 55%; animation-delay: 2.2s; }
.eb-splash-particle:nth-child(7)  { top: 85%; left: 50%; animation-delay: 2.6s; }
.eb-splash-particle:nth-child(8)  { top: 10%; left: 45%; animation-delay: 3.1s; }
.eb-splash-particle:nth-child(9)  { top: 55%; left: 90%; animation-delay: 0.5s; }
.eb-splash-particle:nth-child(10) { top: 20%; left: 65%; animation-delay: 1.5s; }
.eb-splash-particle:nth-child(11) { top: 60%; left: 15%; animation-delay: 2.8s; }
.eb-splash-particle:nth-child(12) { top: 80%; left: 85%; animation-delay: 3.5s; }

@keyframes ebSplashTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50%      { opacity: 1; transform: scale(1.3); }
}

/* ---- Couche 4 : halo + logo central + tagline ---- */
.eb-splash-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
.eb-splash-halo {
  position: relative;
  width: min(26rem, 72%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}
.eb-splash-halo::before,
.eb-splash-halo::after {
  content: "";
  position: absolute;
  inset: -20% -10%;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  animation: ebSplashPulseRing 4s ease-out infinite;
  pointer-events: none;
}
.eb-splash-halo::after { animation-delay: 2s; }
@keyframes ebSplashPulseRing {
  0%   { transform: scale(0.75); opacity: 0.8; }
  100% { transform: scale(1.25); opacity: 0; }
}
.eb-splash-glow {
  position: absolute;
  inset: -60% -30%;
  background: radial-gradient(ellipse at center, rgba(255,107,107,0.38) 0%, rgba(108,92,231,0.18) 38%, transparent 70%);
  filter: blur(30px);
  animation: ebSplashGlowPulse 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ebSplashGlowPulse {
  0%,100% { transform: scale(1);   opacity: 0.75; }
  50%     { transform: scale(1.08); opacity: 1; }
}
.eb-splash-logo {
  position: relative;
  width: 100%;
  max-width: 22rem;
  height: auto;
  filter:
    drop-shadow(0 10px 30px rgba(0,0,0,0.35))
    drop-shadow(0 0 18px rgba(255,255,255,0.18));
  animation:
    ebSplashLogoReveal 1.4s cubic-bezier(.2,.8,.2,1) both,
    ebSplashBreathe 6s ease-in-out 1.4s infinite;
}
@keyframes ebSplashLogoReveal {
  from { opacity: 0; transform: translateY(12px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes ebSplashBreathe {
  0%,100% { transform: translateY(0)    scale(1); }
  50%     { transform: translateY(-4px) scale(1.015); }
}

.eb-splash-tagline {
  margin-top: 2.5rem;
  color: #fff;
  animation: ebSplashFadeUp 1.4s cubic-bezier(.2,.8,.2,1) 0.4s both;
  max-width: 32rem;
}
.eb-splash-tagline .eb-splash-kicker {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.75;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  margin-bottom: 1.1rem;
}
.eb-splash-tagline h2 {
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.5px;
  background: linear-gradient(90deg, #fff 0%, #FFD1D1 50%, #fff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ebSplashShimmer 6s linear infinite;
}
@keyframes ebSplashShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.eb-splash-tagline p {
  margin: 0.7rem 0 0;
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  line-height: 1.5;
}
@keyframes ebSplashFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .eb-splash-halo { max-width: 16rem; padding: 1rem 0; }
  .eb-splash-logo { max-width: 14rem; }
  .eb-splash-tagline { margin-top: 1.6rem; }
  .eb-splash-tagline h2 { font-size: 1.4rem; }
  .eb-splash-tagline p { font-size: 0.85rem; }
  .eb-splash-tagline .eb-splash-kicker { font-size: 0.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .eb-splash-stage *,
  .eb-splash-stage *::before,
  .eb-splash-stage *::after {
    animation: none !important;
    transition: none !important;
  }
  .eb-splash-trail { opacity: 0; }
}

/* ---- Saisie en cours : le décor s'immobilise ----
   Le splash entretient une vingtaine d'animations infinies dont plusieurs
   repeignent tout le panneau à chaque image : le blur(80px) porté par
   .eb-splash-mesh doit être refait dès qu'un blob bouge à l'intérieur, les
   cinq traits animent leur stroke-dashoffset sous trois drop-shadow empilés,
   la grille et le titre animent leur background-position, le halo un
   blur(30px) qui pulse. Le rastériseur y passe l'essentiel de son budget et
   le caractère frappé dans l'identifiant ou le mot de passe attendait son
   tour — d'où la demi-seconde avant de le voir apparaître.
   On fige donc le décor le temps de la saisie : js/login-general.js pose la
   classe dès la première frappe (avant que le caractère ne soit peint, la
   première en profite déjà) et la retire une seconde après la dernière. Au
   repos l'animation est intacte. */
html.eb-splash-still .eb-splash-stage,
html.eb-splash-still .eb-splash-stage *,
html.eb-splash-still .eb-splash-stage *::before,
html.eb-splash-still .eb-splash-stage *::after {
  animation-play-state: paused !important;
}