/* ============================================================
   Animation de chargement Padcraft (2026-10-01, version « vague »).
   Le logo de base, en aplat, sans ombre ni degrade. Ses trois pieces
   s'emboitent une fois, discretement (petit ecart seulement), puis une vague
   parcourt la manette en boucle : chaque piece, de gauche a droite, se
   souleve un peu et s'eclaircit, puis se repose. Le logo reste forme.
   Composant : brand-loader.js (<div data-brand-loader></div>).
   Variables : --bl-size (largeur de l'icone), --bl-color (couleur du logo).
   ============================================================ */
.bl { --bl-size: 84px; --bl-color: #2f5fe3; }
/* :where() = specificite nulle : la regle d'une page qui masque ou place le
   loader (display:none tant que rien ne charge, position absolue...) gagne
   TOUJOURS, quel que soit l'ordre des feuilles. Sans cela, ce display
   l'emportait sur « .pp-bl { display: none } » et le loader restait affiche. */
:where(.bl) { display: inline-flex; flex-direction: column; align-items: center; gap: 18px; }
.bl.is-dark { --bl-color: #4f7cff; }
.bl-mark { display: block; width: var(--bl-size); aspect-ratio: 15.23 / 9.71; color: var(--bl-color); }
.bl-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Deux animations par piece : l'emboitement (une fois), puis la vague
   (en boucle, demarree apres l'emboitement). Meme periode pour les trois
   pieces : le decalage de la vague reste constant d'un passage a l'autre. */
.bl-part { transform-box: fill-box; transform-origin: 50% 100%; }
.bl-l { animation: bl-in-l .55s cubic-bezier(.2, .9, .3, 1) both, bl-wave-g 1.4s cubic-bezier(.45, 0, .55, 1) .7s infinite; }
.bl-c { animation: bl-in-c .55s cubic-bezier(.2, .9, .3, 1) .07s both, bl-wave-c 1.4s cubic-bezier(.45, 0, .55, 1) .83s infinite; }
.bl-r { animation: bl-in-r .55s cubic-bezier(.2, .9, .3, 1) .14s both, bl-wave-g 1.4s cubic-bezier(.45, 0, .55, 1) .96s infinite; }

@keyframes bl-in-l { from { opacity: 0; transform: translateX(-16%); } to { opacity: 1; transform: none; } }
@keyframes bl-in-c { from { opacity: 0; transform: translateY(-16%); } to { opacity: 1; transform: none; } }
@keyframes bl-in-r { from { opacity: 0; transform: translateX(16%); } to { opacity: 1; transform: none; } }

/* La vague : montee, eclaircissement, retour, puis repos jusqu'au passage
   suivant. Le centre, plus court que les poignees, monte d'un pourcentage
   plus grand pour que les trois pieces se levent de la meme hauteur. */
@keyframes bl-wave-g {
  0%, 40%, 100% { transform: none; opacity: 1; }
  18% { transform: translateY(-11%); opacity: .55; }
}
@keyframes bl-wave-c {
  0%, 40%, 100% { transform: none; opacity: 1; }
  18% { transform: translateY(-14%); opacity: .55; }
}

.bl-label { display: block; margin: 0; font: 500 14px/20px "Geist", -apple-system, "Segoe UI", sans-serif; color: #6f7988; text-align: center; }
.bl.is-dark .bl-label { color: #9aa2ae; }
.bl-track { display: block; width: 160px; height: 3px; border-radius: 999px; background: #e7ecf7; overflow: hidden; }
.bl.is-dark .bl-track { background: rgba(255, 255, 255, .1); }
.bl-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--bl-color); transition: width .3s ease; }
.bl-track.is-indeterminate i { width: 34%; animation: bl-slide 1.3s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes bl-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } }

/* Bloc de chargement d'une page (remplace les anciens « Loading... ») :
   centre, sans cadre. [hidden] doit gagner sur display:flex. */
.bl-page { display: flex; justify-content: center; padding: 72px 0; text-align: center; }
.bl-page[hidden], .bl[hidden] { display: none; }
/* Ecran de chargement masque en fondu (configurateur, source OBS) : l'element
   reste dans la page, l'animation est mise en pause pour ne plus rien calculer. */
.is-hidden .bl-part, .is-hidden .bl-mark { animation-play-state: paused; }

/* RALENTIR, jamais couper : sans deplacement, la vague ne passe plus que par
   l'eclaircissement des pieces, plus lentement. */
@media (prefers-reduced-motion: reduce) {
  .bl-l { animation: bl-fade 2.4s ease-in-out infinite; }
  .bl-c { animation: bl-fade 2.4s ease-in-out .2s infinite; }
  .bl-r { animation: bl-fade 2.4s ease-in-out .4s infinite; }
  .bl-track.is-indeterminate i { animation-duration: 3s; }
}
@keyframes bl-fade { 0%, 45%, 100% { opacity: 1; } 22% { opacity: .5; } }