Magnetic Acid

:root {
      --ink: #07080a;
      --acid: #b8ff2e;
      --acid-dim: #7ab814;
      --glow: rgba(184, 255, 46, 0.45);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      min-height: 100vh;
      display: grid;
      place-items: center;
      background:
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(184, 255, 46, 0.08), transparent),
        var(--ink);
      font-family: "Segoe UI", system-ui, sans-serif;
      color: #fff;
      overflow: hidden;
    }

    .stage {
      position: relative;
      display: grid;
      gap: 2rem;
      place-items: center;
      padding: 2rem;
    }

    .label {
      font-size: 0.7rem;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.35);
    }

    /* ——— MAGNETIC BUTTON ——— */
    .btn-magnetic {
      --x: 0px;
      --y: 0px;
      position: relative;
      isolation: isolate;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.65rem;
      padding: 1.05rem 2.4rem;
      border: none;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--acid) 0%, #d4ff6a 45%, var(--acid-dim) 100%);
      color: #06100a;
      font-weight: 800;
      font-size: 1.05rem;
      letter-spacing: 0.02em;
      cursor: pointer;
      transform: translate(var(--x), var(--y));
      transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
      box-shadow:
        0 0 0 1px rgba(184, 255, 46, 0.35),
        0 12px 40px var(--glow),
        0 0 80px rgba(184, 255, 46, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
      overflow: hidden;
    }

    .btn-magnetic::before {
      content: "";
      position: absolute;
      inset: -40%;
      background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.55), transparent 45%);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: -1;
      pointer-events: none;
    }

    .btn-magnetic:hover::before { opacity: 1; }

    .btn-magnetic:hover {
      box-shadow:
        0 0 0 1px rgba(184, 255, 46, 0.6),
        0 18px 50px var(--glow),
        0 0 100px rgba(184, 255, 46, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    .btn-magnetic:active {
      transform: translate(var(--x), var(--y)) scale(0.97);
    }

    .btn-magnetic .icon {
      width: 1.1rem;
      height: 1.1rem;
      display: grid;
      place-items: center;
      transition: transform 0.3s ease;
    }

    .btn-magnetic:hover .icon { transform: translateX(3px); }

    /* ring pulse */
    .btn-magnetic::after {
      content: "";
      position: absolute;
      inset: -6px;
      border-radius: inherit;
      border: 1px solid rgba(184, 255, 46, 0.35);
      animation: ring 2.4s ease-out infinite;
      pointer-events: none;
      z-index: -2;
    }

    @keyframes ring {
      0% { transform: scale(0.92); opacity: 0.8; }
      100% { transform: scale(1.25); opacity: 0; }
    }

    /* secondary ghost */
    .btn-ghost {
      margin-top: 0.5rem;
      padding: 0.9rem 1.8rem;
      border-radius: 999px;
      border: 1px solid rgba(184, 255, 46, 0.35);
      background: transparent;
      color: var(--acid);
      font-weight: 700;
      font-size: 0.95rem;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .btn-ghost span {
      position: relative;
      z-index: 1;
    }

    .btn-ghost::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--acid);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
      z-index: 0;
    }

    .btn-ghost:hover {
      color: #06100a;
      border-color: var(--acid);
      box-shadow: 0 0 30px var(--glow);
    }

    .btn-ghost:hover::before { transform: scaleX(1); }