/* ============================================================
   HoopCI — écran de lancement animé (affiché avant le chargement de l'appli)
   Un ballon de basket et un ballon de foot se percutent, le logo surgit,
   puis un volet tricolore façon replay TV dévoile l'appli.
   Fichier externe (et non inline) pour respecter la CSP « style-src 'self' ».
   ============================================================ */
#splash {
  position: fixed; inset: 0; z-index: 5000; overflow: hidden;
  background: #050505; color: #f4f4f4;
  font-family: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  -webkit-user-select: none; user-select: none; cursor: pointer;
  /* Filet de sécurité : disparaît seul même si le JavaScript ne se charge pas */
  animation: sp-failsafe 0.4s 8s forwards;
}
.sp-skip #splash { display: none; }
@media (prefers-reduced-motion: reduce) { #splash { display: none; } }

.sp-stage { position: absolute; inset: 0; animation: sp-shake 0.45s 1s linear; }

/* Faisceaux de projecteurs */
.sp-beams i {
  position: absolute; top: -10%; width: 34vmax; height: 120%; left: 50%;
  margin-left: -17vmax; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255, 214, 160, 0.22), rgba(255, 214, 160, 0) 75%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  opacity: 0; animation: sp-fade 0.6s ease forwards, sp-sway 5s ease-in-out infinite alternate;
}
.sp-beams i:nth-child(1) { --r: 24deg; left: 18%; background: linear-gradient(180deg, rgba(248, 115, 6, 0.28), rgba(248, 115, 6, 0) 75%); }
.sp-beams i:nth-child(2) { --r: -3deg; animation-delay: 0.1s, 0s; }
.sp-beams i:nth-child(3) { --r: -24deg; left: 82%; background: linear-gradient(180deg, rgba(0, 158, 96, 0.3), rgba(0, 158, 96, 0) 75%); animation-delay: 0.2s, 0s; }

/* Sol : ligne d'horizon lumineuse + reflet */
.sp-floor {
  position: absolute; left: 0; right: 0; top: 64%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: scaleX(0); animation: sp-floor 0.6s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.sp-floor::after {
  content: ''; position: absolute; left: 10%; right: 10%; top: 2px; height: 26vh;
  background: radial-gradient(50% 60% at 50% 0, rgba(248, 115, 6, 0.16), transparent);
}

/* Ballons : le conteneur avance, l'enfant rebondit, le SVG tourne */
.sp-ball { position: absolute; top: 64%; left: 50%; width: 0; height: 0; }
.sp-ball i { position: absolute; display: block; width: clamp(54px, 10vmin, 86px); aspect-ratio: 1; left: 0; bottom: 0; transform-origin: 50% 100%; }
.sp-ball svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 14px rgba(248, 115, 6, 0.55)); }
.sp-bb { animation: sp-bb-x 0.85s 0.15s cubic-bezier(0.3, 0.6, 0.6, 1) both, sp-gone 0.01s 1s forwards; }
.sp-bb i { margin-left: calc(clamp(54px, 10vmin, 86px) * -1); animation: sp-bb-y 0.85s 0.15s both; }
.sp-bb svg { animation: sp-spin 0.5s linear infinite; }
.sp-fb { animation: sp-fb-x 0.75s 0.25s cubic-bezier(0.25, 0.7, 0.6, 1) both, sp-gone 0.01s 1s forwards; }
.sp-fb i { animation: sp-fb-y 0.75s 0.25s both; }
.sp-fb svg { filter: drop-shadow(0 0 14px rgba(200, 255, 230, 0.5)); animation: sp-spin 0.32s linear infinite reverse; }

/* Impact au centre */
.sp-impact { position: absolute; left: 50%; top: calc(64% - 12vh - clamp(54px, 10vmin, 86px) / 2); width: 0; height: 0; }
.sp-ring {
  position: absolute; width: 20vmin; height: 20vmin; left: -10vmin; top: -10vmin; border-radius: 50%;
  border: 4px solid #f87306; opacity: 0; transform: scale(0);
  animation: sp-ring 0.75s 1s cubic-bezier(0.1, 0.7, 0.3, 1) forwards;
}
.sp-ring + .sp-ring { border-color: #009e60; animation-delay: 1.08s; }
.sp-impact b {
  position: absolute; left: 0; top: -2px; width: 14vmin; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, #fff, rgba(255, 170, 80, 0));
  transform-origin: 0 50%; opacity: 0; animation: sp-spark 0.6s 1s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}
.sp-impact b:nth-of-type(1) { --a: 0deg; }
.sp-impact b:nth-of-type(2) { --a: 30deg; }
.sp-impact b:nth-of-type(3) { --a: 60deg; }
.sp-impact b:nth-of-type(4) { --a: 90deg; }
.sp-impact b:nth-of-type(5) { --a: 120deg; }
.sp-impact b:nth-of-type(6) { --a: 150deg; }
.sp-impact b:nth-of-type(7) { --a: 180deg; }
.sp-impact b:nth-of-type(8) { --a: 210deg; }
.sp-impact b:nth-of-type(9) { --a: 240deg; }
.sp-impact b:nth-of-type(10) { --a: 270deg; }
.sp-impact b:nth-of-type(11) { --a: 300deg; }
.sp-impact b:nth-of-type(12) { --a: 330deg; }
.sp-impact b:nth-of-type(odd) { background: linear-gradient(90deg, #fff, rgba(0, 200, 120, 0)); }

.sp-flash {
  position: absolute; inset: 0; background: #fff8ec; opacity: 0; pointer-events: none;
  animation: sp-flash 0.45s 1s ease-out forwards;
}

/* Logo + signature + barre de chargement */
.sp-brand {
  position: absolute; left: 50%; top: calc(64% - 12vh); transform: translate(-50%, -58%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.sp-brand img {
  width: clamp(130px, 26vmin, 200px); height: auto; display: block;
  opacity: 0; animation: sp-logo 0.55s 1.02s cubic-bezier(0.2, 1.4, 0.4, 1) forwards, sp-glow 2.4s 1.7s ease-in-out infinite;
}
.sp-brand p {
  margin: 0; font-style: italic; font-weight: 800; text-transform: uppercase;
  letter-spacing: 3px; font-size: clamp(14px, 2.6vmin, 19px); color: #f4f4f4; white-space: nowrap;
  clip-path: inset(0 100% 0 0); animation: sp-wipe 0.55s 1.4s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}
.sp-brand p::first-letter { color: #f87306; }
.sp-bar { width: clamp(120px, 24vmin, 170px); height: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; position: relative; opacity: 0; animation: sp-fade 0.3s 1.5s forwards; }
.sp-bar i {
  position: absolute; inset: 0; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #f87306 33.3%, #fff 33.3% 66.6%, #009e60 66.6%);
  animation: sp-fill 0.9s 1.55s cubic-bezier(0.6, 0, 0.3, 1) forwards;
}
.sp-bar::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  transform: translateX(-120%); animation: sp-shine 1.1s 2.4s ease-in-out infinite;
}

/* Sortie : volet tricolore oblique */
.sp-stinger i {
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 200vw;
  transform: translateX(-260vw) skewX(-12deg); background: #f87306;
}
.sp-stinger i:nth-child(2) { background: #f4f4f4; }
.sp-stinger i:nth-child(3) { background: #009e60; }
#splash.out { pointer-events: none; animation: sp-clear 0s 0.42s forwards; }
#splash.out .sp-stage, #splash.out .sp-flash { animation: sp-hide 0s 0.42s forwards; }
#splash.out .sp-stinger i { animation: sp-sting 0.85s cubic-bezier(0.75, 0, 0.25, 1) forwards; }
#splash.out .sp-stinger i:nth-child(2) { animation-delay: 0.06s; }
#splash.out .sp-stinger i:nth-child(3) { animation-delay: 0.12s; }

/* ---------- Images clés ---------- */
@keyframes sp-fade { to { opacity: 1; } }
@keyframes sp-gone { to { opacity: 0; } }
@keyframes sp-hide { to { opacity: 0; } }
@keyframes sp-clear { to { background: transparent; } }
@keyframes sp-failsafe { to { opacity: 0; visibility: hidden; } }
@keyframes sp-sway { from { transform: rotate(calc(var(--r, 0deg) - 4deg)); } to { transform: rotate(calc(var(--r, 0deg) + 4deg)); } }
@keyframes sp-floor { to { transform: scaleX(1); } }
@keyframes sp-spin { to { transform: rotate(360deg); } }
@keyframes sp-bb-x { from { transform: translateX(-62vw); } to { transform: translateX(0); } }
@keyframes sp-bb-y {
  0% { transform: translateY(-42vh); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.6); }
  30% { transform: translateY(0) scale(1.18, 0.78); animation-timing-function: cubic-bezier(0, 0.4, 0.5, 1); }
  58% { transform: translateY(-22vh) scale(0.96, 1.05); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.6); }
  80% { transform: translateY(0) scale(1.15, 0.82); animation-timing-function: cubic-bezier(0, 0.4, 0.5, 1); }
  100% { transform: translateY(-12vh) scale(1); }
}
@keyframes sp-fb-x { from { transform: translateX(62vw); } to { transform: translateX(0); } }
@keyframes sp-fb-y {
  0% { transform: translateY(-4vh); animation-timing-function: cubic-bezier(0.2, 0.6, 0.5, 1); }
  55% { transform: translateY(-36vh); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5); }
  100% { transform: translateY(-12vh); }
}
@keyframes sp-ring { 0% { opacity: 1; transform: scale(0); } 100% { opacity: 0; transform: scale(5.5); } }
@keyframes sp-spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scaleX(0.3); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(30vmin) scaleX(1); }
}
@keyframes sp-flash { 0% { opacity: 0.95; } 100% { opacity: 0; } }
@keyframes sp-shake {
  0%, 100% { transform: none; }
  15% { transform: translate(-9px, 6px) rotate(-0.6deg); }
  30% { transform: translate(8px, -7px) rotate(0.5deg); }
  45% { transform: translate(-6px, -4px); }
  60% { transform: translate(5px, 5px) rotate(-0.3deg); }
  80% { transform: translate(-2px, 2px); }
}
@keyframes sp-logo {
  0% { opacity: 0; transform: scale(2.6) rotate(-12deg); filter: blur(14px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 10px 30px rgba(248, 115, 6, 0.45)); }
}
@keyframes sp-glow {
  0%, 100% { opacity: 1; transform: none; filter: drop-shadow(0 10px 30px rgba(248, 115, 6, 0.45)); }
  50% { opacity: 1; transform: scale(1.03); filter: drop-shadow(0 10px 40px rgba(0, 158, 96, 0.6)); }
}
@keyframes sp-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes sp-fill { to { transform: scaleX(1); } }
@keyframes sp-shine { to { transform: translateX(260%); } }
@keyframes sp-sting { from { transform: translateX(-260vw) skewX(-12deg); } to { transform: translateX(160vw) skewX(-12deg); } }