/* =========================================================
   VILIANTE BUTTON SYSTEM
   ========================================================= */

:root {

  /* =====================================================
     BORDER RADII
     ===================================================== */

  --radius-pill: 999px;
  --radius-xl: 38px;
  --radius-lg: 34px;
  --radius-md: 30px;
  --radius-card: 22px;
  --radius-sm: 18px;


  /* =====================================================
     BUTTON PADDING
     ===================================================== */

  --btn-padding-sm:
    10px 16px;

  --btn-padding-md:
    13px 26px;

  --btn-padding-lg:
    15px 28px;

  --btn-padding-xl:
    20px 22px;


  /* =====================================================
     TRANSITIONS
     ===================================================== */

  --transition-fast:
    180ms ease;

  --transition-medium:
    220ms ease;

  --transition-slow:
    280ms ease;

  --transition-hover:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;

  --transition-card:
    transform 260ms ease,
    box-shadow 260ms ease,
    border-color 260ms ease;


  /* =====================================================
     SHADOWS
     ===================================================== */

  --shadow-soft:
    0 10px 30px rgba(15,23,42,.08);

  --shadow-hover:
    0 18px 42px rgba(15,23,42,.14);

  --shadow-kicker:
      0 14px 36px rgba(8,12,20,.16);

}

/* order-now-heartbeat-v1 */
@keyframes vilianteOrderHeartbeat {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 14px 32px rgba(14, 55, 120, 0.22);
  }

  14% {
    transform: scale(1.055);
    box-shadow: 0 18px 44px rgba(14, 85, 180, 0.34);
  }

  28% {
    transform: scale(1);
    box-shadow: 0 14px 32px rgba(14, 55, 120, 0.22);
  }

  42% {
    transform: scale(1.035);
    box-shadow: 0 16px 38px rgba(14, 85, 180, 0.28);
  }

  56% {
    transform: scale(1);
    box-shadow: 0 14px 32px rgba(14, 55, 120, 0.22);
  }
}

.viliante-order-heartbeat {
  animation: vilianteOrderHeartbeat 2.4s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, box-shadow;
}

.viliante-order-heartbeat:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .viliante-order-heartbeat {
    animation: none !important;
  }
}