/* ============================================================
   H2B V102 — transitions fluides non bloquantes
   Aucun clic n'est retardé ou intercepté.
   ============================================================ */

/* Léger feedback sur l'onglet cliqué. */
.h2b-v102-tab-pulse{
  animation:h2bV102TabPulse 520ms cubic-bezier(.22,.7,.25,1) both!important;
  transform-origin:center center!important;
  position:relative!important;
  z-index:4!important;
}
@keyframes h2bV102TabPulse{
  0%{
    transform:scale(1);
    filter:brightness(1);
    box-shadow:0 0 0 rgba(255,255,255,0);
  }
  42%{
    transform:scale(1.045);
    filter:brightness(1.12);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.28),
      0 0 9px rgba(255,255,255,.23),
      0 0 16px rgba(87,181,255,.10);
  }
  100%{
    transform:scale(1);
    filter:brightness(1);
    box-shadow:0 0 0 rgba(255,255,255,0);
  }
}

/* Révélation du panneau : visible tout de suite, puis se pose doucement. */
.h2b-v102-panel-enter{
  animation:h2bV102PanelEnter 430ms cubic-bezier(.2,.72,.24,1) both!important;
  transform-origin:50% 12%!important;
}
@keyframes h2bV102PanelEnter{
  0%{opacity:.86;transform:scale(.985) translateY(5px);filter:brightness(.96)}
  55%{opacity:1;transform:scale(1.006) translateY(0);filter:brightness(1.035)}
  100%{opacity:1;transform:scale(1) translateY(0);filter:brightness(1)}
}

/* Menu : s'ouvre immédiatement, puis légère respiration. */
.h2b-v102-menu-enter{
  animation:h2bV102MenuEnter 420ms cubic-bezier(.2,.72,.24,1) both!important;
  transform-origin:100% 10%!important;
}
@keyframes h2bV102MenuEnter{
  0%{filter:brightness(.96)}
  50%{filter:brightness(1.035)}
  100%{filter:brightness(1)}
}

/* Trait blanc fin autour du panneau/menu. */
.h2b-v102-light-target{
  position:relative!important;
  isolation:isolate;
}
.h2b-v102-light-overlay{
  position:absolute;
  inset:0;
  z-index:55;
  pointer-events:none;
  overflow:hidden;
  border-radius:inherit;
}
.h2b-v102-light-segment{
  position:absolute;
  display:block;
  pointer-events:none;
  will-change:transform,opacity;
  filter:
    drop-shadow(0 0 1.5px rgba(255,255,255,.9))
    drop-shadow(0 0 4px rgba(255,255,255,.34))
    drop-shadow(0 0 7px rgba(81,177,255,.08));
}
.h2b-v102-top,.h2b-v102-bottom{
  width:24%;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.09) 10%,#fff 49%,#fff 55%,rgba(255,255,255,.14) 90%,transparent 100%);
}
.h2b-v102-left,.h2b-v102-right{
  width:1px;
  height:24%;
  background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.09) 10%,#fff 49%,#fff 55%,rgba(255,255,255,.14) 90%,transparent 100%);
}
.h2b-v102-top{
  top:0;left:0;
  transform:translateX(-120%);
  animation:h2bV102Top 420ms linear 0ms both;
}
.h2b-v102-right{
  top:0;right:0;
  transform:translateY(-120%);
  animation:h2bV102Right 420ms linear 360ms both;
}
.h2b-v102-bottom{
  bottom:0;right:0;
  transform:translateX(120%);
  animation:h2bV102Bottom 420ms linear 720ms both;
}
.h2b-v102-left{
  bottom:0;left:0;
  transform:translateY(120%);
  animation:h2bV102Left 420ms linear 1080ms both;
}
@keyframes h2bV102Top{
  0%{transform:translateX(-120%);opacity:0}
  8%{opacity:1}
  92%{opacity:1}
  100%{transform:translateX(430%);opacity:0}
}
@keyframes h2bV102Right{
  0%{transform:translateY(-120%);opacity:0}
  8%{opacity:1}
  92%{opacity:1}
  100%{transform:translateY(430%);opacity:0}
}
@keyframes h2bV102Bottom{
  0%{transform:translateX(120%);opacity:0}
  8%{opacity:1}
  92%{opacity:1}
  100%{transform:translateX(-430%);opacity:0}
}
@keyframes h2bV102Left{
  0%{transform:translateY(120%);opacity:0}
  8%{opacity:1}
  92%{opacity:1}
  100%{transform:translateY(-430%);opacity:0}
}

/* Très léger halo, jamais un masque plein écran. */
.h2b-v102-light-overlay::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018);
  animation:h2bV102Halo 1500ms ease-out both;
}
@keyframes h2bV102Halo{
  0%{opacity:0}
  18%{opacity:.42}
  70%{opacity:.12}
  100%{opacity:0}
}

@media(max-width:700px){
  .h2b-v102-top,.h2b-v102-bottom{width:27%}
  .h2b-v102-left,.h2b-v102-right{height:27%}
  .h2b-v102-tab-pulse{animation-duration:430ms!important}
  .h2b-v102-panel-enter{animation-duration:360ms!important}
}

@media(prefers-reduced-motion:reduce){
  .h2b-v102-tab-pulse,
  .h2b-v102-panel-enter,
  .h2b-v102-menu-enter{animation:none!important}
  .h2b-v102-light-overlay{display:none!important}
}