/* 20261015-bros-xfade — fade in at the X (never translates across chips/cards/logo). Leave fades out, then snaps home. */
html.fab-bros #fab {
  translate: var(--br-dx, 0px) var(--br-dy, 0px) !important;
  scale: var(--br-s, 1) !important;
  transform-origin: 50% 50% !important;
  transition: opacity 500ms ease !important;
  opacity: 1;
}
html.fab-bros.fab-bros-fade #fab { opacity: 0 !important; }
html.fab-bros-leave #fab { transition: opacity 280ms ease !important; opacity: 0 !important; }
html.fab-bros-track #fab { transition: none !important; }
html.fab-bros.fab-bros-still #fab, html.fab-bros.fab-bros-still #fab *, html.fab-bros.fab-bros-still #fab::before, html.fab-bros.fab-bros-still #fab::after { animation: none !important; }
/* 20261015-bros-xzone — bubble in the black band above the logo, right-anchored, wide, multi-line; tail down to him at the X */
html.fab-bros-say #fab-say { top: var(--br-say-top) !important; right: var(--br-say-right, 8px) !important; left: auto !important; bottom: auto !important; translate: 0 -100%; max-width: calc(100vw - 24px) !important; width: max-content; transform-origin: right bottom !important; }
html.fab-bros-say #fab-say::after { top: auto !important; bottom: -4px !important; right: var(--br-tail-right, 18px) !important; transform: rotate(45deg) !important; }
html.fab-bros-say #fab-say:not([hidden]) ~ #fab::after { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  html.fab-bros #fab, html.fab-bros-leave #fab { transition: none !important; }
  html.fab-bros.fab-bros-fade #fab, html.fab-bros-leave #fab { opacity: 1 !important; }
}

/* 20261015-fire — after settle, no leftover bubble animations on Thunder */
html.fab-bros.fab-bros-still #fab-say:not(.fab-say-drama-in):not(.fab-say-out) {
  animation: none !important;
}