@property --pos-x{syntax:"<percentage>";inherits:false;initial-value:11.14%}@property --pos-y{syntax:"<percentage>";inherits:false;initial-value:140%}@property --spread-x{syntax:"<percentage>";inherits:false;initial-value:150%}@property --spread-y{syntax:"<percentage>";inherits:false;initial-value:180.06%}@property --color-1{syntax:"<color>";inherits:false;initial-value:#000}@property --color-2{syntax:"<color>";inherits:false;initial-value:#08012c}@property --color-3{syntax:"<color>";inherits:false;initial-value:#4e1e40}@property --color-4{syntax:"<color>";inherits:false;initial-value:#70464e}@property --color-5{syntax:"<color>";inherits:false;initial-value:#88394c}@property --border-angle{syntax:"<angle>";inherits:true;initial-value:20deg}@property --border-color-1{syntax:"<color>";inherits:true;initial-value:#e64d8033}@property --border-color-2{syntax:"<color>";inherits:true;initial-value:#b31a4dbf}@property --stop-1{syntax:"<percentage>";inherits:false;initial-value:37.35%}@property --stop-2{syntax:"<percentage>";inherits:false;initial-value:61.36%}@property --stop-3{syntax:"<percentage>";inherits:false;initial-value:78.42%}@property --stop-4{syntax:"<percentage>";inherits:false;initial-value:89.52%}@property --stop-5{syntax:"<percentage>";inherits:false;initial-value:100%}.gradient-button{appearance:none;cursor:pointer;background:radial-gradient(var(--spread-x) var(--spread-y) at var(--pos-x) var(--pos-y), var(--color-1) var(--stop-1), var(--color-2) var(--stop-2), var(--color-3) var(--stop-3), var(--color-4) var(--stop-4), var(--color-5) var(--stop-5));transition:--pos-x .5s,--pos-y .5s,--spread-x .5s,--spread-y .5s,--color-1 .5s,--color-2 .5s,--color-3 .5s,--color-4 .5s,--color-5 .5s,--border-angle .5s,--border-color-1 .5s,--border-color-2 .5s,--stop-1 .5s,--stop-2 .5s,--stop-3 .5s,--stop-4 .5s,--stop-5 .5s;position:relative}.gradient-button:before{content:"";border-radius:inherit;background:linear-gradient(var(--border-angle), var(--border-color-1), var(--border-color-2));-webkit-mask-composite:xor;pointer-events:none;padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.gradient-button:hover{--pos-x:0%;--pos-y:91.51%;--spread-x:120.24%;--spread-y:103.18%;--color-1:#c96287;--color-2:#c66c64;--color-3:#cc7d23;--color-4:#37140a;--color-5:#000;--border-angle:190deg;--border-color-1:#f9d2df1a;--border-color-2:#f9d2df99;--stop-1:0%;--stop-2:8.8%;--stop-3:21.44%;--stop-4:71.34%;--stop-5:85.76%}.gradient-button-variant{--color-1:#002;--color-2:#1f3f6d;--color-3:#469396;--color-4:#f1ffa5;--border-angle:200deg;--border-color-1:#f9d2ec99;--border-color-2:#f2d9ea26}.gradient-button-variant:hover{--pos-x:0%;--pos-y:95.51%;--spread-x:110.24%;--spread-y:110.2%;--color-1:#000020;--color-2:#f1ffa5;--color-3:#469396;--color-4:#1f3f6d;--color-5:#000;--stop-1:0%;--stop-2:10%;--stop-3:35.44%;--stop-4:71.34%;--stop-5:90.76%;--border-angle:210deg;--border-color-1:#f9d2ec33;--border-color-2:#f2d9eabf}