/* BD Negocio Digital · Magnetic lime button interaction
   Keeps each button's existing dimensions and background colour.
   Magnetic translation lives on a wrapper; wiggle rotation lives on the button,
   so the two effects never overwrite each other. */

.bd-magnetic-zone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
  transform: translate3d(0,0,0);
  will-change: transform;
  transition: transform .18s cubic-bezier(.2,.7,.2,1);
}

.bd-magnetic-zone > .bd-magnetic-button {
  position: relative;
  isolation: isolate;
  transform-origin: 50% 50%;
  animation: bdLimeWiggle 3.6s ease-in-out infinite;
  will-change: rotate, box-shadow, filter;
  transition: box-shadow .28s ease, filter .28s ease, border-color .28s ease, background-color .28s ease;
}

.bd-magnetic-zone > .bd-magnetic-button::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.26), rgba(255,255,255,0) 36%, rgba(255,255,255,.09) 72%, rgba(255,255,255,0));
  opacity: .42;
  mix-blend-mode: soft-light;
}

.bd-magnetic-zone:hover > .bd-magnetic-button,
.bd-magnetic-zone:focus-within > .bd-magnetic-button {
  filter: saturate(1.06) brightness(1.035);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 14px 36px rgba(215,255,99,.22),
    0 0 28px rgba(215,255,99,.12);
}

/* Short bursts instead of constant shaking: more premium, less distracting. */
@keyframes bdLimeWiggle {
  0%, 4%, 28%, 100% { rotate: 0deg; }
  7%  { rotate: -2.6deg; }
  10% { rotate: 2.2deg; }
  13% { rotate: -1.75deg; }
  16% { rotate: 1.3deg; }
  19% { rotate: -.85deg; }
  22% { rotate: .45deg; }
  25% { rotate: -.18deg; }
}

/* Header CTAs need no extra footprint. */
.site-nav .bd-magnetic-zone,
.site-header .bd-magnetic-zone,
.agenda-nav .bd-magnetic-zone {
  flex: 0 0 auto;
}

/* Full-width mobile CTAs keep their current width. */
@media (max-width: 760px) {
  .bd-magnetic-zone:has(> .bd-service-link),
  .bd-magnetic-zone:has(> .arc-visit) {
    width: 100%;
  }
  .bd-magnetic-zone > .bd-service-link,
  .bd-magnetic-zone > .arc-visit {
    width: 100%;
  }
}

/* Don't make touch screens chase a moving target. The wiggle stays, magnetism is JS-disabled. */
@media (pointer: coarse) {
  .bd-magnetic-zone { transform: none !important; }
  .bd-magnetic-zone > .bd-magnetic-button { animation-duration: 4.6s; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-magnetic-zone,
  .bd-magnetic-zone > .bd-magnetic-button {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    rotate: 0deg !important;
  }
}