/* ==========================================================================
   Edabos — Preloader / loader de chargement
   Animation de branding : « edbos » -> le « a » arrive par la droite en
   rebondissant sur le mot -> il atterrit entre le « d » et le « b », qui
   s'écartent -> rotation du symbole.
   La largeur réelle du « a » est mesurée en JS et injectée dans --pl-aw
   (voir assets/js/preloader.js) ; les animations ne démarrent qu'avec la
   classe .is-ready, une fois les polices chargées.
   ========================================================================== */

html.is-loading,
html.is-loading body{
  overflow:hidden;
  height:100%;
}

.preloader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  /* repli si la mesure JS n'a pas eu lieu : ~.55em du corps du mot */
  --pl-aw:calc(clamp(42px,11.2vw,52px) * .55);
}

.preloader.is-done{
  animation:pl-fade-out .5s cubic-bezier(.4,0,.2,1) both;
  pointer-events:none;
}

.preloader__brand{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  opacity:0;
  /* le mot est encore « edbos » : on recentre le bloc de la demi-largeur du « a » */
  transform:translateX(calc(var(--pl-aw) / 2));
}

.preloader.is-ready .preloader__brand{
  animation:pl-fade-in .3s ease-out both,
            pl-recenter 180ms cubic-bezier(.33,1,.4,1) 1160ms forwards;
}

.preloader__symbol{
  width:clamp(38px,10vw,46px);
  height:clamp(38px,10vw,46px);
  flex:none;
  display:block;
  transform-origin:50% 50%;
}

.preloader.is-ready .preloader__symbol{
  animation:pl-symbol-spin 620ms cubic-bezier(.5,0,.15,1) 1440ms both;
  will-change:transform;
}

.preloader__word{
  display:inline-flex;
  font-family:"DM Sans",sans-serif;
  font-weight:700;
  font-size:clamp(42px,11.2vw,52px);
  letter-spacing:-.01em;
  line-height:1;
  white-space:nowrap;
}

.pl-seg{
  display:inline-block;
  background-image:linear-gradient(100deg,
    #101114 0%, #101114 42%,
    #5a78e6 48%, #ffffff 50%, #5a78e6 52%,
    #101114 58%, #101114 100%);
  background-size:220vw 100%;
  background-attachment:fixed;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.preloader.is-ready .pl-seg{
  animation:pl-shimmer 2.6s linear infinite;
}

.pl-pre,
.pl-post{
  opacity:0;
  transform:translateY(6px);
}

.preloader.is-ready .pl-pre{
  animation:pl-shimmer 2.6s linear infinite,
            pl-letters-in .45s cubic-bezier(.16,1,.3,1) .12s forwards;
}

.preloader.is-ready .pl-post{
  animation:pl-shimmer 2.6s linear infinite,
            pl-letters-in .45s cubic-bezier(.16,1,.3,1) .18s forwards;
}

/* Bloc « bos » collé au « d » tant que le « a » n'a pas atterri */
.pl-shift{
  display:inline-block;
  transform:translateX(calc(var(--pl-aw) * -1));
}

.preloader.is-ready .pl-shift{
  animation:pl-split 180ms cubic-bezier(.33,1,.4,1) 1160ms forwards;
}

/* .pl-a porte le déplacement horizontal (droite -> place finale) */
.pl-a{
  display:inline-block;
  position:relative;
  z-index:2;
  opacity:0;
  --pl-a-from:3.4em;
}

.preloader.is-ready .pl-a{
  animation:pl-a-approach 980ms cubic-bezier(.28,.6,.36,1) 420ms both;
  will-change:transform,opacity;
}

/* .pl-a-in porte les rebonds verticaux */
.pl-a-in{
  transform:translateY(-2.4em);
}

.preloader.is-ready .pl-a-in{
  animation:pl-shimmer 2.6s linear infinite,
            pl-a-hop 980ms linear 420ms both;
  will-change:transform;
}

@keyframes pl-fade-in{
  from{opacity:0}
  to{opacity:1}
}

@keyframes pl-fade-out{
  0%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.97)}
}

@keyframes pl-letters-in{
  to{opacity:1;transform:translateY(0)}
}

@keyframes pl-recenter{
  to{transform:translateX(0)}
}

@keyframes pl-split{
  to{transform:translateX(0)}
}

@keyframes pl-a-approach{
  0%{transform:translateX(var(--pl-a-from));opacity:0}
  10%{opacity:1}
  100%{transform:translateX(0);opacity:1}
}

/* Le « a » rebondit sur le haut du mot (-.62em) avant de se poser à sa place */
@keyframes pl-a-hop{
  0%{transform:translateY(-2.4em);animation-timing-function:cubic-bezier(.5,0,.9,.55)}
  18%{transform:translateY(-.62em);animation-timing-function:cubic-bezier(.15,.6,.35,1)}
  31%{transform:translateY(-1.9em);animation-timing-function:cubic-bezier(.5,0,.9,.55)}
  44%{transform:translateY(-.62em);animation-timing-function:cubic-bezier(.15,.6,.35,1)}
  55%{transform:translateY(-1.45em);animation-timing-function:cubic-bezier(.5,0,.9,.55)}
  66%{transform:translateY(-.62em);animation-timing-function:cubic-bezier(.15,.6,.35,1)}
  76%{transform:translateY(-1.1em);animation-timing-function:cubic-bezier(.5,0,.9,.55)}
  94%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.6,.4,1)}
  97%{transform:translateY(-.13em);animation-timing-function:cubic-bezier(.5,0,.9,.55)}
  100%{transform:translateY(0)}
}

@keyframes pl-symbol-spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@keyframes pl-shimmer{
  0%{background-position:0 0}
  100%{background-position:-220vw 0}
}

/* Navigateurs sans background-clip:text : repli sur une couleur pleine */
@supports not (background-clip:text){
  .pl-seg{
    -webkit-text-fill-color:unset;
    color:#101114;
    background:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .preloader,
  .preloader.is-done,
  .preloader.is-ready .preloader__brand,
  .preloader.is-ready .preloader__symbol,
  .preloader.is-ready .pl-seg,
  .preloader.is-ready .pl-pre,
  .preloader.is-ready .pl-post,
  .preloader.is-ready .pl-shift,
  .preloader.is-ready .pl-a,
  .preloader.is-ready .pl-a-in{
    animation:none!important;
  }
  .preloader__brand,
  .pl-pre,
  .pl-post,
  .pl-shift,
  .pl-a,
  .pl-a-in{opacity:1;transform:none}
  .pl-seg{
    -webkit-text-fill-color:unset;
    color:#101114;
    background:none;
  }
  .preloader.is-done{
    opacity:0;
    transition:opacity .2s ease;
  }
}