/* ==========================================================================
   133 — Notification Badge
   Cloche qui sonne : rotation amortie autour du pivot haut (5 oscillations
   décroissantes), battant en contre-phase à l'intérieur du groupe qui
   oscille (il « traîne » derrière la cloche). Badge compteur : apparition
   spring, bump à l'incrément, roll de chiffre (l'ancien sort vers le haut
   en fondu, le nouveau monte du bas), dégonflage à « Marquer lu ». Une onde
   circulaire part de la cloche à chaque sonnerie.
   Racine : .notif-badge — état piloté par anim.js (js: true).
   ========================================================================== */

.notif-badge {
  --nb-accent: var(--ml-accent, #7c8cff);
  --nb-danger: var(--ml-danger, #f87171);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  color: var(--ml-fg, #e8eaf2);
}

/* --- Scène : cloche + onde + badge ---------------------------------------- */

.notif-badge__stage {
  position: relative;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
}

.notif-badge__ripple {
  position: absolute;
  left: calc(50% - 34px);
  top: calc(50% - 34px);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2px solid var(--nb-accent);
  opacity: 0;
  transform: scale(0.42);
  pointer-events: none;
}

.notif-badge__ripple.is-on {
  animation: notif-badge-ripple 750ms cubic-bezier(0.2, 0.6, 0.35, 1) both;
}

@keyframes notif-badge-ripple {
  0% { opacity: 0.55; transform: scale(0.42); }
  100% { opacity: 0; transform: scale(1.55); }
}

/* --- Cloche ---------------------------------------------------------------- */

.notif-badge__bell {
  width: 56px;
  height: 56px;
  display: block;
  overflow: visible;
}

.notif-badge__body { fill: var(--ml-fg, #e8eaf2); }
.notif-badge__clapper { fill: var(--ml-muted, #8b91a3); }

/* même pivot (le haut de la cloche) pour la cloche et le battant : le
   battant étant DANS le groupe oscillant, sa contre-rotation est relative
   — il reste accroché tout en battant en opposition de phase */
.notif-badge__swing,
.notif-badge__clapper {
  transform-box: view-box;
  transform-origin: 50% 13%;
}

.notif-badge__bell.is-ringing .notif-badge__swing {
  animation: notif-badge-ring 1150ms both;
}

.notif-badge__bell.is-ringing .notif-badge__clapper {
  animation: notif-badge-clapper 1150ms both;
}

/* 5 oscillations décroissantes, ease-in-out sur chaque segment */
@keyframes notif-badge-ring {
  0%   { transform: rotate(0deg); animation-timing-function: ease-out; }
  10%  { transform: rotate(15deg); animation-timing-function: ease-in-out; }
  25%  { transform: rotate(-12deg); animation-timing-function: ease-in-out; }
  40%  { transform: rotate(9deg); animation-timing-function: ease-in-out; }
  55%  { transform: rotate(-6deg); animation-timing-function: ease-in-out; }
  70%  { transform: rotate(3.5deg); animation-timing-function: ease-in-out; }
  82%  { transform: rotate(-1.8deg); animation-timing-function: ease-in-out; }
  92%  { transform: rotate(0.8deg); animation-timing-function: ease-out; }
  100% { transform: rotate(0deg); }
}

/* contre-phase, amplitude un peu plus grande, léger retard perçu */
@keyframes notif-badge-clapper {
  0%   { transform: rotate(0deg); animation-timing-function: ease-out; }
  13%  { transform: rotate(-13deg); animation-timing-function: ease-in-out; }
  28%  { transform: rotate(11deg); animation-timing-function: ease-in-out; }
  43%  { transform: rotate(-8deg); animation-timing-function: ease-in-out; }
  58%  { transform: rotate(5.5deg); animation-timing-function: ease-in-out; }
  72%  { transform: rotate(-3deg); animation-timing-function: ease-in-out; }
  84%  { transform: rotate(1.5deg); animation-timing-function: ease-out; }
  100% { transform: rotate(0deg); }
}

/* --- Badge compteur --------------------------------------------------------- */

.notif-badge__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--nb-danger);
  color: var(--ml-fg, #e8eaf2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* liseré couleur fond : détache le badge de la cloche */
  box-shadow: 0 0 0 3px var(--ml-bg, #0d1017);
  transform: scale(0);
}

.notif-badge__badge.is-shown { transform: scale(1); }

.notif-badge__badge.is-appear {
  animation: notif-badge-appear 520ms cubic-bezier(0.25, 0.6, 0.35, 1) both;
}

@keyframes notif-badge-appear {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.18); }
  80%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

.notif-badge__badge.is-bump {
  animation: notif-badge-bump 460ms cubic-bezier(0.25, 0.6, 0.35, 1) both;
}

@keyframes notif-badge-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28); }
  65%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* déclaré APRÈS appear/bump : si les classes coexistent un instant,
   le dégonflage gagne */
.notif-badge__badge.is-clearing {
  animation: notif-badge-deflate 460ms cubic-bezier(0.55, 0, 0.6, 1) both;
}

@keyframes notif-badge-deflate {
  0%   { transform: scale(1); opacity: 1; }
  28%  { transform: scale(1.16); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

/* --- Roll du chiffre --------------------------------------------------------- */

.notif-badge__value {
  position: relative;
  display: block;
  min-width: 1ch;
  height: 1em;
  overflow: hidden;
  text-align: center;
}

.notif-badge__num {
  display: block;
  height: 1em;
  line-height: 1;
}

.notif-badge__num.is-in {
  animation: notif-badge-num-in 340ms cubic-bezier(0.25, 0.9, 0.35, 1.15) both;
}

/* l'ancien chiffre passe en absolu : le nouveau garde le flux (et la largeur) */
.notif-badge__num.is-out {
  position: absolute;
  inset: 0;
  animation: notif-badge-num-out 300ms cubic-bezier(0.5, 0, 0.75, 0.6) both;
}

@keyframes notif-badge-num-in {
  from { transform: translateY(115%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes notif-badge-num-out {
  to { transform: translateY(-115%); opacity: 0; }
}

/* --- Boutons ----------------------------------------------------------------- */

.notif-badge__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.notif-badge__btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 10px;
  color: var(--ml-fg, #e8eaf2);
  background: color-mix(in srgb, var(--ml-muted, #8b91a3) 16%, transparent);
  transition:
    transform 180ms cubic-bezier(0.3, 1.4, 0.5, 1),
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.notif-badge__btn:hover { transform: translateY(-1px); }
.notif-badge__btn:active { transform: translateY(0) scale(0.97); }

.notif-badge__btn:focus-visible {
  outline: 2px solid var(--nb-accent);
  outline-offset: 2px;
}

.notif-badge__btn--add {
  background: var(--nb-accent);
  color: var(--ml-bg, #0d1017);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--nb-accent) 30%, transparent);
}

.notif-badge__btn--add:hover {
  box-shadow: 0 8px 22px color-mix(in srgb, var(--nb-accent) 42%, transparent);
}

.notif-badge__btn--clear:hover {
  background: color-mix(in srgb, var(--ml-muted, #8b91a3) 26%, transparent);
}

/* --- Région live (lecteurs d'écran) ------------------------------------------ */

.notif-badge__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Reduced motion ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .notif-badge__bell.is-ringing .notif-badge__swing,
  .notif-badge__bell.is-ringing .notif-badge__clapper,
  .notif-badge__ripple.is-on,
  .notif-badge__badge.is-appear,
  .notif-badge__badge.is-bump,
  .notif-badge__badge.is-clearing,
  .notif-badge__num.is-in,
  .notif-badge__num.is-out {
    animation: none;
  }

  .notif-badge__num.is-out { display: none; }
  .notif-badge__badge.is-clearing { transform: scale(0); opacity: 0; }
  .notif-badge__btn { transition: none; }
}