/* Additional effects use the same palette and selectors as existing buttons.
   Gutenberg joins the same effect matrix, except Ghost/Swap which intentionally
   keep their own interaction model. */
.button-effect-lift :is(.btn-gradient:not(.btn-ghost,.oriibrands-btn-swap), .oriibrands-btn:not(.oriibrands-btn-ghost,.oriibrands-btn-swap), .wp-block-button:not(.is-style-oriibrands-ghost,.is-style-oriibrands-swap) .wp-block-button__link:not(.has-background)) { transition: transform .25s ease, box-shadow .25s ease, color .25s ease, background .25s ease; }
.button-effect-lift :is(.btn-gradient:not(.btn-ghost,.oriibrands-btn-swap), .oriibrands-btn:not(.oriibrands-btn-ghost,.oriibrands-btn-swap), .wp-block-button:not(.is-style-oriibrands-ghost,.is-style-oriibrands-swap) .wp-block-button__link:not(.has-background)):is(:hover, :focus-visible) { transform: translateY(-3px); background: var(--ob-button-hover-bg,var(--card)); color: var(--button-hover-text); box-shadow: 0 9px 22px -10px var(--primary); }
.button-effect-radial :is(.btn-gradient:not(.btn-ghost,.oriibrands-btn-swap), .oriibrands-btn:not(.oriibrands-btn-ghost,.oriibrands-btn-swap), .wp-block-button:not(.is-style-oriibrands-ghost,.is-style-oriibrands-swap) .wp-block-button__link:not(.has-background))::before { background: var(--gradient-brand); clip-path: circle(0 at 50% 50%); transition: clip-path .38s cubic-bezier(.22,1,.36,1); }
.button-effect-radial :is(.btn-gradient:not(.btn-ghost,.oriibrands-btn-swap), .oriibrands-btn:not(.oriibrands-btn-ghost,.oriibrands-btn-swap), .wp-block-button:not(.is-style-oriibrands-ghost,.is-style-oriibrands-swap) .wp-block-button__link:not(.has-background)):is(:hover, :focus-visible)::before { clip-path: circle(150% at 50% 50%); }
.button-effect-radial :is(.btn-gradient:not(.btn-ghost,.oriibrands-btn-swap), .oriibrands-btn:not(.oriibrands-btn-ghost,.oriibrands-btn-swap), .wp-block-button:not(.is-style-oriibrands-ghost,.is-style-oriibrands-swap) .wp-block-button__link:not(.has-background)):is(:hover, :focus-visible) { color: var(--button-hover-text); }
.button-effect-border :is(.btn-gradient:not(.btn-ghost,.oriibrands-btn-swap), .oriibrands-btn:not(.oriibrands-btn-ghost,.oriibrands-btn-swap), .wp-block-button:not(.is-style-oriibrands-ghost,.is-style-oriibrands-swap) .wp-block-button__link) { transition: box-shadow .28s ease, color .28s ease, background .28s ease; }
.button-effect-border :is(.btn-gradient:not(.btn-ghost,.oriibrands-btn-swap), .oriibrands-btn:not(.oriibrands-btn-ghost,.oriibrands-btn-swap), .wp-block-button:not(.is-style-oriibrands-ghost,.is-style-oriibrands-swap) .wp-block-button__link):is(:hover, :focus-visible) { box-shadow: inset 0 0 0 2px var(--primary), 0 0 18px -7px var(--primary); }

/* Two visual pieces, one native link/button and one accessible name.
   No DOM rewriting: saved Gutenberg markup remains unchanged. */
:is(.wp-block-button.is-style-oriibrands-swap .wp-block-button__link, .oriibrands-btn-swap) {
  --swap-size: 48px;
  --swap-gap: 8px;
  --swap-bg: #f4f6f5;
  --swap-fg: #0a0e0f;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  box-sizing: border-box;
  max-width: 100%;
  min-height: var(--swap-size);
  min-width: calc(var(--swap-size) + var(--swap-gap) + 72px);
  padding: 12px calc(var(--swap-size) + var(--swap-gap) + 22px) 12px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--swap-fg);
  box-shadow: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: visible;
  cursor: pointer;
  animation: none;
  transform: none;
  transition: padding .42s cubic-bezier(.22,1,.36,1), color .28s ease;
}
:is(.wp-block-button.is-style-oriibrands-swap .wp-block-button__link, .oriibrands-btn-swap)::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0 calc(var(--swap-size) + var(--swap-gap)) 0 0;
  border-radius: 999px;
  background: var(--swap-bg);
  opacity: 1;
  clip-path: none;
  transform: none;
  z-index: -1;
  transition: transform .42s cubic-bezier(.22,1,.36,1), background-color .28s ease;
}
:is(.wp-block-button.is-style-oriibrands-swap .wp-block-button__link, .oriibrands-btn-swap)::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: calc(100% - var(--swap-size));
  width: var(--swap-size);
  height: var(--swap-size);
  transform: translateY(-50%);
  border-radius: 50%;
  border: 0;
  opacity: 1;
  color: var(--swap-fg);
  background-color: var(--swap-bg);
  background-image:
    radial-gradient(circle at calc(50% - 3px) calc(50% - 5px), currentColor 1.2px, transparent 1.6px),
    radial-gradient(circle at calc(50% + 3px) calc(50% - 5px), currentColor 1.2px, transparent 1.6px),
    radial-gradient(circle at calc(50% - 3px) 50%, currentColor 1.2px, transparent 1.6px),
    radial-gradient(circle at calc(50% + 3px) 50%, currentColor 1.2px, transparent 1.6px),
    radial-gradient(circle at calc(50% - 3px) calc(50% + 5px), currentColor 1.2px, transparent 1.6px),
    radial-gradient(circle at calc(50% + 3px) calc(50% + 5px), currentColor 1.2px, transparent 1.6px);
  z-index: -2;
  transition: left .42s cubic-bezier(.22,1,.36,1), color .28s ease, background-color .28s ease;
}
:is(.wp-block-button.is-style-oriibrands-swap .wp-block-button__link, .oriibrands-btn-swap):is(:hover, :focus-visible) {
  --swap-bg: #0a0e0f;
  --swap-fg: #f4f6f5;
  padding: 12px 22px 12px calc(var(--swap-size) + var(--swap-gap) + 22px);
  background: transparent;
  color: var(--swap-fg);
  transform: none;
  box-shadow: none;
  animation: none;
}
:is(.wp-block-button.is-style-oriibrands-swap .wp-block-button__link, .oriibrands-btn-swap):is(:hover, :focus-visible)::before { transform: translateX(calc(var(--swap-size) + var(--swap-gap))); background: var(--swap-bg); clip-path: none; }
:is(.wp-block-button.is-style-oriibrands-swap .wp-block-button__link, .oriibrands-btn-swap):is(:hover, :focus-visible)::after { left: 0; }
:is(.wp-block-button.is-style-oriibrands-swap .wp-block-button__link, .oriibrands-btn-swap):focus-visible { outline: 2px solid var(--primary, #14b2da); outline-offset: 4px; }
.oriibrands-split-preview { margin-top: 24px; padding: 20px; border: 1px solid #dce3e8; border-radius: 14px; }
.oriibrands-split-preview h3 { margin-top: 0; }
.oriibrands-split-preview .oriibrands-btn-swap { margin-block: 12px; }
@media (prefers-reduced-motion: reduce) {
  :is(.button-effect-lift, .button-effect-radial, .button-effect-border) :is(.btn-gradient, .oriibrands-btn, .wp-block-button__link),
  :is(.button-effect-lift, .button-effect-radial, .button-effect-border) :is(.btn-gradient, .oriibrands-btn, .wp-block-button__link)::before { transition: none !important; animation: none !important; transform: none !important; }
  :is(.wp-block-button.is-style-oriibrands-swap .wp-block-button__link, .oriibrands-btn-swap),
  :is(.wp-block-button.is-style-oriibrands-swap .wp-block-button__link, .oriibrands-btn-swap)::before,
  :is(.wp-block-button.is-style-oriibrands-swap .wp-block-button__link, .oriibrands-btn-swap)::after { transition: none !important; animation: none !important; }
  :is(.wp-block-button.is-style-oriibrands-swap .wp-block-button__link, .oriibrands-btn-swap):is(:hover, :focus-visible) { padding: 12px calc(var(--swap-size) + var(--swap-gap) + 22px) 12px 22px; }
  :is(.wp-block-button.is-style-oriibrands-swap .wp-block-button__link, .oriibrands-btn-swap):is(:hover, :focus-visible)::before { transform: none; }
  :is(.wp-block-button.is-style-oriibrands-swap .wp-block-button__link, .oriibrands-btn-swap):is(:hover, :focus-visible)::after { left: calc(100% - var(--swap-size)); }
}