/* ============================================================
   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; }
}