/* =========================================================
   ANIMATION D'ARRIVÉE « RECHARGE » (2,3 s)
   Sur fond nuit, la marque « B » du logo se charge comme une batterie : un balayage circulaire l'allume
   pendant que la jauge cyan → vert se remplit ; à 100 % la marque s'illumine, « Rechargez mieux. » apparaît,
   puis l'écran remonte et dévoile la page (le hero entre en fondu).
   L'animation est 100 % CSS (elle démarre au premier affichage) ; intro.js gère le passage au clic / Échap,
   l'entrée du hero et le retrait de l'écran. Sans JS, l'écran s'efface seul à 2,3 s.
   ========================================================= */

/* L'intro n'existe que si le script du <head> a posé html.bb-intro-on (1re visite de la session) */
#bb-intro{display:none}
html.bb-intro-on #bb-intro{
  display:grid;place-items:center;position:fixed;inset:0;z-index:10000;overflow:hidden;cursor:pointer;
  background:radial-gradient(120% 90% at 50% 45%,#13283F 0%,#0B1B2E 62%);-webkit-tap-highlight-color:transparent;
  animation:bb-out 2.3s forwards
}
@keyframes bb-out{
  0%,70%{transform:none;visibility:visible;animation-timing-function:cubic-bezier(.7,0,.25,1)}
  99.9%{transform:translateY(-100%);visibility:visible}
  100%{transform:translateY(-100%);visibility:hidden}
}

#bb-intro .bb-intro__stage{display:flex;flex-direction:column;align-items:center;gap:26px;animation:bb-stage 2.3s forwards}
@keyframes bb-stage{0%,66%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-30px)}}

/* Marque : une version éteinte (fantôme) + une version allumée révélée par un balayage circulaire */
#bb-intro .bb-intro__mark{position:relative;width:clamp(104px,24vw,150px);aspect-ratio:1;animation:bb-mark 2.3s forwards}
#bb-intro .bb-intro__mark img{position:absolute;inset:0;width:100%;height:100%}
#bb-intro .bb-intro__ghost{opacity:0;filter:grayscale(1) brightness(1.8);animation:bb-ghost 2.3s forwards}
@property --bb-a{syntax:'<angle>';inherits:false;initial-value:0deg}
#bb-intro .bb-intro__charge{
  -webkit-mask:conic-gradient(from 215deg,#000 var(--bb-a),transparent 0);mask:conic-gradient(from 215deg,#000 var(--bb-a),transparent 0);
  animation:bb-charge 1.05s .22s cubic-bezier(.45,0,.25,1) both
}
@keyframes bb-ghost{0%{opacity:0}10%,60%{opacity:.16}70%,100%{opacity:0}}
@keyframes bb-charge{from{--bb-a:0deg}to{--bb-a:360deg}}
@keyframes bb-mark{
  0%,55%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(79,197,214,0))}
  61%{transform:scale(1.07);filter:drop-shadow(0 0 22px rgba(79,197,214,.75))}
  70%,100%{transform:scale(1);filter:drop-shadow(0 0 12px rgba(135,214,1,.35))}
}

/* Jauge de charge (couleurs du logo) */
#bb-intro .bb-intro__bar{width:clamp(150px,34vw,210px);height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
#bb-intro .bb-intro__bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4fc5d6,#87d601);
  transform:scaleX(0);transform-origin:left;box-shadow:0 0 14px rgba(79,197,214,.8);animation:bb-bar 1.05s .22s cubic-bezier(.45,0,.25,1) both}
@keyframes bb-bar{to{transform:scaleX(1)}}

/* Signature du logo */
#bb-intro .bb-intro__word{
  margin:0;font-family:'Inter',system-ui,sans-serif;font-weight:500;font-size:clamp(13px,3.4vw,15px);letter-spacing:.32em;
  text-transform:uppercase;color:rgba(255,255,255,.82);padding-left:.32em;opacity:0;animation:bb-word 2.3s forwards
}
#bb-intro .bb-intro__word b{font-weight:700;color:#87d601}
@keyframes bb-word{0%,40%{opacity:0;transform:translateY(8px)}56%,100%{opacity:1;transform:none}}

html.bb-intro-lock{overflow:hidden}

/* Le hero reste caché derrière l'écran, puis entre en fondu quand l'écran remonte (intro.js : bb-intro-hold -> retiré) */
html.bb-intro-hold .hero .rv{opacity:0!important;transform:translateY(28px)!important}
html.bb-intro-revealed .hero .rv{transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.bb-intro-revealed .hero-copy .rv:nth-child(2){transition-delay:.07s}
html.bb-intro-revealed .hero-copy .rv:nth-child(3){transition-delay:.14s}
html.bb-intro-revealed .hero-copy .rv:nth-child(4){transition-delay:.21s}
html.bb-intro-revealed .hero-form.rv{transition-delay:.18s}

@media (prefers-reduced-motion:reduce){#bb-intro{display:none!important}}