/* Native CSS interpretation of johuniq's Liquid Metal Button (21st.dev / Joly UI).
   No shader runtime: keep navigation light, accessible and usable without JS. */
@property --metal-angle { syntax: '<angle>'; initial-value: 135deg; inherits: false; }
.leal-site .button-metal,
.leal-site .quick-links .quick-primary {
  --metal-angle: 135deg;
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 999px;
  color: #edffff;
  background: linear-gradient(170deg, #29363b, #0b1217 48%, #172127) padding-box,
    conic-gradient(from var(--metal-angle), #314b55, #b5ccce 9%, #f1ffff 14%, #55727b 23%, #1a343d 35%, #74f4ed 47%, #f4ffff 51%, #52666d 61%, #263b44 72%, #b7fffa 84%, #314b55) border-box;
  box-shadow: inset 0 1px 1px #efffff36, inset 0 -2px 5px #0009, 0 5px 18px #0004, 0 0 15px #63f8ec12;
  transition: --metal-angle .9s ease, box-shadow .3s, transform .3s;
  text-shadow: 0 1px 2px #0008;
  min-height: 48px;
}
.leal-site .button-metal::after,
.leal-site .quick-links .quick-primary::after {
  content: ''; position: absolute; inset: -100% -65%; pointer-events: none;
  background: linear-gradient(110deg, transparent 42%, #b8ffff13 48%, #fff2 50%, transparent 57%);
  transform: translateX(-45%); transition: transform .8s ease;
}
.leal-site .button-metal:hover,
.leal-site .button-metal:focus-visible,
.leal-site .quick-links .quick-primary:hover,
.leal-site .quick-links .quick-primary:focus-visible {
  --metal-angle: 420deg;
  box-shadow: inset 0 1px 2px #efffff45, 0 5px 23px #0005, 0 0 22px #63f8ec2b;
  color: #fff;
  transform: translateY(-2px);
}
.leal-site .button-metal:hover::after,
.leal-site .button-metal:focus-visible::after,
.leal-site .quick-links .quick-primary:hover::after { transform: translateX(45%); }
.leal-site .button-metal:focus-visible,
.leal-site .quick-links .quick-primary:focus-visible { outline: 2px solid #abfff8; outline-offset: 5px; }
.leal-site .button-metal:active { transform: translateY(0) scale(.98); }
.leal-site .button-metal:disabled { cursor: not-allowed; opacity: .5; transform: none; }
.leal-site .button-metal svg { color: #9bfff6; }
.leal-site .quick-links .quick-primary { border-radius: 16px; }
.leal-site .quick-links .quick-primary small { color: #b8d5d8; }
.leal-site .quick-links .quick-primary svg { stroke: #b9fff7; border-color: #8df6ec55; }
@media (prefers-reduced-motion: reduce) {
  .leal-site .button-metal, .leal-site .button-metal::after,
  .leal-site .quick-links .quick-primary, .leal-site .quick-links .quick-primary::after { transition: none; transform: none; }
}