/* ihb.css: "interactive hover button" (port of the 21st.dev / Magic UI component) for secondary buttons, applied by js/ihb.js.
   Rest: white pill with a small pink dot. Hover / press: the dot floods the pill pink, the label slides away and returns with an arrow. */
.cta.ihb {
  --dir: 1;
  position: relative; overflow: hidden; isolation: isolate;
  justify-content: center; gap: 0; min-width: 9.5em; padding-inline: 38px 24px;
  background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgb(43 43 46 / .14);
}
[dir="rtl"] .cta.ihb { --dir: -1; }
.cta.ihb::before { content: none; }
/* Khalid 2026-10-27 ("weird white behind this button"): the flood used to animate the dot's size and position, so it
   left the far end white and the two labels crossed. Now the dot scales out as a circle (transform only, sized per
   button by js/ihb.js as --ihb-s), and the labels move like a conveyor on a stagger so they never overlap. */
.ihb__label { display: inline-block; translate: calc(4px * var(--dir)) 0; transition: translate .4s cubic-bezier(.22, 1, .36, 1) .06s, opacity .25s ease .08s; }
.ihb__over {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--ink); opacity: 0; translate: calc(-36px * var(--dir)) 0;
  transition: translate .35s cubic-bezier(.22, 1, .36, 1), opacity .16s ease;
}
.ihb__over svg { width: 18px; height: 18px; flex: none; }
[dir="rtl"] .ihb__over svg { transform: scaleX(-1); }
.ihb__dot {
  position: absolute; z-index: 1; inset-inline-start: 18px; top: calc(50% - 4px);
  width: 8px; height: 8px; border-radius: 50%; background: var(--pink);
  transition: scale .55s cubic-bezier(.65, 0, .35, 1);
}
.cta.ihb:is(:hover, :focus-visible, [data-pressed="true"]) .ihb__dot { scale: var(--ihb-s, 60); }
.cta.ihb:is(:hover, :focus-visible, [data-pressed="true"]) .ihb__label { translate: calc(40px * var(--dir)) 0; opacity: 0; transition: translate .35s cubic-bezier(.65, 0, .35, 1), opacity .2s ease .06s; }
.cta.ihb:is(:hover, :focus-visible, [data-pressed="true"]) .ihb__over { translate: 0 0; opacity: 1; transition: translate .45s cubic-bezier(.22, 1, .36, 1) .1s, opacity .25s ease .12s; }
@media (prefers-reduced-motion: reduce) { .cta.ihb * { transition: none !important; } }