body {
     /* define color variables */
     --color-electric-cyan: rgb(0, 240, 255);
     --color-electric-purple: rgb(74, 74, 245);
     --color-btn: var(--color-electric-purple);
 }

 .electric-btn {
     position: relative;
     padding: 4px 8px;
     font-size: 20px;
     font-weight: bold;
     color: #fff;
     background: linear-gradient(145deg, #1a1a2e, #0f0f1e);
     border: 2px solid var(--color-btn);
     text-transform: uppercase;
     letter-spacing: 2px;
     box-shadow: 0 0 20px rgba(var(--color-btn), 0.3);
     border-radius: 12px;
     cursor: pointer;
     overflow: hidden;
     transition: color 0.3s, box-shadow 0.6s;
     width: fit-content;
     /* temp margins */
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 20px;
 }

 .electric-btn:hover {
     box-shadow: 0 0 40px var(--color-btn);
     border-color: rgb(106, 106, 245);
 }

 .plasmaCanvas {
     position: absolute;
     pointer-events: none;
     z-index: 0;
 }

 /* Lightning pulse effect
  .electric-btn::before {
    content: "";
    position: absolute;
    top: -200%;
    left: -200%;
    width: 400%;
    height: 400%;
    background: repeating-conic-gradient(
      from 0deg,
      transparent 0deg 10deg,
      rgba(0,255,255,0.3) 10deg 20deg
    );
    
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: inherit;
    z-index: 0;
  } */

 /* .electric-btn:hover::before {
    opacity: 1;
    animation: electric-spin 6s linear infinite;
  } */

 @keyframes electric-spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 /* Sparks (created by JS) */
 .spark {
     position: absolute;
     width: 4px;
     height: 4px;
     background: var(--color-btn);
     border-radius: 50%;
     pointer-events: none;
     opacity: 0;
     box-shadow: 0 0 6px var(--color-btn), 0 0 12px var(--color-btn);
     animation: spark-fade 1s forwards;
     /* z-index: 0; */
 }


 @keyframes spark-fade {
     0% {
         transform: translate(0, 0) scale(1);
         opacity: 1;
     }

     25% {
         /* halfway, faster at 25% */
         /* transform-origin: calc(var(--dx)  * -0.25) calc(var(--dy) * -0.25); */
         transform: translate(calc(var(--dx) * 0.5), calc(var(--dy) * 0.5)) rotate(20deg) scale(1.1);
     }

     50% {
         /* halfway, bend the path sideways */
         transform-origin: calc(var(--dx) * -0.66) calc(var(--dy) * -0.66);
         transform: translate(calc(var(--dx) * 0.66), calc(var(--dy) * 0.66)) scale(1.1);
     }

     75% {
         /* halfway, bend the path sideways */
         transform: translate(calc(var(--dx) * 0.75), calc(var(--dy) * 0.75)) scale(1.1);
     }

     100% {
         transform: translate(var(--dx), var(--dy)) scale(0);
         opacity: 0;
     }
 }

 .electric-btn:active {
     transform: scale(0.96);
     box-shadow: 0 0 25px var(--color-btn), inset 0 0 18px var(--color-btn);
     background: linear-gradient(145deg, #0a0f16, #141c27);
     border-color: var(--color-btn);
     color: var(--color-btn);
     opacity: 1;
     animation: electric-flash 0.8s ease-out;
 }

 /* Quick electric flash when clicked */
 .electric-btn:active::before {
     opacity: 1;
     animation: electric-flash 3s ease-out;
 }

 @keyframes electric-flash {
     0% {
         filter: brightness(1.2) blur(0.5px);
     }

     50% {
         filter: brightness(1.5) blur(1.5px);
     }

     100% {
         filter: brightness(1) blur(0);
     }
 }