/* Adapted from Anthony / Blade Multimedia: CSS Button Effect: Animated Border & Glow.
   https://codepen.io/AnthonyBmm/pen/poooJmO (example 22 in the supplied collection).
   Four staggered edge trails follow the hold progress, including its reverse motion. */
.invitation-actions .invitation-hold,
.invitation-actions .invitation-hold:hover:not(:disabled) {
  --hold-progress: 0;
  --hold-heat: clamp(0, calc((var(--hold-progress) - .4) * 1.67), 1);
  position: relative;
  min-height: 58px;
  border: 3px outset #605b59;
  border-radius: 13px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(160deg, #393432, #171515 74%);
  color: #fff;
  text-shadow: 0 0 calc(var(--hold-heat) * 9px) rgb(255 235 222 / var(--hold-heat));
  box-shadow: 0 3px 0 #181514,
    0 0 calc(3px + var(--hold-heat) * 17px) rgb(246 83 54 / calc(.06 + var(--hold-heat) * .6)),
    0 0 calc(var(--hold-heat) * 48px) rgb(246 83 54 / calc(var(--hold-heat) * .26));
  transform: translateY(0);
  transition: transform 180ms ease, border-color 180ms ease;
  touch-action: none;
  -webkit-touch-callout: none;
}
.invitation-actions .invitation-hold[data-press-state='pressing'] {
  transform: translateY(2px);
  border-color: #b79b8c;
}
.invitation-actions .invitation-hold[data-press-state='complete'] {
  border-color: #fff2e8;
  color: #fff;
  opacity: 1;
}
.invitation-hold .hold-border { position: absolute; z-index: 2; inset: 0; overflow: hidden; border-radius: 9px; pointer-events: none; }
.invitation-hold .hold-border i { position: absolute; display: block; opacity: clamp(0, calc(var(--hold-progress) * 20), 1); filter: drop-shadow(0 0 3px #ffd2a7); }
.invitation-hold .hold-border i:nth-child(1) { top: 0; left: clamp(-100%, calc(var(--hold-progress) * 350% - 100%), 100%); width: 100%; height: 3px; background: linear-gradient(90deg, transparent, #ffb28a 72%, #fff6e9); }
.invitation-hold .hold-border i:nth-child(2) { top: clamp(-100%, calc(var(--hold-progress) * 350% - 150%), 100%); right: 0; width: 3px; height: 100%; background: linear-gradient(180deg, transparent, #ffb28a 72%, #fff6e9); }
.invitation-hold .hold-border i:nth-child(3) { bottom: 0; right: clamp(-100%, calc(var(--hold-progress) * 350% - 200%), 100%); width: 100%; height: 3px; background: linear-gradient(270deg, transparent, #ffb28a 72%, #fff6e9); }
.invitation-hold .hold-border i:nth-child(4) { bottom: clamp(-100%, calc(var(--hold-progress) * 350% - 250%), 100%); left: 0; width: 3px; height: 100%; background: linear-gradient(0deg, transparent, #ffb28a 72%, #fff6e9); }
@media (prefers-reduced-motion: reduce) {
  .invitation-actions .invitation-hold,
  .invitation-actions .invitation-hold:hover:not(:disabled),
  .invitation-actions .invitation-hold[data-press-state='pressing'] { transform: none; transition: none; box-shadow: none; text-shadow: none; }
  .invitation-hold .hold-border { display: none; }
  .invitation-actions .invitation-hold { border-color: rgb(99 88 82 / 1); }
  .invitation-actions .invitation-hold[data-press-state='complete'] { border-color: #f53224; }
}