/* afb.css: arrow-fill button (port of the Hyperiux / 21st.dev "arrow-fill-button"), applied by js/afb.js to the main CTAs.
   Rest: pink pill, charcoal label, charcoal circle with a pink arrow. Hover / press: charcoal floods out of the circle,
   the label turns white as the fill passes it, and the arrow swaps. Mirrored for Arabic. */
.cta.afb {
  --h: 52px; --ic: 40px; --ir: 6px; --iy: calc((var(--h) - var(--ic)) / 2);
  --pad-s: 22px; --pad-e: calc(var(--ic) + var(--ir) + 16px);
  --fill: var(--ink); --fill-text: #fff; --arrow: var(--pink);
  --rest: var(--iy) var(--ir) var(--iy) calc(100% - var(--ir) - var(--ic)); /* the circle's box, measured from the inline end */
  --dur: .45s; --e: cubic-bezier(.785, .135, .15, .86); --ring: 3px;
  height: var(--h); gap: 0; padding-inline: var(--pad-s) var(--pad-e);
  background: var(--pink); color: var(--ink); isolation: isolate;
}
.cta.afb::before { content: none; }
/* hover ring (Khalid 2026-10-27: "the pink is exposed a little more, just a smidge, and animates"): the fill stops --ring short
   of the edge, and a lighter-pink highlight runs round the pink rim underneath it */
@property --afb-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cta.afb::after {
  content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--afb-a), transparent 0 52%, #FFD9E8 68%, #fff 72%, #FFD9E8 76%, transparent 92%);
  transition: opacity var(--dur) var(--e);
}
.cta.afb:is(:hover, :focus-visible, [data-pressed="true"])::after { opacity: 1; animation: afb-ring 2.4s linear infinite; }
@keyframes afb-ring { to { --afb-a: 360deg; } }
.afb__fill, .afb__dup, .afb__icon { position: absolute; pointer-events: none; }
.afb__fill {
  z-index: 2; border-radius: 999px; background: var(--fill);
  inset: var(--rest);
  transition: inset var(--dur) var(--e);
}
.afb__dup {
  z-index: 3; inset: 0; display: flex; align-items: center; padding-inline: var(--pad-s) var(--pad-e);
  color: var(--fill-text); white-space: nowrap;
  clip-path: inset(var(--rest));
  transition: clip-path var(--dur) var(--e);
}
.afb__icon {
  z-index: 4; inset-inline-end: var(--ir); top: 50%; translate: 0 -50%;
  width: var(--ic); height: var(--ic); border-radius: 50%; overflow: hidden;
  background: var(--fill); color: var(--arrow);
}
.afb__icon svg {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px;
  transition: transform var(--dur) var(--e);
}
.cta.afb .afb__in { transform: translate(-170%, -50%) scale(0); }   /* .cta.afb beats styles.css's [dir=rtl] .cta svg flip */
.cta.afb .afb__out { transform: translate(-50%, -50%) scale(1); }

.cta.afb:is(:hover, :focus-visible, [data-pressed="true"]) .afb__fill { inset: var(--ring); }
.cta.afb:is(:hover, :focus-visible, [data-pressed="true"]) .afb__dup { clip-path: inset(0); }
.cta.afb:is(:hover, :focus-visible, [data-pressed="true"]) .afb__in { transform: translate(-50%, -50%) scale(1); }
.cta.afb:is(:hover, :focus-visible, [data-pressed="true"]) .afb__out { transform: translate(70%, -50%) scale(0); }

/* Arabic: the circle sits on the left, so the rest box is mirrored; the icon is flipped so its arrows point and travel left */
[dir="rtl"] .cta.afb { --rest: var(--iy) calc(100% - var(--ir) - var(--ic)) var(--iy) var(--ir); }
[dir="rtl"] .cta.afb .afb__icon { transform: scaleX(-1); }

@media (max-width: 640px) { .cta.afb { --h: 50px; --ic: 38px; --pad-s: 20px; } }
@media (prefers-reduced-motion: reduce) { .cta.afb *, .cta.afb::after { transition: none !important; animation: none !important; } }