/* Hero Beauty : tous les styles sont limités au bloc .hb-pin, rien ne touche le reste du site. */
.hb-pin{
  /* ---- Réglages ---- */
  --hb-word:#EE7FA0;                 /* couleur du mot */
  --hb-lip:#C2123F;                  /* couleur du raisin du rouge à lèvres */
  --hb-shadow:rgba(70,20,35,.30);    /* ombre sous le produit */
  --hb-font:"Poppins","Avenir Next","Segoe UI",system-ui,sans-serif;
  --hb-top:0px;                      /* hauteur de ton menu s'il est fixe en haut (ex. 72px) */
  --hb-scroll:220;                   /* durée de l'effet : 220 = 2,2 hauteurs d'écran de défilement */

  position:relative;
  height:calc(var(--hb-scroll) * 1vh);
  height:calc(var(--hb-scroll) * 1svh);
}
.hb-pin,.hb-pin *{box-sizing:border-box}

.hb-stage{
  --hb-fs:min(17vw,17vh);
  position:sticky;top:var(--hb-top);
  height:calc(100vh - var(--hb-top));
  height:calc(100svh - var(--hb-top));
  overflow:hidden;display:grid;place-items:center;padding-inline:16px;
}
.hb-stack{
  position:relative;display:inline-block;margin:0;padding:0;
  font:800 var(--hb-fs)/.82 var(--hb-font);
  letter-spacing:-.02em;text-transform:uppercase;color:var(--hb-word);
}
.hb-line{display:block;white-space:nowrap;will-change:transform}
.hb-line span{
  display:inline-block;
  animation:hb-rise .9s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:calc(var(--i) * 90ms);
}
@keyframes hb-rise{from{transform:translateY(55%);opacity:0}}

.hb-prod{
  position:absolute;left:55%;top:55%;height:2.8em;
  transform:translate(-50%,-50%);perspective:900px;pointer-events:none;
}
.hb-move{display:block;height:100%;transform:rotate(-12deg);will-change:transform;--sx:14px;--sy:24px}
.hb-in{display:block;height:100%;animation:hb-drop 1.1s cubic-bezier(.2,.9,.25,1) .35s both}
@keyframes hb-drop{from{transform:translateY(-28%) rotate(-26deg) scale(.82);opacity:0}}
.hb-prod svg,.hb-prod img{
  display:block;height:100%;width:auto;max-width:none;overflow:visible;
  filter:drop-shadow(var(--sx) var(--sy) 22px var(--hb-shadow));
}
.hb-prod svg{aspect-ratio:200/520}
.hb-lip{fill:var(--hb-lip)}

@media (prefers-reduced-motion: reduce){
  .hb-line span,.hb-in{animation:none}
}