/* ArrowButton (H10 design system): outline ring, fill blooms from the centre, the arrow swaps
   and the label shifts. Corners go from half-height to radius-md in 150ms so the shape answers
   the pointer at once; the fill, arrows and label take 450ms.

   Interaction adapted from "Modern Button" by gharsh11032000 (Harsh Gupta), uiverse.io.
   Copyright 2026 gharsh11032000 (Harsh Gupta). MIT License: permission is hereby granted, free
   of charge, to any person obtaining a copy of this software, to deal in the Software without
   restriction, provided the copyright notice and this permission notice are included; the
   Software is provided "as is", without warranty of any kind.

   Markup (order matters):
   <a class="arrow-btn arrow-btn--yellow" href="…">
     <svg class="arrow-btn__icon arrow-btn__icon--in" …/>
     <span class="arrow-btn__label">…</span>
     <span class="arrow-btn__fill" aria-hidden="true"></span>
     <svg class="arrow-btn__icon arrow-btn__icon--out" …/>
   </a>
   Draw arrows pointing right; they mirror and travel the reading direction in RTL. */

.arrow-btn {
  --ab-dir: 1;
  --ab-bg: transparent;
  --ab-ring: var(--h10-ink);
  --ab-text: var(--h10-ink);
  --ab-fill: var(--h10-yellow);
  --ab-text-on: var(--h10-ink);
  --ab-radius: calc(var(--tap-min) / 2);
  --ab-radius-on: var(--radius-md);   /* corners in the engaged state */
  --ab-bloom: 14;
  --ab-dur: 450ms;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min); padding: 0 44px;
  border: 0; border-radius: var(--ab-radius);
  background: var(--ab-bg); color: var(--ab-text);
  box-shadow: 0 0 0 2px var(--ab-ring);
  font: 600 16px/22px var(--font);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-radius 150ms var(--ease-out),
    box-shadow var(--ab-dur) var(--ease-out),
    color 200ms ease,
    transform 160ms var(--ease-out),
    background-color 0s;
}
/* Engaged: once the bloom has covered the button, the ground takes the fill colour too, so no
   sliver of the old ground shows along the anti-aliased rounded edge. It snaps back on leave
   (0s above) so the shrinking bloom stays visible. */
.arrow-btn:is(:focus-visible, [aria-expanded="true"]) {
  background-color: var(--ab-fill);
  transition:
    border-radius 150ms var(--ease-out),
    box-shadow var(--ab-dur) var(--ease-out),
    color 200ms ease,
    transform 160ms var(--ease-out),
    background-color 0s linear 220ms;
}
@media (hover: hover) and (pointer: fine) {
  .arrow-btn:hover {
    background-color: var(--ab-fill);
    transition:
      border-radius 150ms var(--ease-out),
      box-shadow var(--ab-dur) var(--ease-out),
      color 200ms ease,
      transform 160ms var(--ease-out),
      background-color 0s linear 220ms;
  }
}
.arrow-btn:dir(rtl) { --ab-dir: -1; }

.arrow-btn__label {
  position: relative; z-index: 1;
  transform: translateX(calc(var(--ab-dir) * -12px));
  transition: transform var(--ab-dur) var(--ease-out);
}
.arrow-btn__icon {
  position: absolute; z-index: 2; top: 50%;
  width: 22px; height: 22px; margin-top: -11px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--ab-dur) var(--ease-out);
}
.arrow-btn__icon--out { inset-inline-end: 16px; transform: translateX(0) scaleX(var(--ab-dir)); }
.arrow-btn__icon--in { inset-inline-start: 16px; transform: translateX(calc(var(--ab-dir) * -64px)) scaleX(var(--ab-dir)); }
/* a filled brand glyph (WhatsApp) instead of a stroked arrow */
.arrow-btn__icon--glyph { fill: currentColor; stroke: none; }
.arrow-btn__fill {
  position: absolute; z-index: 0; top: 50%; left: 50%;
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%; background: var(--ab-fill);
  opacity: 0; transform: scale(0.8);
  transition: transform var(--ab-dur) var(--ease-out), opacity var(--ab-dur) var(--ease-out);
}

/* the engaged state: pointer hover (fine pointers only), keyboard focus, and an open dropdown
   (aria-expanded) so a trigger stays lit while its menu is showing */
.arrow-btn:is(:focus-visible, [aria-expanded="true"]) { border-radius: var(--ab-radius-on); box-shadow: 0 0 0 12px transparent; color: var(--ab-text-on); }
.arrow-btn:is(:focus-visible, [aria-expanded="true"]) .arrow-btn__label { transform: translateX(calc(var(--ab-dir) * 12px)); }
.arrow-btn:is(:focus-visible, [aria-expanded="true"]) .arrow-btn__icon--out { transform: translateX(calc(var(--ab-dir) * 64px)) scaleX(var(--ab-dir)); }
.arrow-btn:is(:focus-visible, [aria-expanded="true"]) .arrow-btn__icon--in { transform: translateX(0) scaleX(var(--ab-dir)); }
.arrow-btn:is(:focus-visible, [aria-expanded="true"]) .arrow-btn__fill { opacity: 1; transform: scale(var(--ab-bloom)); }
@media (hover: hover) and (pointer: fine) {
  .arrow-btn:hover { border-radius: var(--ab-radius-on); box-shadow: 0 0 0 12px transparent; color: var(--ab-text-on); }
  .arrow-btn:hover .arrow-btn__label { transform: translateX(calc(var(--ab-dir) * 12px)); }
  .arrow-btn:hover .arrow-btn__icon--out { transform: translateX(calc(var(--ab-dir) * 64px)) scaleX(var(--ab-dir)); }
  .arrow-btn:hover .arrow-btn__icon--in { transform: translateX(0) scaleX(var(--ab-dir)); }
  .arrow-btn:hover .arrow-btn__fill { opacity: 1; transform: scale(var(--ab-bloom)); }
}
.arrow-btn:active { transform: scale(0.97); box-shadow: 0 0 0 4px var(--ab-ring); }

/* colour schemes (ground → hover fill) */
.arrow-btn--yellow { --ab-bg: var(--h10-yellow); --ab-ring: var(--h10-yellow); --ab-text: var(--h10-ink); --ab-fill: var(--h10-ink); --ab-text-on: var(--h10-yellow); }
.arrow-btn--on-dark { --ab-ring: var(--h10-yellow); --ab-text: var(--h10-yellow); --ab-fill: var(--h10-yellow); --ab-text-on: var(--h10-ink); }
.arrow-btn--ghost { --ab-ring: var(--text-on-dark); --ab-text: var(--text-on-dark); --ab-fill: var(--text-on-dark); --ab-text-on: var(--h10-ink); }
/* WhatsApp: ghost at rest, blooms WhatsApp green on hover; ink on the green reads ~9:1 (white would be ~2:1) */
.arrow-btn--whatsapp { --ab-fill: #25D366; --ab-text-on: var(--h10-ink); }

/* download: the icon drops out and a new one drops in (app CTAs, WhatsApp); the label stays put */
.arrow-btn--download { padding-inline: 24px 52px; }
.arrow-btn--download .arrow-btn__label,
.arrow-btn--download:is(:focus-visible, [aria-expanded="true"]) .arrow-btn__label { transform: none; }
.arrow-btn--download .arrow-btn__icon--out { transform: translateY(0); }
.arrow-btn--download .arrow-btn__icon--in { inset-inline-start: auto; inset-inline-end: 16px; transform: translateY(-40px); }
.arrow-btn--download:is(:focus-visible, [aria-expanded="true"]) .arrow-btn__icon--out { transform: translateY(40px); }
.arrow-btn--download:is(:focus-visible, [aria-expanded="true"]) .arrow-btn__icon--in { transform: translateY(0); }
@media (hover: hover) and (pointer: fine) {
  .arrow-btn--download:hover .arrow-btn__label { transform: none; }
  .arrow-btn--download:hover .arrow-btn__icon--out { transform: translateY(40px); }
  .arrow-btn--download:hover .arrow-btn__icon--in { transform: translateY(0); }
}

.arrow-btn--round { --ab-radius-on: var(--ab-radius); }   /* stays fully rounded when engaged */
.arrow-btn--lg { --ab-radius: 28px; min-height: 56px; font-size: 18px; line-height: 26px; }
.arrow-btn--block { width: 100%; --ab-bloom: 26; }

@media (prefers-reduced-motion: reduce) {
  .arrow-btn, .arrow-btn__label, .arrow-btn__icon, .arrow-btn__fill { transition: none; }
}